Migration guide from vue-cli pwa

[719media]

Hello,
Is there any sort of migration guide for people who were previously using vue-cli with https://cli.vuejs.org/core-plugins/pwa.html to use this plugin? In order to avoid service worker problems resulting from production visitors hitting the application with old service-worker code.
It seems that the vue-cli generated the entry at service-worker.js, and this plugin uses sw.js by default, so I am thinking that people with old version of vue-cli generated service-worker will run into problems. I'm a little ignorant of these problems, so I was hoping there might be some migration guide for this.

Thanks

[719media]

It also doesn't look like there's an option to configure the manifest.webmanifest filename (I'd prefer to name if manifest.json) as it's hardcoded in a const. Is there a reason/best practice that this shouldn't be configurable (vue-cli pwa default is manifest.json, and allows for changing the name as well)

[Joaquín Sánchez]

@719media

• the sw name, just try adding filename: 'service-worker.js' on pwa plugin configuration.
• your client should update all assets, maybe some not changed but will depend on the webpack configuration you have
• about the pwa manifest, it is the new standard, maybe you can run a post install hook to change the name on the pwa plugin dependency: maybe I can make it configurable

IIRC vue-cli is using register-service-worker module form Evan, the changes may vary if you're using autoUpdate or prompt strategy on new app.

If you're using autoUpdate with no SSR/SSG, just import virtual:pwa-register and call it on load event and you're done:

// main.js/main.ts
import { registerSW } from 'virtual:pwa-register'
window.addEventListener('load', () => {
  registerSW({ immediate: true })
})

If you are using vue-router you can register the sw on isReady callback: the sw should only be register once, so use load or isReady:

import { registerSW } from 'virtual:pwa-register'

const router = ....

router.isReady().then(() => {
  registerSW({ immediate: true })
})

If you're using prompt strategy, you should add/modify a ReloadPrompt.vue, just check the vue-router example, you have the logic on it, just add it to your App.vue or layout.

[719media]

@userquin
Wow thank you for the detailed response. By way of information, I am using a very "vanilla/standard" install of the vue-cli, where the only configuration I've done is with iconPaths and themeColor. I am currently doing an autoUpdate strategy where I refresh the assets behind the scenes every time the service-worker gets new content.

Yes, vue-cli does use register-service-worker module that Evan made.

I think I should be able to make a very easy transition from your comments, with the exception of the manifest.json filename, as this is something that I think should be configurable. I can do a postinstall hook for sure, but I do think having this name configurable also makes sense (I see many people name it different things).

Thank you!

[Joaquín Sánchez]

@719media you can take a look at this (vanilla with ts, using prompt strategy, just remove the callbacks on virtual pwa module call and the toast/dialog on main.ts): https://github.com/userquin/vite-plugin-pwa-vanillajs

Don't forget to call the registerSW returned by the virtual module