發(fā)展歷史
Google Gears
AppCache
在線后依舊從cache讀取資源
非緩存資源不會(huì)在緩存的頁(yè)面上加載
配置文件改變時(shí)才會(huì)更新緩存
沒(méi)有api去修改配置，觸發(fā)更新
- Service Worker
Service Worker 是一種 Web Worker
意在提供更加靈活的 Cache API
生命周期
install
wating
active
更新機(jī)制
重新加載
24小時(shí)未關(guān)閉自動(dòng)更新
手動(dòng)激活更新，等待舊的Service Worker失效后激活
強(qiáng)制直接更新
API
register
scope （控制多個(gè)標(biāo)簽頁(yè)，跨標(biāo)簽頁(yè)通訊）
update
cache（對(duì)本地緩存的增，查，刪）
生產(chǎn)環(huán)境中健壯的Service Worker
合理的注冊(cè)時(shí)機(jī)（避免瀏覽器首次加載時(shí)的卡頓）
合理的緩存策略（懶加載）
清理、遷移舊緩存
響應(yīng)模式
緩存優(yōu)先，回退到網(wǎng)絡(luò)
網(wǎng)絡(luò)優(yōu)先，回退到緩存（缺點(diǎn)：網(wǎng)絡(luò)很慢時(shí)響應(yīng)很慢）
返回緩存，然后更新緩存
工程實(shí)踐
兼容性（暫不支持safari 和 安卓原生webview）
dev tool（瀏覽器控制臺(tái)中有Service Workers選項(xiàng)）
URL（sw.js要保持URL不變，保持資源以來(lái)的死循環(huán)）
自動(dòng)化構(gòu)建
webpack 插件（資源分為三種，重要，附加，選項(xiàng)）
sw-precache（不支持runtime，不支持cdn）
實(shí)際項(xiàng)目中的更新流程
更新Service Worker
支持增量更新
錯(cuò)誤監(jiān)控（在sw中上報(bào)錯(cuò)誤）
降級(jí)方案
直接銷(xiāo)毀
配置文件化
開(kāi)關(guān)接口（餓了么采用此種方式）
作用
加快加載速度
http上報(bào)
合并同步后臺(tái)數(shù)據(jù)，多個(gè)頁(yè)面公用一個(gè)sw
區(qū)分環(huán)境（開(kāi)發(fā)，測(cè)試，生產(chǎn)）
express/Koa
pwa
你為什么需要SW？
加載速度更快
離線能力
完全的緩存控制能力
漸進(jìn)式增強(qiáng)，無(wú)痛遷移
如今大多數(shù)web 應(yīng)用的開(kāi)發(fā)模式
桌面端：純web的能力已經(jīng)足夠
移動(dòng)端：
hybrid
react native
weex
微信小程序
Progressive Web App（增強(qiáng)性web應(yīng)用，有添加到桌面的能力）
架構(gòu)上的演變
概念- 核心技術(shù)-理念
ajax-xhr-async-first
pwa-sw-offine-first
以上筆記整理自2017年11月深圳FCC線下活動(dòng)騰訊小哥張嘉偉所做的分享，邊聽(tīng)邊整理，難免有錯(cuò)漏的地方，如有發(fā)現(xiàn)歡迎及時(shí)告知修改。
以下是本人的一點(diǎn)粗淺總結(jié)。
個(gè)人總結(jié)
- PWA（ Progressive Web App）
- 定義：
PWA是一套漸進(jìn)增強(qiáng)的web解決方案。用來(lái)提高web離線，交互，推送等能力，獲得與native app匹敵的用戶(hù)體驗(yàn)。與此同時(shí)又能保持web的開(kāi)放性和拓展性。- 具體技術(shù)：
PWA 具體技術(shù)包括 Service worker、 Web App Manifest、 Cache API、 Fetch API、 Push API、 Web Push Protocol、 Notification 等等。
- Service Worker
- 定義：
Service Worker 是一種 Web Worker（Web Worker 是HTML5標(biāo)準(zhǔn)的一部分，這一規(guī)范定義了一套API，它允許一段JavaScript程序運(yùn)行在主線程之外的另外一個(gè)線程中。），是事件驅(qū)動(dòng)的后臺(tái)進(jìn)程。- 作用：
Service Worker 意在提供更加靈活的 Cache API，也就是提高web的離線能力- 歷史發(fā)展：
google Gears=> app Cache => server Worker- 兼容性：
暫不兼容sarafi和安卓原生webview- 生命周期，更新機(jī)制，響應(yīng)模式，API，工程實(shí)踐等參照上文
- 未來(lái)展望
- PWA是一項(xiàng)較新的技術(shù)，可以提供更好的web用戶(hù)體驗(yàn)，有開(kāi)放的web標(biāo)準(zhǔn)和文檔，存在瀏覽器兼容不完美，門(mén)檻較高等缺點(diǎn)。
- PWA代表了一個(gè)技術(shù)方向，最終結(jié)果如何只能讓時(shí)間來(lái)揭曉答案。所以持觀望態(tài)度。如果業(yè)務(wù)中遇到了非常符合的場(chǎng)景，比如只需要在安卓機(jī)器中運(yùn)行，又要求較好的用戶(hù)體驗(yàn)，又不想開(kāi)發(fā)native app的情況下，也可以考慮嘗試一下。
