Document how to detect SW updates and alert users

[Knaackee]

I am using the gatsby-plugin-offline plugin and would like to know if there is a way to handle updates.

I would like to display a message if a new version is available like
https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717

At the moment I need to hard reload the site in order to see changes.

How to handle this?

Thanks in advance!

[smakosh]

Same here

[pieh]

Right now workflow is like that - when there is SW update, gatsby will just set flag to reload page on next navigation (so it doesn't refresh itself which would cause weird UX)

You can hook into onServiceWorkerUpdateFound browser API hook in gatsby-browser.js if you want to display custom message, so users are aware of it (or even force refresh if you would want that)

[rwieruch]

@pieh do I understand correctly, that with every new gatsby build the service worker gets the update and I don't need to worry about my users getting an old version of the webiste? I couldn't find anything about it in the gatsby-offline-plugin docs.

[pojntfx]

@rwieruch Same problem here. On libresat.space (sources here), the old content still gets served (deployed using Netlify). Some docs would be awesome.

[pojntfx]

Well, found it out. It's very simple actually!
Just add the following to gatsby-browser.js in the root of the repository (no further config necessary):

// gatsby-browser.js
exports.onServiceWorkerUpdateFound = () => {
  if (
    window.confirm(
      "This site has been updated with new data. Do you wish to reload the site to get the new data?"
    )
  ) {
    window.location.reload(true);
  }
};

This shows a little modal that reloads the site if the user pressed "Yes". See learn-chinese.tk (sources here) for a demo.

[smakosh]

bad UX in my opinion, the user will keep seeing modals every time a new content is available

[rwieruch]

I think I will just disable the offline plugin before launching a new website/application. Heard about too many launches that went wrong or website still serving old content due to service workers. Not necessarily related to Gatsby, but maybe just avoiding service workers for now is a better option.

[pojntfx]

Well, another option would be to simply reload the page without any confirm:

// gatsby-browser.js
exports.onServiceWorkerUpdateFound = () => window.location.reload(true);

I prefer the modal though. I've seen this a lot on other sites as well - on a slow mobile connection you don't want to reload the whole page, after all that's what serviceworkers are for!