gpt4 book ai didi

javascript - Vue PWA - manifest.json 在页面重新加载时被覆盖

转载 作者:行者123 更新时间:2023-12-04 17:35:53 31 4
gpt4 key购买 nike

我的 PWA 出现问题,如果我手动重新加载页面或使用 window.location 重定向,manifest.json 会被内容覆盖的 index.html。然后我收到一条错误消息:Manifest: Line: 1, column: 1, Unexpected token. 如果我使用 Vue Router 更改当前路由,则没有问题。也就是说,直到您重新加载页面。

它是通过 Vue 的 PWA 插件实现的 PWA,它使用 Google Workbox。我将配置文件设置为默认值。我没有添加任何会使其表现出这种行为的代码,并且我在我的项目中搜索了 manifest.json 的使用,没有一个表明它的内容应该被覆盖。关于如何解决此问题的任何想法?

list .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'
}
}
}

最佳答案

我们遇到了同样的问题。你能导航到https://YOURSERVER/manifest.json吗? ?

在我们的例子中,我们在 IIS 中托管 PWA。主要问题是 .json 文件没有在 IIS 管理器中创建为 vaid MIME 类型,所以我们得到了这种行为。请按照以下说明操作:

https://bytutorial.com/blogs/iis/how-to-allow-loading-and-downloading-json-file-in-iis

我们还按照这篇文章在 IIS 下正确托管 pwa:

https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain

关于javascript - Vue PWA - manifest.json 在页面重新加载时被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56620713/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com