onLoadNewServiceWorkerAccept triggers nothing, when one tab was already refreshed

[Geril]

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]

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:
  

  service-worker-updater/src/updateSW.ts

  Line 17 in 4978a18

  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).