Question

所以我有一个预先存在的Vue应用程序，想添加PWA。我安装了@vue/cli-plugin-pwa，并在首次构建后自动创建了registerServiceWorker.js（在src中）和manifest.json（在公共中），并且似乎工作正常。但是据我了解，在我运行npm run build之后，它还应该在dist文件夹中生成services-worker.js。如果我将构建文件上传到服务器，我将得到

A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
Error during service worker registration: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

如果我创建一个自定义service-worker.js，也会发生这种情况

我如何添加自定义service-worker.js

1：在src文件夹中创建了service-worker.js

// service-worker.js
console.log('Service Worker Registered!')

2：在〜/

中创建了vue.config.js

// vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: './src/service-worker.js',
      // ...other Workbox options...
    }
  }
}

如果我使用自定义service-worker.js运行npm build，它仍然不会在我的dist文件夹中创建service-worker.js，并且在上载到服务器时会出现相同的错误。该服务器是启用了https的服务器。我错过了什么还是误会了？提前致谢。

编辑：如果我在dist文件夹中手动添加service-worker.js文件，也会遇到相同的错误

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)
    }
  })
}

Answer 1

我有很多非常相似的问题。看起来像是插件方面的东西，尤其是当您完全使用自定义sw名称或自定义sw时。

我能推荐的-而不是使用插件（正在使用工作箱）。直接使用工作箱。这是3命令设置。

npm install -g workbox-cli

然后在您的项目中

workbox wizard

回答问题，这将生成一个workbox.config.js。

然后只需粘贴您从插件中获得的相同代码以进行注册和构建过程类型

workbox generateSW workbox-config.js

这对我有用。下面是一个不错的教程，更深入地解释了此过程

https://medium.com/google-developer-experts/a-5-minute-intro-to-workbox-3-0-156803952b3e

Answer 2

确保你已经在 main.js 中导入了 registerServiceWorker.js 文件：

import "./registerServiceWorker";

@ vue / cli-plugin-pwa没有创建service-worker.js

2 个答案: