背景:項(xiàng)目入口執(zhí)行了 registerServiceWorker()。目的是為了實(shí)現(xiàn) app 的離線緩存凭峡。
service worker?是獨(dú)立于主線程的 js 線程拙已。
可用于:(1)推送消息、(2)后臺(tái)同步摧冀、(3)攔截和處理網(wǎng)絡(luò)請(qǐng)求倍踪。本文只針對(duì)(3)。
先決條件:只在 https 環(huán)境中運(yùn)行索昂,防止有人劫持鏈接惭适。
使用:參考文檔
(1)注冊(cè) SW:
(2)安裝:在安裝成功后的回調(diào)中決定需要緩存哪些文件;再接收 fetch 請(qǐng)求時(shí)楼镐,返回在緩存中匹配中的資源癞志。
(3)更新 SW:a、更新 SW js 文件框产,下載完成后則視為新的 SW凄杯;b、新的 SW 將會(huì)啟動(dòng)秉宿,觸發(fā) install 事件戒突;c、此時(shí)描睦,舊的 SW 仍控制著頁面膊存,新的 SW 進(jìn)入 waiting 狀態(tài);d忱叭、當(dāng)前頁面關(guān)閉時(shí)隔崎,舊的 SW 將會(huì)關(guān)閉,新的 SW 將會(huì)取得頁面的控制權(quán)韵丑;e爵卒、新的 SW 取得頁面控制權(quán)后,會(huì)觸發(fā) activate 事件撵彻。
Attention:clients.claim() 可讓 SW 控制頁面钓株;skipWaiting 盡快將新工作線程激活实牡。兩者同時(shí)配置來實(shí)現(xiàn)瀏覽器同步服務(wù)端更新。
webpack? 配置:通過? workbox-webpack-plugin?來初始化 SW 的 js 文件轴合。