1、什么是workbox SW
workbox-sw模块提供了一种非常简单的方法来启动和运行Workbox模块，并简化了Workbox模块的加载，也提供了一些简单的帮助方法。
开发者可以通过官方的CDN使用workbox-sw，或者将它与自己服务器上的一组workbox文件一起使用。
2、使用workbox sw 通过cdn
开始使用此模块的最简单方法是通过CDN。 开发者只需将以下内容添加到sw.js：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
添加了这段代码，开发者将在服务工作者中拥有workbox名空间，该命名空间将提供对所有Workbox模块的访问。
当第一次引用这些模块时，workbox-sw将检测到该模块并在使模块可用之前加载该模块。 您可以在DevTools的网络选项卡中看到这种情况。
这些文件将由浏览器缓存，以供将来离线使用。
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、避免异步导入
在整个workbox体系下，第一次加载新模块涉及调用importScripts（）以及相应JavaScript文件的路径（在CDN上托管，或通过本地URL）。 在任何一种情况下，都有一个重要的限制：对importScripts（）的隐式调用只能在service worker的安装处理程序内部或在service worker脚本的同步初始执行期间发生。
为了避免违反此限制，最佳做法是在任何事件处理程序或异步函数之外，使用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，则此代码可能会出现问题：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
//这段代码会导致workbox-strategies.js在一个fetch函数的处理线程中被引用，应该
// 在这个初始化步骤之外，同步地执行。
const cacheFirst = workbox.strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
如果需要编写会违反限制的代码，则可以使用workbox.loadModule（）方法显式触发事件处理程序之外的importScripts（）调用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 这将触发workbox.strategies及其依赖项的importScripts（）
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
// 引用workbox.strategies现在将按预期工作。
const cacheFirst = workbox.strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
或者，开发者可以在事件处理程序之外创建对相关命名空间的引用，然后在以后使用该引用：
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');
// 这将触发workbox.strategies及其依赖项的importScripts（）
const {strategies} = workbox;
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('.png')) {
//使用先前初始化的策略将按预期工作。
const cacheFirst = strategies.cacheFirst();
event.respondWith(cacheFirst.makeRequest({request: event.request}));
}
});
某些版本的Chrome不遵守此限制，并且对importScripts（）的异步调用不会触发预期的失败。 建议开发人员不要依赖这种破坏的行为。 Chrome计划进行更改以开始禁用此用法，使其与其他浏览器的功能一致。
5、强制使用调试或生产构建
所有Workbox模块都带有两个版本，一个包含日志记录和其他类型检查的调试版本，以及一个剥离日志记录和类型检查的生成版本。
默认情况下，workbox-sw将使用localhost上的站点的调试版本，但对于任何其他源，它将使用生成版本。
如果要强制调试或生成版本，请设置debug config选项。
workbox.setConfig({
debug:
});
6、Skip Waiting 和 Clients Claim
一些开发人员希望能够发布新的service worker并让其尽快更新和控制网页，从而跳过默认的service woker的生命周期。
如果确实需要这么做，workbox-sw提供了一些帮助方法来简化：
workbox.skipWaiting();
workbox.clientsClaim();
如果网络应用程序延迟加载具了有唯一版本的资源，例如其网址中的哈希值，则建议避免使用skip waiting。 在延迟加载先前已预先缓存并在service worker激活状态下，更新期间清除URL时，启用它可能会导致失败。
笔者个人订阅号~欢迎小伙伴们关注
微信公众号-感谢关注
若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211
顺便打个广告：如果有想入职中国银联上海技术开发的童鞋，也可以加上面的QQ资讯，笔者可以帮你回答一些相关问题~~
