我在使用PWA时遇到一个问题。如果我手动刷新页面或使用
window.location进行重定向，则manifest.json会被覆盖为index.html的内容。然后我会收到一个错误消息，其中包含Manifest: Line:1, column: 1, Unexpected token.如果我使用Vue Router来更改当前路由，则没有任何问题。直到你重新加载页面。
这是通过Vue的PWA插件开发的PWA，它使用Google Workbox。我已将配置文件设置为默认值。我没有添加任何代码来导致它表现出这种行为，并且我已经搜索了我的项目以查找对manifest.json的使用，但没有任何暗示其内容应被覆盖的使用情况。有什么想法如何解决这个问题吗？
manifest.json
{
"name": "appname",
"short_name": "app",
"start_url": "index.html",
"display": "standalone",
"background_color": "#f5f5f5",
"theme_color": "#f5f5f5",
"orientation": "portrait-primary",
"icons": [ ... ]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>app</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="./icons/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#333">
<meta name="theme-color" content="#333">
</head>
<body>
<noscript>To run this application, JavaScript is required to be enabled.</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
service-worker.js
self.addEventListener('install', evt => {
console.log('Service worker has been installed');
})
self.addEventListener('activate', evt => {
console.log('Service worker has been activated')
})
self.addEventListener('fetch', evt => {
console.log('Fetch Event', evt);
})
registerServiceWorker.js
/* eslint-disable no-console */
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)
}
})
}
vue-config.js
module.exports = {
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: './public/service-worker.js'
}
}
}