fix(client): multiple clients with prompt for update

[userquin]

I have tested this PR using pnpm run build && pnpm run examples using vue example with 2 chrome instances, first one with 2 tabs. Once I refresh one app, the reload prompt will be shown on other tab/instance and once reload the app, the 3 clients are updated (the prompt dialog also gone on the 3 clients).

EDIT: once installed on the 3 clients, stop the server and run pnpm run examples again with the same configuration and refresh the page on 1 client.

We need to test it on Firefox and Safari on others OS: only tested on Windows 10 PRO.

/cc @develohpanda

closes #393

[netlify]

✅ Deploy Preview for vite-plugin-pwa-legacy ready!

Name	Link
🔨 Latest commit	5cd7f2c
🔍 Latest deploy log	https://app.netlify.com/sites/vite-plugin-pwa-legacy/deploys/636918fe43aba70007e7e39d
😎 Deploy Preview	https://deploy-preview-394--vite-plugin-pwa-legacy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[userquin]

There is a strange behavior when testing multiple clients restarting the server once sw is rebuilt, depending on the client that fires the first installation and the client used to reload the app, the original that fires the first installation (or last one once refreshed) is showing the ready to work offline prompt, it seems we need to deal with some internal flag.

Steps to reproduce (with any fw):

• run pnpm run examples from root folder and choose any fw (except sveltekit), then use default options
• open chrome instance 1 with 2 tabs and open the app in the first one tab to be the first one (close the ready to work offline dialog), then open app also on tab 2
• open chrome instance 2 with only 1 tab and open the app
• stop server and run again pnpm run examples with same options in 1
• go to chrome instance 2 and refresh page: you will see the prompt on the 3 clients; then, just reload the app in this client; all clients should be reloaded except tab 1 on chrome instance 1, that should have the Ready to work offline dialog but not yet refreshed (check the dates)

Depending on the fw used, instead the ready to work prompt you can get the reload prompt dialog: for example, vue will show the prompt while solid will show the ready prompt dialog. Maybe it depends on some other state/flag... it is weird

[userquin]

it seems to be related with the heuristic algorithm used in workbox-window: I'll try to test it awaiting 1 minute between updates

[userquin]

After digging into the workbox window source code I've fixed the problem: we can also remove all warnings about heuristic algorithm from the docs

workbox-window tries to solve the problem when the app is opened in multiple clients changing some internal listeners for updatefound event from the sw.
When the sw that fires the update is not the current one, some params on the event fired on installed event will change, for example, isUpdate will be undefined /false (falsy value) and isExternal will be true (on the client that fires the update and the original that fires first installation, isUpdate will be true and isExternal will be false).
We only need to change the installed listener to check if !evt.isUpdate && evt.isExternal, this way any prompt will not be shown and we just reload the window.
If it is evt.isUpdate then we just reload the page only when using autoUpdate and finally if the sw is not selftDestroying we show the ready to work offline prompt.

EDIT: I'll review all docs entries about heuristic algorithm and remove the component.

[develohpanda]

Thank you for the turnaround on this! 😊