use*_*993 5 vue.js progressive-web-apps
所以我有一个预先存在的 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.
Run Code Online (Sandbox Code Playgroud)
如果我创建自定义 service-worker.js,也会发生这种情况
我如何添加自定义 service-worker.js
1: 在 src 文件夹中创建 service-worker.js
// service-worker.js
console.log('Service Worker Registered!')
Run Code Online (Sandbox Code Playgroud)
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...
}
}
}
Run Code Online (Sandbox Code Playgroud)
如果我使用自定义 service-worker.js 运行 npm build,它仍然不会在我的 dist 文件夹中创建 service-worker.js 并且在上传到服务器时出现相同的错误。该服务器是启用 https 的服务器。我错过了什么或误解了吗?提前致谢。
编辑:如果我在我的 dist 文件夹中手动添加一个 service-worker.js 文件,我也会得到同样的错误
注册ServiceWorker.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)
}
})
}
Run Code Online (Sandbox Code Playgroud)
小智 5
我多次遇到过类似的问题。看起来它是插件方面的东西,特别是当您使用自定义软件名称或自定义软件时。
我可以推荐什么 - 而不是使用插件(使用工作箱)。直接使用workbox。这是一个 3 命令设置。
npm install -g workbox-cli
Run Code Online (Sandbox Code Playgroud)
然后在你的项目中
workbox wizard
Run Code Online (Sandbox Code Playgroud)
回答问题,这将生成一个 workbox.config.js。
然后只需粘贴您从插件中获得的相同代码进行注册和构建过程类型
workbox generateSW workbox-config.js
Run Code Online (Sandbox Code Playgroud)
这对我有用。下面是一个很好的教程,更深入地解释了这个过程
https://medium.com/google-developer-experts/a-5-minute-intro-to-workbox-3-0-156803952b3e
| 归档时间: |
|
| 查看次数: |
3160 次 |
| 最近记录: |