Vue PWA - manifest.json перезаписывается при перезагрузке страницы - PullRequest
Новая
       8

Vue PWA - manifest.json перезаписывается при перезагрузке страницы

0 голосов
/ 16 июня 2019

У меня проблема с моим PWA, когда, если я вручную перезагружаю страницу или перенаправляю с помощью window.location, manifest.json перезаписывается содержимым index.html. Затем я получаю сообщение об ошибке «1004 *». Если я использую Vue Router для изменения текущего маршрута, проблем нет. Пока вы не перезагрузите страницу, то есть.

Это PWA через плагин Vue 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>

сервис-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)
    }
  })
}

вя-config.js 

module.exports = {
    pwa: {
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            swSrc: './public/service-worker.js'
        }
    }
}
...