Javascript Vue PWA-重新加载页面时覆盖manifest.json
我的PWA有问题，如果我手动重新加载页面或使用Javascript Vue PWA-重新加载页面时覆盖manifest.json,javascript,vue.js,progressive-web-apps,Javascript,Vue.js,Progressive Web Apps,我的PWA有问题，如果我手动重新加载页面或使用window.location重定向，则manifest.json将被index.html的内容覆盖。然后，我收到一个错误，提示Manifest:Line:1，column:1，意外令牌。如果我使用Vue路由器更改当前路由，则没有问题。在重新加载页面之前，即 这是通过Vue的PWA插件实现的PWA，该插件使用Google Workbox。我将配置文件设置为默认值。我没有添加任何会使它表现出这种行为的代码，我已经在我的项目中搜索了manifest.js
window.locationmanifest.jsonindex.htmlManifest:Line:1，column:1，意外令牌。{
"name": "appname",
"short_name": "app",
"start_url": "index.html",
"display": "standalone",
"background_color": "#f5f5f5",
"theme_color": "#f5f5f5",
"orientation": "portrait-primary",
"icons": [ ... ]
}
<!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>
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);
})
/* 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)
}
})
}
module.exports = {
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: './public/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);
})
/* 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)
}
})
}
module.exports = {
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: './public/service-worker.js'
}
}
}
我们有同样的问题。你能导航到吗 在我们的例子中，我们在IIS中托管PWA。主要问题是.json文件没有在IIS管理器中创建为vaid MIME类型，因此我们得到了这种行为。按照以下说明操作： 此外，我们还按照本文正确地在IIS下托管pwa：
你有服务人员吗？是的，我用服务人员的文件更新了帖子。