Change registerType from 'prompt' to 'autoUpdate'

[ArnauKokoro]

Everything was working perfect with registerType 'prompt' and registerSW({onNeedToRefresh}) callback, but I needed to change it to 'autoUpdate' and registerSW({ immediate: true }).

What I expect is auto refreshing when the new version with registerType 'autoUpdate' is on production. But instead the web is unsuable until manually refreshing.

Why is this happening? What can I do to force update to new version with registerType 'autoUpdate'?

Thanks!

[userquin]

On next browser session or after hard refresh. Old client still being used, once installed new version, on next new version auto updated should be there. Maybe also some service worker problem since the client and the sw are not in sync.

Switching between strategies is a pain.

EDIT: you can keep onNeedToRefresh hook, it shouldn't be called anymore.

[ArnauKokoro]

Is there a way to force this new version to be updated on next browser session?

Thanks!

[userquin]

what do you mean? The new version not installed? (The new version should be installed, and the prompt should be shown, the new sw should be activated)

[ArnauKokoro]

So, next session after new version is in production as old client is still on the browser prompt should be shown, isn't is?

[userquin]

Yes, the application is always at least one version behind the most recent one (the new one to be installed). In your case, the prompt should be shown.

You should verify that change on your local machine before putting the new behavior into production whenever possible.

[ArnauKokoro]

Thanks!

[ArnauKokoro]

I have been testing registerType options, and this is what I found:

What is happening:

• prompt -> autoUpdate (ERROR): Having prompt on current version I upload to production a new version with autoUpdate option, so, next time the web loads, it brokes giving not found error when trying to load vue pages (seems that is trying to load old pages-hash).
• autoUpdate -> prompt: Having autoUpdate on current version I upload to production a new version with prompt option, so, next time the web loads, it loads old content, but then next time it loads the new content.

What is expected: When having prompt I can execute a force update when the user clicks a button on the prompt popup. But what I expected having autoUpdate is that the same happens with no click needed.

Workaround: To force update with no click needed I will execute the update after the web is loaded, but I will get flikering.

Is any option to achieve that with no flickering? Because I need an immediate update when a new version is uploaded in production.

Thanks!

[userquin]

You can try unregistering current sw and adding a new one, check https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html#custom-selfdestroying-service-worker

I Will try to check it on my local... maybe you have wrong cache headers, check https://vite-pwa-org.netlify.app/deployment/

[ArnauKokoro]

You are right, I have Cache-control: max-age=86000. I will add no-cache.

If I want to disable caching to force the browser always to download webpage from CDN (as it was a webpage with no cache config), it is enough adding selftDestroying option to VitePWA config?

Thanks!

[userquin]

do you mean disabling PWA? if so yes, just add selfDestroying: true to your pwa configuration and deploy the app again (you can test it in your local, the sw should be removed, caches removed and all clients pages reloaded).

[ArnauKokoro]

Yes, thanks! Maybe we disable PWA for a while because right now it is not extremely needed and then on the future we enable it again with autoUpdate.

Will it be a good option?

Thanks!