Google I/O 2018 : Web 現狀綜述

DataMonologue發表於2019-02-28

無論是在桌面端還是在移動端 ,Web 都處於高速發展中。每個人都能輕鬆地構建快速且身臨其境的頁面。同時,開發者工具也越來越強大、越來越多樣。 Google I/O 2018, chrome 團隊 leader Ben Galbraith 和 amp 專案 leader Martha 攜手從 Google 的角度描繪了 Web 世界的現狀。

Service Worker

Google I/O 2018 : Web 現狀綜述

Service Worker 可能是過去 10年中 Web 提供的一個最為重要的 API。它提供了大量高階別的抽象,使得 Web 的能力不再侷限於展示頁面。現在 Web 可以接收訊息推送等事件、處理非同步資料傳輸、甚至控制網路連線 。

目前,包括 safari、edge 在內的各大瀏覽器都已經支援 Service Worker。

大量 PWA 也開始在商業活動中展露頭角。例如 ofo(需翻牆) 的 PWA 使用 Geolocation 進行定位、Camera API 進行二維碼掃描實現了使用者無需下載安裝 App 也能用車。1800flowers.com 通過 PWA 使得交易量增長了50%。巴西最大的媒體公司 EDITORA GLOBA 將網站升級為 PWA 之後,使用者停留時長提升了50%。星巴克也從 PWA 受益,日活躍使用者數和月活躍使用者數均增長了2倍。google ads 的客戶,在將網站升級為 PWA 之後,平均會話量提升了20%。

許多 Google 的產品也在使用 Service Worker。Service Worker 使得 Google Search 每次載入減少 50% 的外部 JavaScript 下載、互動延遲降低了 6%。 Bulletin 由於使用了 Service Worker,首屏載入速度大幅提高,同時實現了一套程式碼執行在 Android、iOS、desktop 等多個平臺。 Google Maps 針對印度的弱網環境和低效能裝置開發了 PWA,節約了使用者花在資料上的費用。

桌面版 chrome 將在六月份增加 add to home screen 功能,使得 PWA 能夠像普通應用軟體一樣直接點選桌面上的圖示開啟。

Web Media

chrome 採集的資料顯示,在 Android 裝置上有 15% 的時間、桌面端超過 20% 的時間是在播放視訊。全世界每天有超過30000年時長的視訊被觀看。 因此有大量媒體相關的 API 被提出。

Media Session API 允許頁面為標準媒體互動提供自定義行為。vimeo 通過這個介面實現了鎖屏時暫停播放視訊。

Media Capabilities API 使得瀏覽器能夠自動根據裝置狀況選擇視訊流的來源。

Picture-in-Picture Support 使得視訊能夠在螢幕的任意位置播放。

Presentation API 能夠更加精確的控制在第二螢幕上展示的內容。

AV1 視訊編碼格式也將在今年應用於 chrome。

WebAssembly

Google I/O 2018 : Web 現狀綜述

WebAssembly是一種新的編碼方式,可以在現代的網路瀏覽器中執行 - 它是一種低階的類組合語言,具有緊湊的二進位制格式,可以接近原生的效能執行,併為諸如C / C ++等語言提供一個編譯目標,以便它們可以在Web上執行。它也被設計為可以與JavaScript共存,允許兩者一起工作。

通過 WebAssembly ,可以直接把 C/C++ 應用移植到 Web 中,對效能有極高要求的 Web 應用也可以通過 C/C++ 等語言重新編寫,網頁遊戲也將進入一個新的階段。

網頁效能

V8 引擎對 JavaScript 效能的不斷優化使得 Web 應用的響應速度得到了大幅度的提升。

Google I/O 2018 : Web 現狀綜述

Speedometer 是一個衡量 Web 應用效能的瀏覽器基準。Chrome 團隊和社群合作推出了 Speedometer2.0。從上圖可以看到,相同的硬體裝置,如果你的應用是基於 React 構建的,效能足足提升了 112%。

另外,Google 在過去幾個月,還發布了大量 Web 相關的工具、庫等。

比如 lighthouse 3.0、Workbox

我會在下一篇文章,結合本次大會演講視訊和已有資料,詳細介紹每一個有趣的新鮮貨。

本次演講視訊地址 (需翻牆)。

相關文章