【发布时间】：2019-10-30 10:07:24
【问题描述】：
我的 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'
}
}
}
【问题讨论】：
-
你有服务人员吗？
-
是的，我用与服务人员有关的文件更新了帖子。
标签： javascript vue.js progressive-web-apps