Question

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

它是通过Vue的PWA插件（使用Google Workbox）进行的PWA。我已将配置文件设置为其默认值。我没有添加任何代码来使其表现出这种行为，并且我在我的项目中搜索了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'
        }
    }
}

Answer 1

我们遇到了同样的问题。您可以导航到https://YOURSERVER/manifest.json吗？

在我们的案例中，我们将PWA托管在IIS中。主要问题是在IIS管理器中没有将.json文件创建为有效的MIME类型，因此我们正在获得这种行为。请遵循以下指示：

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

我们也按照这篇文章正确地将pwa托管在IIS下：

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

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

1 个答案: