1、什么是workbox SW
workbox-sw模塊提供了一種非常簡單的方法來啟動(dòng)和運(yùn)行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名空間，該命名空間將提供對(duì)所有Workbox模塊的訪問。
當(dāng)?shù)谝淮我眠@些模塊時(shí)，workbox-sw將檢測到該模塊并在使模塊可用之前加載該模塊。 您可以在DevTools的網(wǎng)絡(luò)選項(xiàng)卡中看到這種情況。
這些文件將由瀏覽器緩存，以供將來離線使用。
3、使用本地 Workbox Files
如果不想使用CDN，則可以輕松切換到自己域中托管的Workbox文件。
最簡單的方法是通過workbox-cli的copyLibraries命令或GitHub Release獲取文件，然后通過modulePathPrefix配置選項(xiàng)告訴workbox-sw在哪里找到這些文件。
如果你把文件放在/ third_party / workbox /下，你會(huì)像這樣使用它們：
importScripts('/third_party/workbox/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox/'
});
這樣你就能使用本地的workbox files
4、避免異步導(dǎo)入
在整個(gè)workbox體系下，第一次加載新模塊涉及調(diào)用importScripts（）以及相應(yīng)JavaScript文件的路徑（在CDN上托管，或通過本地URL）。 在任何一種情況下，都有一個(gè)重要的限制：對(duì)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，則此代碼可能會(huì)出現(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')) {
//這段代碼會(huì)導(dǎo)致workbox-strategies.js在一個(gè)fetch函數(shù)的處理線程中被引用，應(yīng)該
// 在這個(gè)初始化步驟之外，同步地執(zhí)行。
const cacheFirst = workbox.strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
如果需要編寫會(huì)違反限制的代碼，則可以使用workbox.loadModule（）方法顯式觸發(fā)事件處理程序之外的importScripts（）調(diào)用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 這將觸發(fā)workbox.strategies及其依賴項(xiàng)的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)建對(duì)相關(guān)命名空間的引用，然后在以后使用該引用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 這將觸發(fā)workbox.strategies及其依賴項(xiàng)的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不遵守此限制，并且對(duì)importScripts（）的異步調(diào)用不會(huì)觸發(fā)預(yù)期的失敗。 建議開發(fā)人員不要依賴這種破壞的行為。 Chrome計(jì)劃進(jìn)行更改以開始禁用此用法，使其與其他瀏覽器的功能一致。
5、強(qiáng)制使用調(diào)試或生產(chǎn)構(gòu)建
所有Workbox模塊都帶有兩個(gè)版本，一個(gè)包含日志記錄和其他類型檢查的調(diào)試版本，以及一個(gè)剝離日志記錄和類型檢查的生成版本。
默認(rèn)情況下，workbox-sw將使用localhost上的站點(diǎn)的調(diào)試版本，但對(duì)于任何其他源，它將使用生成版本。
如果要強(qiáng)制調(diào)試或生成版本，請(qǐng)?jiān)O(shè)置debug config選項(xiàng)。
workbox.setConfig({
debug:
});
6、Skip Waiting 和 Clients Claim
一些開發(fā)人員希望能夠發(fā)布新的service worker并讓其盡快更新和控制網(wǎng)頁，從而跳過默認(rèn)的service woker的生命周期。
如果確實(shí)需要這么做，workbox-sw提供了一些幫助方法來簡化：
workbox.skipWaiting();
workbox.clientsClaim();
如果網(wǎng)絡(luò)應(yīng)用程序延遲加載具了有唯一版本的資源，例如其網(wǎng)址中的哈希值，則建議避免使用skip waiting。 在延遲加載先前已預(yù)先緩存并在service worker激活狀態(tài)下，更新期間清除URL時(shí)，啟用它可能會(huì)導(dǎo)致失敗。
筆者個(gè)人訂閱號(hào)~歡迎小伙伴們關(guān)注
微信公眾號(hào)-感謝關(guān)注
若有疑問可以QQ聯(lián)系筆者，雖然不一定100%解決你的問題，但是可以交流探討一波：2276604211
順便打個(gè)廣告：如果有想入職中國銀聯(lián)上海技術(shù)開發(fā)的童鞋，也可以加上面的QQ資訊，筆者可以幫你回答一些相關(guān)問題~~
