發(fā)展歷史
Google Gears
AppCache
在線后依舊從cache讀取資源
非緩存資源不會(huì)在緩存的頁面上加載
配置文件改變時(shí)才會(huì)更新緩存
沒有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)簽頁，跨標(biāo)簽頁通訊）
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不變，保持資源以來的死循環(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í)方案
直接銷毀
配置文件化
開關(guān)接口（餓了么采用此種方式）
作用
加快加載速度
http上報(bào)
合并同步后臺(tái)數(shù)據(jù)脸侥，多個(gè)頁面公用一個(gè)sw
區(qū)分環(huán)境（開發(fā)，測(cè)試盈厘，生產(chǎn)）
express/Koa
pwa
你為什么需要SW睁枕？
加載速度更快
離線能力
完全的緩存控制能力
漸進(jìn)式增強(qiáng)，無痛遷移
如今大多數(shù)web 應(yīng)用的開發(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)騰訊小哥張嘉偉所做的分享外遇，邊聽邊整理注簿，難免有錯(cuò)漏的地方，如有發(fā)現(xiàn)歡迎及時(shí)告知修改跳仿。
以下是本人的一點(diǎn)粗淺總結(jié)诡渴。
個(gè)人總結(jié)
- PWA（ Progressive Web App）
- 定義：
PWA是一套漸進(jìn)增強(qiáng)的web解決方案。用來提高web離線塔嬉，交互，推送等能力租悄，獲得與native app匹敵的用戶體驗(yàn)谨究。與此同時(shí)又能保持web的開放性和拓展性。- 具體技術(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í)踐等參照上文
- 未來展望
- PWA是一項(xiàng)較新的技術(shù)，可以提供更好的web用戶體驗(yàn)荔泳，有開放的web標(biāo)準(zhǔn)和文檔蕉饼，存在瀏覽器兼容不完美，門檻較高等缺點(diǎn)玛歌。
- PWA代表了一個(gè)技術(shù)方向椎椰，最終結(jié)果如何只能讓時(shí)間來揭曉答案。所以持觀望態(tài)度沾鳄。如果業(yè)務(wù)中遇到了非常符合的場(chǎng)景慨飘，比如只需要在安卓機(jī)器中運(yùn)行，又要求較好的用戶體驗(yàn)，又不想開發(fā)native app的情況下瓤的，也可以考慮嘗試一下休弃。
