updateServiceWorker always reload the page

[wighawag]

Currently in the code

• vite-plugin-pwa/src/client/build/register.ts

  Line 62 in 2de47c4

  window.location.reload()

• vite-plugin-pwa/src/client/build/register.ts

  Line 87 in 2de47c4

  window.location.reload()

• vite-plugin-pwa/src/client/build/register.ts

  Line 102 in 2de47c4

  window.location.reload()

once the service worker is installed, after calling updateServiceWorker the page reload

This is unfortunate as the flow I want for my user is as follow

once a new service worker is detected, I want it installed as soon as possible. Then I ask the user if they want to reload the page to get the new version. If they close, they can continue, but if they reload manually later, I want them to have the new version

updateServiceWorker automatic reload prevent me to do that and so when a user reload they keep getting the message to update until they click "reload". which is not what I want

An option to not reload automatically would be great

[piotr-cz]

Check out the examples folder, such as https://github.com/vite-pwa/vite-plugin-pwa/blob/v0.21.0/examples/preact-router/src/ReloadPrompt.tsx

[wighawag]

That demo still do not let me install the service worker unless the click accept which reload the page
I would like the service worker to be installed without reloading the page, and then I ll ask the user if they want to reload to get the newly installed version

See my comment:

once a new service worker is detected, I want it installed as soon as possible. Then I ask the user if they want to reload the page to get the new version. If they close, they can continue, but if they reload manually later, I want them to have the new version

I can achieve that if register.ts did not force the reload.

[piotr-cz]

I'd say that it's doing exactly what you'd it like to do

You can write your own patched registerSW function based on on https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts and use it instead

[wighawag]

I'd say that it's doing exactly what you'd it like to do

Well, no, as mentioned the demo force you to reload when you accept the changes,

pnpm start
# navigate to localhost => it says offline ready
# ctrl+c 
# tweak the sw (add a console.log line)
pnpm start
# navigate to localhost => it ask to reload
# if you reload or click continue, the message still appears
# if you click reload, it reload and then no message appears

What I want is the following:

pnpm start
# navigate to localhost => it says offline ready
# ctrl+c 
# tweak the sw (add a console.log line)
pnpm start
# navigate to localhost => it ask to reload or continue (but it would let you know the new version is ready)
# if you reload or click continue, the message would NOT appear anymore
# if you click reload, it reload 

You can write your own patched registerSW function based on on https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts and use it instead

do you mean I should patch the npm package ? or is there a way to override the regiser function so that it do not force reload upon accepting the new sw version ?

[piotr-cz]

By patching I mean:

1. Copy https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/register.ts into your source dir
2. Replace

   - import type { RegisterSWOptions } from '../type'
   + import { RegisterSWOptions } from 'virtual:pwa-register 

3. Tweak it your way
4. Use it:

   import { registerSW } from '../<location in source dir>/register.ts'

Or even better:
Prepare pull request where it would be possible to pass a callback either as RegisterSWOptions or additional parameter to updateServiceWorker(), with default value of window.location.reload()

This could potentially fix #498