1、什么是workbox SW
workbox-sw模塊提供了一種非常簡單的方法來啟動和運行Workbox模塊怎囚，并簡化了Workbox模塊的加載卿叽，也提供了一些簡單的幫助方法。
開發(fā)者可以通過官方的CDN使用workbox-sw恳守，或者將它與自己服務(wù)器上的一組workbox文件一起使用痹扇。
2玻蝌、使用workbox sw 通過cdn
開始使用此模塊的最簡單方法是通過CDN。 開發(fā)者只需將以下內(nèi)容添加到sw.js：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
添加了這段代碼，開發(fā)者將在服務(wù)工作者中擁有workbox名空間伐憾，該命名空間將提供對所有Workbox模塊的訪問。
當(dāng)?shù)谝淮我眠@些模塊時，workbox-sw將檢測到該模塊并在使模塊可用之前加載該模塊。 您可以在DevTools的網(wǎng)絡(luò)選項卡中看到這種情況策精。
這些文件將由瀏覽器緩存，以供將來離線使用崇棠。
3咽袜、使用本地 Workbox Files
如果不想使用CDN，則可以輕松切換到自己域中托管的Workbox文件枕稀。
最簡單的方法是通過workbox-cli的copyLibraries命令或GitHub Release獲取文件询刹，然后通過modulePathPrefix配置選項告訴workbox-sw在哪里找到這些文件。
如果你把文件放在/ third_party / workbox /下萎坷，你會像這樣使用它們：
importScripts('/third_party/workbox/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox/'
});
這樣你就能使用本地的workbox files
4凹联、避免異步導(dǎo)入
在整個workbox體系下，第一次加載新模塊涉及調(diào)用importScripts（）以及相應(yīng)JavaScript文件的路徑（在CDN上托管食铐，或通過本地URL）匕垫。 在任何一種情況下，都有一個重要的限制：對importScripts（）的隱式調(diào)用只能在service worker的安裝處理程序內(nèi)部或在service worker腳本的同步初始執(zhí)行期間發(fā)生虐呻。
為了避免違反此限制象泵，最佳做法是在任何事件處理程序或異步函數(shù)之外，使用workbox.*的引用方式來控制命名空間斟叼。
例如偶惠，以下sw.js的代碼就符合要求：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// This will work!
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst()
);
但是，如果沒有在sw.js的其他位置引用workbox.strategies朗涩，則此代碼可能會出現(xiàn)問題：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
//這段代碼會導(dǎo)致workbox-strategies.js在一個fetch函數(shù)的處理線程中被引用忽孽，應(yīng)該
// 在這個初始化步驟之外，同步地執(zhí)行谢床。
const cacheFirst = workbox.strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
如果需要編寫會違反限制的代碼兄一，則可以使用workbox.loadModule（）方法顯式觸發(fā)事件處理程序之外的importScripts（）調(diào)用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 這將觸發(fā)workbox.strategies及其依賴項的importScripts（）
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
// 引用workbox.strategies現(xiàn)在將按預(yù)期工作。
const cacheFirst = workbox.strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
或者识腿，開發(fā)者可以在事件處理程序之外創(chuàng)建對相關(guān)命名空間的引用出革，然后在以后使用該引用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 這將觸發(fā)workbox.strategies及其依賴項的importScripts（）
const {strategies} = workbox;
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
//使用先前初始化的策略將按預(yù)期工作。
const cacheFirst = strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
某些版本的Chrome不遵守此限制渡讼，并且對importScripts（）的異步調(diào)用不會觸發(fā)預(yù)期的失敗骂束。 建議開發(fā)人員不要依賴這種破壞的行為。 Chrome計劃進行更改以開始禁用此用法成箫，使其與其他瀏覽器的功能一致展箱。
5、強制使用調(diào)試或生產(chǎn)構(gòu)建
所有Workbox模塊都帶有兩個版本蹬昌，一個包含日志記錄和其他類型檢查的調(diào)試版本混驰，以及一個剝離日志記錄和類型檢查的生成版本。
默認(rèn)情況下，workbox-sw將使用localhost上的站點的調(diào)試版本账胧，但對于任何其他源竞慢，它將使用生成版本先紫。
如果要強制調(diào)試或生成版本治泥，請設(shè)置debug config選項。
workbox.setConfig({
debug:
});
6遮精、Skip Waiting 和 Clients Claim
一些開發(fā)人員希望能夠發(fā)布新的service worker并讓其盡快更新和控制網(wǎng)頁居夹，從而跳過默認(rèn)的service woker的生命周期。
如果確實需要這么做本冲，workbox-sw提供了一些幫助方法來簡化：
workbox.skipWaiting();
workbox.clientsClaim();
如果網(wǎng)絡(luò)應(yīng)用程序延遲加載具了有唯一版本的資源准脂，例如其網(wǎng)址中的哈希值，則建議避免使用skip waiting檬洞。 在延遲加載先前已預(yù)先緩存并在service worker激活狀態(tài)下狸膏，更新期間清除URL時，啟用它可能會導(dǎo)致失敗添怔。
筆者個人訂閱號~歡迎小伙伴們關(guān)注
微信公眾號-感謝關(guān)注
若有疑問可以QQ聯(lián)系筆者湾戳，雖然不一定100%解決你的問題，但是可以交流探討一波：2276604211
順便打個廣告：如果有想入職中國銀聯(lián)上海技術(shù)開發(fā)的童鞋广料，也可以加上面的QQ資訊砾脑，筆者可以幫你回答一些相關(guān)問題~~
