Open
Description
Version
4.2.2
Environment info
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-6440HQ CPU @ 2.60GHz
Binaries:
Node: 10.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.2.2
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.2.2
@vue/cli-plugin-babel: ~4.2.2 => 4.2.2
@vue/cli-plugin-pwa: ~4.2.2 => 4.2.2
@vue/cli-plugin-router: 4.2.2
@vue/cli-plugin-vuex: 4.2.2
@vue/cli-service: ~4.2.2 => 4.2.2
@vue/cli-shared-utils: 4.2.2
@vue/component-compiler-utils: 3.1.1
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
vue: ^2.5.17 => 2.6.11
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.0
vue-router: ^3.0.1 => 3.1.5
vue-style-loader: 4.1.2
vue-template-compiler: ^2.5.17 => 2.6.11
vue-template-es2015-compiler: 1.9.1
vuex: ^3.0.1 => 3.1.2
npmGlobalPackages:
@vue/cli: Not Found
Steps to reproduce
(Only happens in vue-cli v4)
- vue add pwa plugin
- vue.config -> add pwa config as InjectManifest / GenerateSW
- vue-cli-service build
- serve dist folder
service-worker.js
if (workbox) {
// apply precaching. In the built version, the precacheManifest will
// be imported using importScripts (as is workbox itself) and we can
// precache this. This is all we need for precaching
workbox.precaching.precacheAndRoute(self.__precacheManifest)
// Make sure to return a specific response for all navigation requests.
// Since we have a SPA here, this should be index.html always.
// https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode
workbox.routing.registerNavigationRoute('/index.html')
}
// This code listens for the user's confirmation to update the app.
self.addEventListener('message', e => {
if (!e.data) {
return
}
switch (e.data) {
case 'skipWaiting':
self.skipWaiting()
break
default:
// NOOP
break
}
})
What is expected?
Working PWA app
What is actually happening?
Initial request working fine with service-worker registered.If we refresh the browser the page become blank with console error saying Uncaught SyntaxError: Unexpected token '<', Then if we hard refresh the page its working again then normal refresh fallback to above problem.
To serve dist folder im using Web server for chrome plugin with mod rewrite