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

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

視頻里給的優(yōu)化方案大概分成幾個步驟(細(xì)節(jié)還要看視頻確認(rèn)):

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

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

服務(wù)端渲染, 用 App Shell 帶來效果, 然后動態(tài)加載

啟動過程 JavaScript 代碼的性能優(yōu)化

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

簡稱 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 年六月份的文章, 第一次有了這個提法, 針對這類應(yīng)用
網(wǎng)頁應(yīng)用在這樣的場景下和移動應(yīng)用很相似了, 可以從主屏打開
而且, 能快速地加載, 可以跑后臺進(jìn)程, 加密的連接, 離線使用等等

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 發(fā)了文章, 大致上已經(jīng)是前面演講的內(nèi)容了
首先是渲染 App Shell 也就是頁面的框架, 給用戶更好的加載體驗(yàn)
而且可以通過 Service Worker 來做 App Shell 渲染, 去掉網(wǎng)絡(luò)請求的時間
然后再動態(tài)地請求更多內(nèi)容, 填充數(shù)據(jù). 整體上看的加載速度會變快

2015 年底還有個 Google Developer Summit, 我以前都沒注意到
據(jù)說大會上 PWA 已經(jīng)名聲很大了, 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

現(xiàn)在已經(jīng)有做了不少的 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 前面說了, 加進(jìn)來挺久了, 主要是為了添加 Splash Screen

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

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

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

我嘗試的時候主要是圖片遇到了問題, 128dp 對應(yīng)最小要求 192px
我當(dāng)時圖片太小了結(jié)果很久沒顯示出來, 到文檔上才發(fā)現(xiàn)
詳細(xì)的 manifest.json 內(nèi)容可以在下面一些界面找到

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 可以簡單理解成跑在網(wǎng)絡(luò)請求的攔截器
或者當(dāng)做是 Nginx, 它可以監(jiān)聽頁面的請求, 判斷返回什么內(nèi)容
它可以通過 Cache 處理本地的緩存, 也可以用 fetch 抓線上的資源

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

[譯]我的第一個 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 提供了一些類庫, 能實(shí)現(xiàn) Express.js 風(fēng)格的簡化寫法:

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

關(guān)于調(diào)試, Google Chrome 試驗(yàn)版本已經(jīng)更新了 Application Tab
其中 Service Worker 被放到了顯眼的位置, 不過, 功能多了還是挺復(fù)雜的
另外下面這些鏈接會有幫助:

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

chrome://inspect/#service-workers

chrome://serviceworker-internals

另外了解和嘗試 Demo 的時候我也想到一些跟自己項(xiàng)目比較相關(guān)的內(nèi)容

React Native 對比

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

React 相關(guān)的嘗試

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

整個這樣想, 對 React 應(yīng)用的整體架構(gòu)改變將會挺大的
而 Angular, Vue 之類的框架應(yīng)該也會做類似的架構(gòu)調(diào)整

Service Worker 代碼打包問題

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

項(xiàng)目代碼引用 sw.js 的寫法:

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

sw.js 內(nèi)部再引入其他代碼的寫法:

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

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

HTTPS

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

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

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

兼容性: 目前主要 Safari 不支持, 而 Chrome 方面已經(jīng)比較成熟, 國產(chǎn)瀏覽器就...

工具鏈: 調(diào)試工具已經(jīng)不錯, 打包和局部更新還要等待技術(shù)支持

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

動態(tài)數(shù)據(jù)方案: 動態(tài)的數(shù)據(jù)怎么抓取和推送, 還不大了解, 不過 Google 有演示過一些

做到這些基本上已經(jīng)可以對頁面的加載過程做不小的優(yōu)化了
等待出更多的 Demo 以及大網(wǎng)站公布試驗(yàn)的數(shù)據(jù)如何...

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

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