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资讯，笔者可以帮你回答一些相关问题~~

【前-workbox-模块1】workbox