在页面线程中，虽然可以直接使用底层 API 来处理 Service Worker 的注册、更新与通信，但在较为复杂的应用场景下（比如，页面中不同窗口注册不同的 Service Worker），我们往往会因为要处理各种情况而逐步陷入复杂、混乱的深渊，并且，在出现运行结果与预期结果不一致时，我们往往不知所措、不知如何进行排查。

正是因为这些原因，Workbox 提供了运行在页面线程中的 workbox-window 模块，通过该模块，我们可以：

• 更便捷、高效地处理 Service Worker 地注册、更新及通信。
• 通过运行时完善的日志输出（比如 Service Worker 生命周期状态改变），可帮助我们快速定位运行错误；亦可通过日志的提示（比如注册 Service Worker 时，指定了错误的 scope），帮助我们避免犯一些常见错误。
• 接下来，我们将一起学习 workbox-window 模块的使用。

# 基本使用

要使用 workbox-window，我们需要通过 npm 来安装相关依赖：

$ npm install --save workbox-window

或使用 yarn：

$ yarn add workbox-window

然后在代码文件中引入相关模块：

import { Workbox } from 'workbox-window/Workbox.mjs';

为了在开发环境中 workbox-window 能够输出日志，我们必须从 workbox-window/Workbox.mjs 中引入 Workbox 模块，并按照以下方式修改 webpack.config.js 文件：

const Terser = require('terser-webpack-plugin');
const { EnvironmentPlugin } = require('webpack');

module.exports = {
  //... 其他配置
  optimization: {
    minimizer: [
      new Terser({
        test: /\.m?js$/
      })
    ]
  },
  plugins: [
    //... 其他插件
    new EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]
};

接下来，我们便可通过以下方式进行 Service Worker 的注册：

if ('serviceWorker' in navigator) {
  const workbox = new Workbox