無論是在桌面端還是在移動端 ,Web 都處於高速發展中。每個人都能輕鬆地構建快速且身臨其境的頁面。同時,開發者工具也越來越強大、越來越多樣。 Google I/O 2018, chrome 團隊 leader Ben Galbraith 和 amp 專案 leader Martha 攜手從 Google 的角度描繪了 Web 世界的現狀。
Service Worker
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
WebAssembly是一種新的編碼方式,可以在現代的網路瀏覽器中執行 - 它是一種低階的類組合語言,具有緊湊的二進位制格式,可以接近原生的效能執行,併為諸如C / C ++等語言提供一個編譯目標,以便它們可以在Web上執行。它也被設計為可以與JavaScript共存,允許兩者一起工作。通過 WebAssembly ,可以直接把 C/C++ 應用移植到 Web 中,對效能有極高要求的 Web 應用也可以通過 C/C++ 等語言重新編寫,網頁遊戲也將進入一個新的階段。
網頁效能
V8 引擎對 JavaScript 效能的不斷優化使得 Web 應用的響應速度得到了大幅度的提升。
Speedometer 是一個衡量 Web 應用效能的瀏覽器基準。Chrome 團隊和社群合作推出了 Speedometer2.0。從上圖可以看到,相同的硬體裝置,如果你的應用是基於 React 構建的,效能足足提升了 112%。
另外,Google 在過去幾個月,還發布了大量 Web 相關的工具、庫等。
比如 lighthouse 3.0、Workbox
我會在下一篇文章,結合本次大會演講視訊和已有資料,詳細介紹每一個有趣的新鮮貨。
本次演講視訊地址 (需翻牆)。