I'm encountering an issue with my Progressive Web App (PWA) where reloading the page manually or redirecting using window.location results in the manifest.json file being overwritten with the contents of index.html. This leads to an error stating
Manifest: Line: 1, column: 1, Unexpected token.The PWA is developed through Vue's PWA plugin which utilizes Google Workbox. I have kept the configuration files at their default settings and haven't added any code that would cause this strange behavior. Scouring through my project for mentions of manifest.json didn't reveal anything suggesting its content should be overwritten. Any suggestions on how to resolve this?
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'
}
}
}