vue.js - 如何在 localhost 中使用 cli-plugin-pwa 和 workbox

Question

我使用 cli-plugin-pwa 遵循了不同的教程，似乎即使在 localhost 中也应该启用服务工作者。但是，当我运行构建我的应用程序时，我不断收到错误消息（'Service Worker 安装失败。它将在下一次导航期间自动重试'）导致未安装 Service Worker。我查看了错误来自的文件，它位于工作箱 precache.mjs precacheController 中：

import {logger} from 'workbox-core/_private/logger.mjs';
import {getOrCreatePrecacheController} from './utils/getOrCreatePrecacheController.mjs';
import {precachePlugins} from './utils/precachePlugins.mjs';
import './_version.mjs';


const installListener = (event) => {
  const precacheController = getOrCreatePrecacheController();
  const plugins = precachePlugins.get();

  event.waitUntil(
      precacheController.install({event, plugins})
          .catch((error) => {
            console.log(process.env.NODE_ENV)
            if (process.env.NODE_ENV !== 'production') {
              logger.error(`Service worker installation failed. It will ` +
              `be retried automatically during the next navigation.`);
            }
            // Re-throw the error to ensure installation fails.
            throw error;
          })
  );
};

所以首先，我想知道是什么产生了这个错误，而且我很惊讶我在 prod env 中满足了 if 条件（我验证了它控制台记录 process.env.NODE_ENV）

关于我在这里缺少什么的任何建议？

我的软件设置：

registerServiceWorker.js

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

服务工作者.js

workbox.core.setCacheNameDetails({ prefix: 'xxx' })
self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

vue.config.js

module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
    }
  }
}

标签： vue.jscachingprogressive-web-appsservice-worker