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

onLoadNewServiceWorkerAccept triggers nothing, when one tab was already refreshed #148

Open
Geril opened this issue Mar 18, 2022 · 1 comment
Labels
bug Something isn't working enhancement New feature or request help wanted Extra attention is needed javascript Pull requests that update Javascript code TypeScript TypeScript knowledge needed

Comments

@Geril
Copy link

Geril commented Mar 18, 2022

First of all thanks for an excellent piece of work and such a time-saving package to deal with the whole PWA update situation 🎉 .

I am using this library at one of my applications and I am running into the scenario explained below:

  • when the user has multiple tabs open
    • and onLoadNewServiceWorkerAccept is triggered at one of them
  • it reloads that given tab
    • and the notification stays visible at all other tabs
  • when a user clicks the reload button ( triggering onLoadNewServiceWorkerAccept ) at another tab
  • it does nothing (no reload, no console log)

Am I doing something wrong, or is that expected behavior caused by some limitation I am not aware of?

My UpdateNotification code:

import {
  withServiceWorkerUpdater,
  ServiceWorkerUpdaterProps,
  LocalStoragePersistenceService
} from '@3m1/service-worker-updater'

const UpdateNotification = ({
  newServiceWorkerDetected,
  onLoadNewServiceWorkerAccept
}: ServiceWorkerUpdaterProps) => {
  return newServiceWorkerDetected ? (
    <React.Fragment>
      New version detected.
      <button
        onClick={() => onLoadNewServiceWorkerAccept}
      >
        Update!
      </button>
    </React.Fragment>
  ) : null
}

UpdateNotification.displayName = 'UpdateNotification'
export default withServiceWorkerUpdater(UpdateNotification, {
  persistenceService: new LocalStoragePersistenceService('app-name')
})

Testing at chrome: 98.0.4758.109

Thanks for your time 🙇 !

@emibcn
Copy link
Owner

emibcn commented Mar 24, 2022

Hi @Geril ,
First of all, thanks for using this package and for the bug report. And sorry for the late response. I'm kind of busy, lately.

Am I doing something wrong, or is that expected behavior caused by some limitation I am not aware of?

I think you're not doing anything wrong 😉

I guess the 2nd updated tab does not get fired the event once the SW has been updated, thus it never ens reloading the page.

There are 2 ways -at least- of solving this issue (in this package side):

  • When the update button is clicked, check if the SW has already been updated by another tab and, if so, don't wait for the SW event before reloading. I still don't know if this is possible. Maybe yes, doing something if there is no waiting SW:
    if (registration.waiting) {
  • When a tab fires the update process, send a message to all tabs informing about it, so they can react to it (ie: using standard React ways, like adding a parameter onExternalUpdate, like: ask the user somehow, change the button text and click or directly reload the page (up to you, the developer).

@emibcn emibcn added bug Something isn't working enhancement New feature or request help wanted Extra attention is needed javascript Pull requests that update Javascript code TypeScript TypeScript knowledge needed labels Mar 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request help wanted Extra attention is needed javascript Pull requests that update Javascript code TypeScript TypeScript knowledge needed
Projects
None yet
Development

No branches or pull requests

2 participants