Updating `gatsby-plugin-offline` breaks the site

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

[fruluu]

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

[acarnwath]

I was experiencing this issue as well with gatsby-plugin-offline@3.10.1 on the Federalist platform (but not locally), and found the solution that worked for me noted on the Netlify forum. Simply including globPatterns: ['*.html'], in the config!