VueJS PWA: service worker nog working. Maybe due to .htaccess file? - apache

Question

I've build a PWA with vue. Everything is working fine in development and when I deploy to chrome webserver. Service worker is registrated and running. So far so good.
When I deploy to production, service worker isn't running due to the fact that the scope or start_url is not matching manifest.json (thats what google dev tools tells me).
I believe it's due to the fact that I'm running vue-router in history mode and have a .htaccess file running on production to rewrite rules as recommended here.
I've also tested this to switch back to hash mode in vue-router and deploy to production again. Then service worker is working just fine.
To overcome this problem I've tried to set the scope in manifest.json and service worker to index.html:
register(`${process.env.BASE_URL}service-worker.js`, {
registrationOptions: { scope: 'index.html' },
ready () {
console.log(
'App is being served from cache by a service worker.\n'
)
}
})
The same for manifest.json:
{
"name": "myapp",
"short_name": "myapp",
"theme_color": "#4DBA87",
"icons": [
{ "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "./img/icons/android-chrome-maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "./img/icons/android-chrome-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"start_url": "index.html",
"scope": "index.html",
"orientation": "portrait",
"display": "standalone",
"background_color": "#000000"
}
But still chrome gives me the message about scope being not in sync.
Any thoughts on this?

Answer 1

Add to package.json config for pwa plugin:
"vue": {
"pwa": {
"workboxOptions": {
"exclude": [
".htaccess"
]
}
}
}
UPDATE:
This action excludes .htaccess file from SW cache.
So, your SW won't crash and won't attempt to download .htaccess file from server.
At least, I faced with same problem and found this StackOverflow topic without answer. So, I read Vue PWA doc and found this, working for me, way.