Vue2 接入 ServiceWorker, 使用 workbox-webpack-plugin

安装依赖：在 Vue 2 项目的根目录下运行以下命令，安装 workbox-webpack-plugin 插件和相关依赖：
bash
```
npm install workbox-webpack-plugin --save-dev
```

修改入口文件 index.html。

示例：

html

<meta
  http-equiv="Cache-Control"
  content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Service-Worker-Allowed" content="./service-worker.js" />

配置 webpack 插件：在 Vue 2 项目的 vue.config.js 文件中，添加 webpack 插件配置，配置并使用 workbox-webpack-plugin。

示例：

javascript

const WorkboxPlugin = require("workbox-webpack-plugin");

module.exports = {
  // ...其他配置
  configureWebpack: {
    plugins: [
      new WorkboxPlugin.GenerateSW({
        swDest: "service-worker.js", // Service Worker 文件名
        clientsClaim: true, // Service Worker 立即接管页面控制权
        skipWaiting: true, // 强制等待 Service Worker 准备就绪后再激活
        maximumFileSizeToCacheInBytes: 13 * 1024 * 1024, // 设置最大缓存文件大小为13MB，根据需要调整大小
      }),
    ],
  },
};

示例：

javascript

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("./service-worker.js")
      .then((registration) => {
        console.log("Service Worker 注册成功：", registration);
      })
      .catch((error) => {
        console.log("Service Worker 注册失败：", error);
      });
  });
}

完成以上步骤后，当您构建 Vue 2 项目时，会生成一个包含 Service Worker 的文件（service-worker.js），并将其注册到浏览器中。Service Worker 将会被安装、激活，并开始运行您在 service-worker.js 文件中定义的逻辑，如预缓存资源、缓存 API 请求等。

请确保您的项目已经使用了通过 HTTPS 来服务您的 web 应用程序，因为 Service Worker 的注册和运行需要在安全上下文中才能正常工作。

Vue2 接入 ServiceWorker, 使用 workbox-webpack-plugin ​

Vue2 接入 ServiceWorker, 使用 workbox-webpack-plugin