Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(client): multiple clients with prompt for update #394

merged 5 commits into from Dec 12, 2022


Copy link

@userquin userquin commented Oct 14, 2022

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

Copy link

netlify bot commented Oct 14, 2022

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

Name Link
🔨 Latest commit 5cd7f2c
🔍 Latest deploy log
😎 Deploy Preview
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Member Author

userquin commented Oct 14, 2022

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

Copy link
Member Author

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

Copy link
Member Author

userquin commented Oct 16, 2022

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.

@userquin userquin marked this pull request as ready for review October 16, 2022 11:41
@userquin userquin requested a review from antfu October 16, 2022 11:42
@antfu antfu merged commit ea1a58b into main Dec 12, 2022
5 checks passed
Copy link

Thank you for the turnaround on this! 😊

@userquin userquin deleted the userquin/fix-reload-prompt-multiple branch March 25, 2023 09:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

updateServiceWorker(true) doesn't reload other open tabs
3 participants