Chrome Dev Summit 2016 內容整理(部分)

此文章轉載自 個人博客

Progressive Web Apps

今年若是你關注過 Chrome 開發團隊的話，那必定或多或少的會聽到過 Progressive Web Apps（PWA），實際上，今年 Chrome 團隊可謂是 傾盡全力的推廣 PWA，從上半年的 Google IO 大會關於 各種有關 PWA 的 9 個專題，直到今天剛剛結束的，基本是 PWA 推廣大會的 CDS，可見隨着 PWA 技術的成熟以及瀏覽器的支持度提升，不久必將會迎來一次爆發。若是你目前還不瞭解什麼是 PWA ，請去 這裏 自行補腦，這裏我簡單來講，PWA 就是可以提供相似像 Navive App 同樣體驗的 Web App。它主要有幾個特色：

• 能夠添加到桌面，文藝點說就是具備可安裝性

• 離線能力

• 消息推送

• 安全

• 響應式

博主湊熱鬧，最近把 個人博客 添加了離線和添加到主屏幕功能，若是你的手機支持（安卓手機新版 Chrome，目前蘋果還不支持），固然，或者是 PC 端的 Chrome，歡迎體驗。

好了，廢話很少說，此次大會在 youtube 上實時更新，我趁熱挑選了本身感興趣的幾個主題，整理了主要內容，因爲時間比較短，有些內容只是知道了概念（甚至有些只知道了個新名詞），若是不對，歡迎你們留言指正，我後面也會陸續更新。

KeyNote

點擊 這裏 觀看視頻。

首先是 Darin Fisher 的開場，介紹了 Chrome 以及 Web 的現狀。

• 目標：讓 Web 變得更先進。

• 目前 Chrome 擁有 20 億用戶（手機+PC）

• Link 很牛

• 每次交互的改變將會挖掘 20% 的潛在用戶

• 移動端 Web：侷限帶來創新

• 移動端的挑戰：分辨率，cpu，內存，電池，網絡

• 60% 的手機用戶是 2G 網絡

• 印度 2.3 億，美國 4.6 億，中國 7.6 億的網民

• 在印度 65% 人不上網，美國 20%

• Progressive Web Apps 從根本上提升 web 體驗

• PWA demo

• 用 阿里 的 PWA 舉例（原來老外也知道雙十一），提升了 76% 的轉化率

• 超過 3 秒的網頁，53% 的用戶選擇離開

• Service Worker API

• 在 3G 環境下，要確保頁面 5 秒內加載完成

• 「添加到主屏幕」這個功能提升了用戶 4 倍的瀏覽頻率

• 消息推送：天天都有來自 5 萬個域名下的 180 億次推送

• Seamless Sign-In：在 AliExpress 中下降 85% 登錄失敗的概率，提升了 11% 的轉化率

• Payment API

• Lighthouse 是個測試 PWA 的工具（測試了一下我博客的分數，竟然到了80分，竊喜~）

• Polymer

• Beta webcomponents

• AMP（Accelerated Mobile Pages）

• browser-issue-tracker-search 爲開發者提供的網站，包括bug，w3c 標準，API 建議等

• Web assembly, WebGL 2.0, WebVR, WebAR, WebBluetooth

Building Progressive Web apps.

點擊 這裏 觀看視頻。

Thao Tran 主要是用一些數據和示例爲咱們展現了 PWA 的價值以及意義。

• 去年的時候基本只有 Flipkart 作了 PWA 的產品，但今年目前爲止已經有來自 35 個國家的 17K 個 PWA。

• 在美帝，PWA 已常常常會出如今各個熱門技術雜誌的頭條。

• 簡單介紹什麼是 PWA

• 列舉了幾個 PWA 的例子以及帶來有力數據，https://m.alibaba.com/，https://housing.com，這裏不得不膜拜一下阿里。數據主要集中在用戶轉化率，效率以及開發成本。

• 用 West elm show 一下 PWA。

• 圍繞 PWA 加載快，省流量列舉數據。

• 再次列舉幾個 PWA 產品。

Future App Model: Advanced Service Worker

Jake 大神 的演講，點擊 這裏 觀看視頻。

Jake 大神的演講其實在他 以前的博客 中介紹過一些內容，演講詼諧幽默，並又帶來了不少乾貨：

• 介紹了 Service Worker 瀏覽器支持狀況：

  • Chrome/Firefox：支持

  • Edge：實現中(高優先級)

  • Safari：Considering...(這裏不知道怎麼翻譯，猶豫中？思考中？)

• Stream

  • Async iterators（https://github.com/tc39/proposal-async-iteration）

  • Transform streams（https://streams.spec.whatwg.org/）

  • Identity Streams

• 拋出 SPA 不如 Server Rendering 快的問題。

• Service Worker + Streams 能夠改善，但仍是不能作到 SPA 比 Server Render 快並用 github 舉了例子。

• 然而，PWA != SPA

• Navigation preload

• Forigen Fetch

• Background Fetch

• Navigation transitions

Progressive Performance

點擊 這裏 觀看視頻。

此次 Alex 並無直接說 PWA 的話題，而是爲咱們帶來了移動端性能方面的分享，指出瞭如今移動端性能低下，要注重在惡劣環境下（網絡差，設備低電量等）還保持一個好的用戶體驗。

• Mobile website 愈來愈重要

• 在 PC 開發環境下看起來性能還不錯的網站，在手機上其實並不盡人意

• 若是你的頁面在 3 秒鐘加載不出來的話，有 53% 的用戶會選擇離開

• 而報告中表示手機網頁打開的平均時間在 19s

• Motion Mark 測試，PC 要比手機端快 25 倍

• 要用真機 Debug

• 要重視低端設備

• Power = Heat，硬件限制以致於手機不能比 PC 快

• High Performance Browser Networking

• 少加載 code，在合適的時間執行合適的代碼

• Service Worker 不只僅是離線，更重要的是提高效率

The 「Progressive」 in Progressive Web Apps

點擊 這裏 觀看視頻。

Patrick Kettner 是來自微軟 Edge 的 PM，他演講的主線是他兒子順便介紹了一下 PWA，但因而可知微軟支持 PWA 只是遲早的事情。

• 2g 網絡毀了他的生活

• 回顧了一下 App Cache

• 提供了一種新的 開發方式

• PWA 在 Edge 上

• WebWorkerPreProcessor

What Comes Next for the Web?

點擊 這裏 觀看視頻。

Paul 主要分享了關於 Web 將來的發展方向，包括 WebVR，性能提高等等。

• Web 必定會趕超 Native APIs

• 手機遊戲會與 Native 分庭抗禮，並帶來更高的利潤

• 現有 API

  • 定位（Geolocation）

  • 相機（Camera）

  • 麥克風（Microphone）

  • 電池（Battery）

  • 權限（Permissions）

  • 網絡情況（Network）

  • 自動填充（Autofill）

  • 用戶受權（Credential Management API）

  • 支付（PaymentRequest API）

  • 消息推送（Push notifications）

  • 離線（Offline）

  • 可安裝（Installability）

• SLICE（Secure，Linkable，Indexable，Composable，Ephemeral）

• 計劃：

  • 已經實現的

    • position: sticky，Intersection Observer, Web Componensts, PointerEvents

    • PWA：App drawer，system UI.

    • PWA ACTION_VIEW

    • 從消息啓動應用

    • 名稱和圖片可更新（manifest.json）

    • manifest.json 添加 scope 屬性

    • chrome://flags/ 啓用這些功能

  • 將會實現

    • Doing Science On The Web

    • https://github.com/jpchase/origintrials

    • Web Share API

    • Media improvements（多設備之間）

    • Background playback（好比鎖屏後的音樂）

    • canvas.captureStream() + Web RTC

    • canvas.captureStream() + MediaRecorder.

    • ImageCaputre API.

    • FaceDetector API.

    • Generic Sensor API.

    • AmbientLightSensor API.

    • Fused Sensors

  • 新的交互方式

    • Physical Web.

    • Web Bluetooth.

    • WebUSB.

    • WebVR.

觀後感

這週末在家宅兩天來看會議視頻其實仍是值得的，有了很多收穫。此次大會幾乎全部人的演講都會提到 PWA，PWA 是 Chrome 團隊近兩年來全力推廣，安卓系統也提供全方位的支持，PWA 必將會是將來 Web 發展中很是重要的一步。同時 PWA 也涵蓋了不少新技術，Service Worker，Streams，Cache，用戶受權還有大會中提到的相機，支付等等原生 API ，因此看來前端之路，路漫漫其修遠兮。