工作区-sw

workbox-sw 模块提供了一种非常简单的启动和运行方式 与 Workbox 模块结合使用，简化了 Workbox 模块的加载； 提供了一些简单的辅助方法。

您可以通过我们的 CDN 使用 workbox-sw，也可以将其与一组工作箱文件搭配使用 您自己的服务器上

通过 CDN 使用 Workbox 软件

要开始使用此模块，最简单的方法就是通过 CDN。您只需要 将以下内容添加到您的 Service Worker：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

这样，您的 Service Worker 中就会有 workbox 命名空间， 提供对所有 Workbox 模块的访问权限。

workbox.precaching.*
workbox.routing.*
etc

当您开始使用其他模块时，会发生一些奇迹。

当您首次引用某个模块时，workbox-sw 会检测到这种情况 并在提供模块之前加载该模块您可以看到 打开开发者工具中的“Network”标签页

在开发者工具中加载 Workbox 库

这些文件将由您的浏览器缓存，以供日后使用 离线使用。

使用本地 Workbox 文件代替 CDN

如果您不想使用 CDN，也可以轻松切换到 Workbox 文件 托管在您自己的网域上

最简单的方法是通过 workbox-cli 的 copyLibraries 命令获取文件，然后告知 workbox-sw 通过 modulePathPrefix 配置选项查找这些文件的位置。

如果您将这些文件放在 /third_party/workbox-vX.Y.Z/ 下，则可以按如下方式使用它们：

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

避免异步导入

在后台，首次加载新模块涉及调用 importScripts() 替换为指向相应 JavaScript 文件（托管在 CDN 上或通过本地网址托管）的路径。 无论是哪种情况，都存在一个重要的限制：对 importScripts() 的隐式调用只能 发生在 Service Worker 的 install 处理程序内或 Service Worker 脚本的初始执行。

为避免违反此限制，最佳做法是参考 workbox.* 命名空间（在任何事件处理脚本或异步函数之外）。

例如，使用下列顶级 Service Worker 代码即可：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

但是，如果您没有在应用的其他位置引用 workbox.strategies，则以下代码可能存在问题 Service Worker：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

如果您需要编写违反此限制的代码，可以 使用importScripts() workbox.loadModule() 方法：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

或者，您也可以在事件处理脚本外部创建对相关命名空间的引用， 并在稍后使用该引用：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

强制使用调试版或正式版 build

所有 Workbox 模块都附带两个 build，一个是调试 build， 包含日志记录和其他类型检查，以及一个正式版 build， 并剥离日志记录和类型检查

默认情况下，workbox-sw 将对 localhost 上的网站使用调试 build。 但对于任何其他源站，则使用正式版 build。

如果要强制使用调试 build 或正式版 build，可以设置 debug 配置 选项：

workbox.setConfig({
  debug: true,
});

使用 import 语句将代码转换为使用 workbox-sw

使用 workbox-sw 加载 Workbox 时，通过以下方式访问所有 Workbox 软件包： 全局 workbox.* 命名空间。

如果您想转换使用 import 语句的代码示例 要使用 workbox-sw，您只需加载 workbox-sw 并将所有 import 语句替换为引用 这些模块位于全局命名空间中

之所以行得通，是因为发布到 npm 的每个 Workbox Service Worker 软件包也都 全局 workbox 命名空间中，通过 名称的 camelCase 版本（例如 从 workbox-precaching npm 软件包导出的所有模块都可以在以下位置找到： workbox.precaching.*。从 workbox-background-sync npm 软件包可在以下位置找到： workbox.backgroundSync.*）。

例如，以下代码使用 import 语句引用 工作箱模块：

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

以下是使用 workbox-sw 重写的相同代码（请注意，只有 import 语句已更改 — 未涉及逻辑）：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);