摘要：在上看到發的視頻被狂轉開始注意之前幾乎對這個詞語沒有印象看到是在的演講還以為是新技術在上找一下這次好多個視頻是關于的視頻的內容主要是講網站優化分別用做例子可惜沒有大概要等小右補方案應該沒有問題從視頻看優化的效果非常顯著本來好幾秒的

在 Twitter 上看到 Addy Osmani 發的視頻被狂轉, 開始注意
https://twitter.com/addyosmani/status/734753297274306561
https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
之前幾乎對這個詞語沒有印象, 看到是在 IO 的演講還以為是新技術
在 Youtube 上找一下, 這次好多個視頻是關于 Progressive Web Apps 的
視頻的內容主要是講網站優化, 分別用 React, Angular, Ember 做例子
可惜沒有 Vue, 大概要等小右補... 方案應該沒有問題
從視頻看, 優化的效果非常顯著, 本來好幾秒的應用能優化到一秒內.. 很夸張
所以仔細了解了一下怎么回事, 現在大概了解

視頻里給的優化方案大概分成幾個步驟(細節還要看視頻確認):

添加 manifest.json 文件, 生成 Android 主屏打開的網頁加載頁面

編寫 Service Worker 腳本處理緩存, 更快讀取緩存

服務端渲染, 用 App Shell 帶來效果, 然后動態加載

啟動過程 JavaScript 代碼的性能優化

雖然是新技術, 但文檔可以追溯到一年前甚至一年半以前
Service Worker 在 2014 年底就在 HTML5 Rocks 上介紹了
manifest.json 的識別功能在 Chrome 39 已經加入
App Shell 僅僅是模板渲染略過動態內容的一個優化
前兩個 API 整體上是 Chrome 支持, 所以兼容性問題較大
那么 Google 既然在大會上推, 說明方案已經比較成熟值得深入了

簡稱 PWA 吧, 名字是從 Android Chrome 的"添加到主屏幕"開始的

Progressive Web Apps: Escaping Tabs Without Losing Our Soul https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

2015 年六月份的文章, 第一次有了這個提法, 針對這類應用
網頁應用在這樣的場景下和移動應用很相似了, 可以從主屏打開
而且, 能快速地加載, 可以跑后臺進程, 加密的連接, 離線使用等等

Instant Loading Web Apps With An Application Shell Architecture https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73

到了年底的時候 Addy Osmani 發了文章, 大致上已經是前面演講的內容了
首先是渲染 App Shell 也就是頁面的框架, 給用戶更好的加載體驗
而且可以通過 Service Worker 來做 App Shell 渲染, 去掉網絡請求的時間
然后再動態地請求更多內容, 填充數據. 整體上看的加載速度會變快

2015 年底還有個 Google Developer Summit, 我以前都沒注意到
據說大會上 PWA 已經名聲很大了, Medium 上專門介紹了一下

Chrome Developer Summit Recap https://medium.com/@davideast/chrome-developer-summit-recap-1137b022b2dc

Getting started with Progressive Web Apps https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

演講視頻的話, YouTube 上幾個大會錄的演講都挺豐富的:
https://www.youtube.com/results?search_query=progressive+web+apps

現在已經有做了不少的 PWA 的 Demo 了, 比如第一個 washingtonpost

Washington Post https://washingtonpost.com/pwa

List of Progressive Web Apps Build status https://github.com/operasoftware/pwa-list

Progressive Web Apps collection https://github.com/ljinkai/pwa-collection

Hacker news demo https://progressive-web-application.herokuapp.com/

manifest.json 前面說了, 加進來挺久了, 主要是為了添加 Splash Screen

根據 manifest.json 可以自動生成一個網頁(主屏幕按鈕打開)的啟動界面
這樣看上去就很像一個 Native App 了, 包含圖片, 文字, 背景

Splashscreen https://developers.google.com/web/updates/2015/10/splashscreen

Add to Homescreen https://developer.chrome.com/multidevice/android/installtohomescreen

我嘗試的時候主要是圖片遇到了問題, 128dp 對應最小要求 192px
我當時圖片太小了結果很久沒顯示出來, 到文檔上才發現
詳細的 manifest.json 內容可以在下面一些界面找到

The W3C App Manifest specification http://html5doctor.com/web-manifest-specification/

Web app manifest https://developer.mozilla.org/en-US/docs/Web/Manifest

Web App Manifest, Living Document http://manifest.sysapps.org/

Manifest Generator http://brucelawson.github.io/manifest/

Web Manifest Validator https://manifest-validator.appspot.com/

Service Worker 可以簡單理解成跑在網絡請求的攔截器
或者當做是 Nginx, 它可以監聽頁面的請求, 判斷返回什么內容
它可以通過 Cache 處理本地的緩存, 也可以用 fetch 抓線上的資源

另外演講視頻還有介紹處理消息推送功能, 類似離線收發消息, 還沒細看.
關于 API 使用需要深入看文檔, 已經有很詳細的介紹了:

[譯]我的第一個 Service Worker http://www.w3ctech.com/topic/1593

Introduction to Service Worker http://www.html5rocks.com/en/tutorials/service-worker/introduction/

The offline cookbook https://jakearchibald.com/2014/offline-cookbook/

Google 提供了一些類庫, 能實現 Express.js 風格的簡化寫法:

sw-precache https://github.com/GoogleChrome/sw-precache/

sw-toolbox https://github.com/GoogleChrome/sw-toolbox

具體的瀏覽器兼容性可以看:

is service worker ready? https://jakearchibald.github.io/isserviceworkerready/

can I use http://caniuse.com/#feat=serviceworkers

關于調試, Google Chrome 試驗版本已經更新了 Application Tab
其中 Service Worker 被放到了顯眼的位置, 不過, 功能多了還是挺復雜的
另外下面這些鏈接會有幫助:

Service Worker Debugging https://www.chromium.org/blink/serviceworker/service-worker-faq

chrome://inspect/#service-workers

chrome://serviceworker-internals

另外了解和嘗試 Demo 的時候我也想到一些跟自己項目比較相關的內容

React Native 對比

很 RN 一樣這套方案能讓網頁應用在效果上更接近原生應用
PWA 主要是處理應用加載部分, 讓應用能離線打開, 啟動過程跟 App 一樣變快
因此原來寄托在 RN 的功能已經能做到了, 離線, App 啟動界面
我正在考慮把我以前某個 Demo 重寫, 看下能有多像 App 的體驗

React 相關的嘗試

從前簡聊優化應用啟動用過本地存儲整個 Store 數據的辦法
普通頁面 App Shell 不錯了, 而 React 應該能做整個頁面放 Service Worker
或者說, Store 放進 Service Worker 里, Virtual DOM 也放進去
那么網頁主線程其實只有 DOM 操作部分的代碼, 可能啟動速度能提升非常大
而且 React 已經有把 DOM Diff 放進 Worker 的嘗試, 還可以延伸下

整個這樣想, 對 React 應用的整體架構改變將會挺大的
而 Angular, Vue 之類的框架應該也會做類似的架構調整

Service Worker 代碼打包問題

文檔里的 Demo 對應的 sw.js 代碼都是的直接用鏈接加載的
我們搭配 CDN 使用當有打包以及 revision 方便的考慮
這就要求打包工具要對 service worker 的語法做良好的支持
Webpack 有看到相關的 PR 提交對應的功能, 其他工具不了解:
https://github.com/webpack/worker-loader/pull/14

項目代碼引用 sw.js 的寫法:

navigator.serviceWorker.register("/sw.js")

sw.js 內部再引入其他代碼的寫法:

importScripts("serviceworker-cache-polyfill.js");

可能的話還需要把 CommonJS ES6 模塊打包進去, 會挺復雜的
以及局部更新, 熱替換之類的開發環境的打包方案改進等等

HTTPS

有點意外, 似乎之前 iOS 有做過強制 HTTPS? 我第一次遇到
Service Worker 運行要求網站是 HTTPS 或者 localhost
這樣的話本地開發, Android 上做 remote debugging 會有些不便
我找的辦法是直接在本地 Nginx 配置不安全的證書來方便開發的:
https://serversforhackers.com/video/self-signed-ssl-certificates-for-development
比較直接的辦法當然是找個有域名的服務器然后用 HTTPS 開發

fraserxu教了我一招, 回頭試試, 可以用 https://ngrok.com/
把本地的端口監聽轉化成一個在線的 HTTPS 地址...

考慮緩存處理上帶來的速度提升, 我對 PWA 整套方案很看好
而且之前的 HTML5 應用緩存來說, PWA 的自由度和體驗都改進了很多
所以會逐漸開始考慮現實往這方面做遷移的思路:

兼容性: 目前主要 Safari 不支持, 而 Chrome 方面已經比較成熟, 國產瀏覽器就...

工具鏈: 調試工具已經不錯, 打包和局部更新還要等待技術支持

緩存方案: API 和語法糖都有了, 雖然代碼比較啰嗦但是抄代碼可以比較快

動態數據方案: 動態的數據怎么抓取和推送, 還不大了解, 不過 Google 有演示過一些

做到這些基本上已經可以對頁面的加載過程做不小的優化了
等待出更多的 Demo 以及大網站公布試驗的數據如何...

未來的更多代碼被放進 Service Worker 之后, 帶來的改變會更大一些
最后貼一張圖片膜拜一下前端的復雜度:

https://twitter.com/sstephenson/status/730039913052176384