Gatsby: Updating `gatsby-plugin-offline` breaks the site

[josephmarkus]

Description

Yesterday, I updated gatsby-plugin-offline from 2.2.6 to 3.2.2.

In gatsby-config.js the plugin is used with its default options, like so:

plugins: [
  ...
  'gatsby-plugin-offline',
  ...
],

Soon after deploy the website became unavailable after hard-refreshing the page.

In Chrome 81 it would say:

The site can't be reached

The web page at https://[REDACTED]/ might be temporarily down or it maye have moved permanently to a new web address.

ERR_FAILED

In Firefox 76 it would say

Oops.

The site at https://[REDACTED]/ has experienced a network protocol violation that cannot be repaired.

The page you are trying to view cannot be shown because an error in the data transmission was detected

Please contact the web site owners to inform them of this problem

In Safari 13 on iOS 13 it would say

Safari cannot open the page.

The error was: "FetchEvent.respondWith received an error: Returned response is null.".

On the back of this, I reverted the change, which fixed the issue, but that's only after clearing the site's cache.

In Chrome unregistering the worker (via DevTools > Application > Service Workers) and refreshing the page would not help. It would throw the same error.

Only by going to DevTools > Application > Clear storage > Clear site data, then refreshing the page, would actually load the site.

In Safari on iOS refreshing the page wouldn't help, but almost 24 hours later, hitting refresh a couple of times finally reloaded the site.

I left Firefox cache as is. 24 hours later, refreshing the page throws the same error.

I was a bit surprised that with default configuration for gatsby-offline-plugin, the update of the plugin could cause this side effect.

I have some questions on the back of this:

• how can I prevent this happening in the future? Previewing this deploy didn't present the issue
• how can I set a way to essentially invalidate a Service Worker for users who still may be experiencing this? Does this have to happen at the CDN level as Service Worker is called before anything in the application itself? This is so different to just invalidating cache on a CDN. It's almost as if Service Worker itself has to have a mechanism to handle issues such as this
• are there best practices for monitoring service workers, so that any changes could be detected and dealt with more easily than just "it doesn't work for me"?

Steps to reproduce

I upgraded gatsby-plugin-offline from 2.2.6 to 3.2.2

Locally this didn't present any issues.

The issue occured after deploy.

Expected result

Application shouldn't break

Actual result

After deploying the application, the website would not work.

Environment

System:
  OS: macOS Mojave 10.14.6
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Shell: 5.3 - /bin/zsh
Binaries:
  Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
  Yarn: 1.22.4 - /usr/local/bin/yarn
  npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 81.0.4044.138
  Firefox: 76.0.1
  Safari: 13.1
npmPackages:
  gatsby: ~2.13.x => 2.13.64
  gatsby-background-image: ^0.8.0 => 0.8.3
  gatsby-image: ~2.1.x => 2.1.4
  gatsby-plugin-catch-links: ~2.3.1 => 2.3.1
  gatsby-plugin-emotion: ~2.0.5 => 2.0.7
  gatsby-plugin-favicon: ~3.1.5 => 3.1.6
  gatsby-plugin-google-gtag: ~2.1.1 => 2.1.1
  gatsby-plugin-manifest: ~2.2.x => 2.2.5
  gatsby-plugin-mdx: ^1.2.7 => 1.2.7
  gatsby-plugin-offline: ~3.2.2 => 3.2.2
  gatsby-plugin-postcss: ~2.3.1 => 2.3.1
  gatsby-plugin-react-helmet: ~3.3.1 => 3.3.1
  gatsby-plugin-remove-generator: ^1.0.4 => 1.0.4
  gatsby-plugin-robots-txt: ~1.5.x => 1.5.0
  gatsby-plugin-root-import: ~2.0.5 => 2.0.5
  gatsby-plugin-sharp: ~2.2.x => 2.2.11
  gatsby-plugin-sitemap: ~2.2.x => 2.2.20
  gatsby-remark-autolink-headers: ^2.1.24 => 2.1.24
  gatsby-remark-copy-linked-files: ^2.3.2 => 2.3.2
  gatsby-remark-external-links: ~0.0.4 => 0.0.4
  gatsby-remark-images: ~3.1.x => 3.1.11
  gatsby-remark-relative-images: ^0.2.2 => 0.2.3
  gatsby-remark-responsive-iframe: ~2.4.2 => 2.4.2
  gatsby-source-filesystem: ~2.3.3 => 2.3.3
  gatsby-source-youtube-v2: ^1.0.1 => 1.0.1
  gatsby-transformer-remark: ^2.5.0 => 2.6.14
  gatsby-transformer-sharp: ~2.2.x => 2.2.6
npmGlobalPackages:
  gatsby-cli: 2.11.7

[LekoArts]

Hi, thanks for the issue! We'd need to see at least the website but better a reproduction of your issue as all the sites I'm running with the latest version of the offline plugin don't show this behavior and we also haven't heard any other complaints about a recent breakage.

Have you tried this on different computers, updated your browsers?

[josephmarkus]

Hi @LekoArts, thanks for getting back to me. I did ask people to try and it was breaking for others. I also checked it on my phone. The error in Safari was most descriptive and search results bring up service workers. However, it's still unclear how I can test my changes to prevent this from happening. As things stand, what would be a safe approach here that you could recommend? I appreciate this isn't particularly helpful without reproduction of the issue, but I'm wondering what I could do in the meantime to narrow down the issue described.

[LekoArts]

You could switch out the plugin https://www.gatsbyjs.org/packages/gatsby-plugin-offline/#remove and see if your site works without the service worker. Then re-add the latest plugin.

You'd need to deploy these changes then. On that note: Have you tried other deployment options? Since it seems you can't share the URL I don't know what you're using. I'd suggest trying Netlify and gatsby-plugin-netlify and see if a build on their infra works.

Lastly, maybe try upgrading gatsby to the latest version.

[josephmarkus]

Thank you for the suggestions. I will try and see if I can try to remove and re-add updated version of the plugin on the staging version of the site.

While researching service workers I came across this short explanatory YouTube video The Service Worker Lifecycle by Jake Archibald from Google.

A couple of things that stood out for me were:

• when service worker updates, you need to close your browser and reopen it, so that a newly fetched copy can take over the old one
• he strongly recommends setting cache time of a service worker to 0

I wonder, if there any defaults set up _under the hood_ of the plugin that would be useful to bear in mind in relation to the above?

Thanks!

[ascorbic]

Hi. I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do reopen the issue. Thanks!

[Necmttn]

This issue happens with version"gatsby-plugin-offline": "^3.2.26", as well. it's only occurs when you second visit the website in Safari browser.

[fruluu]

same happens on reload with version "gatsby-plugin-offline": "^3.2.26"

[gazben]

This happens without the plugin also on my setup.