CODEWITHSUNDEEP
javascriptvue.jsprogressive-web-apps
HeadAdmiral
HeadAdmiral

Reputation: 111

Vue PWA - manifest.json overwritten on page reload

I'm having an issue with my PWA where if I manually reload the page or redirect with window.location, the manifest.json is being overwritten with the contents of index.html. I then get an error saying Manifest: Line: 1, column: 1, Unexpected token. If I use the Vue Router to change the current route, there is no problem. Until you reload the page, that is.

It's PWA through Vue's PWA plugin, which uses Google Workbox. I have the config files set to their defaults. I did not add any code which would have made it exhibit this behavior, and I've searched my project for usage of manifest.json, none of which suggest it's contents should be overwritten. Any ideas on how to fix 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'
        }
    }
}

Upvotes: 3

Views: 2012

Answers (1)

Jack Casas
Jack Casas

Reputation: 994

We had this same issue. Can you navigate to https://YOURSERVER/manifest.json ?

In our case, we were hosting the PWA in IIS. The main issue was that .json files were not created as a vaid MIME Type in the IIS manager, so we were getting this behaviour. Follow this instructions:

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

Also we followed this post to correctly host the pwa under IIS:

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

Upvotes: 1

Related Questions