feat(gatsby-plugin-offline): reload when missing resources and SW was updated + add "onServiceWorkerUpdateReady" API

docs/docs/add-offline-support-with-a-service-worker.md

@@ -45,10 +45,10 @@ Note: Service worker registers only in production builds (`gatsby build`).
 
 ### Displaying a message when a service worker updates
 
-To display a custom message once your service worker finds an update, you can use the [`onServiceWorkerUpdateFound`](/docs/browser-apis/#onServiceWorkerUpdateFound) browser API in your `gatsby-browser.js` file. The following code will display a confirm prompt asking the user whether they would like to refresh the page when an update is found:
+To display a custom message once your service worker finds an update, you can use the [`onServiceWorkerUpdateReady`](/docs/browser-apis/#onServiceWorkerUpdateReady) browser API in your `gatsby-browser.js` file. The following code will display a confirm prompt asking the user whether they would like to refresh the page when an update is found:
 
 ```javascript:title=gatsby-browser.js
-exports.onServiceWorkerUpdateFound = () => {
+exports.onServiceWorkerUpdateReady = () => {
   const answer = window.confirm(
     `This application has been updated. ` +
       `Reload to display the latest version?`

packages/gatsby-plugin-offline/src/gatsby-browser.js

@@ -7,6 +7,9 @@ exports.onServiceWorkerActive = ({
   getResourceURLsForPathname,
   serviceWorker,
 }) => {
+  // reset whitelisted paths
+  serviceWorker.active.postMessage({ gatsbyApi: `resetWhitelist` })
+
   // grab nodes from head of document
   const nodes = document.querySelectorAll(`
     head > script[src],

packages/gatsby-plugin-offline/sw-append.js

@@ -14,6 +14,7 @@ const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
 
       return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
         if (!cachedResponse) {
+          // This shouldn't happen since we precache the offline shell, but just in case
           return fetch(offlineShell).then(response => {
             if (response.ok) {
               return caches.open(cacheName).then(cache =>

packages/gatsby/cache-dir/ensure-resources.js

@@ -129,6 +129,8 @@ class EnsureResources extends React.Component {
 
   render() {
     if (!this.hasResources(this.state.pageResources) && isInitialRender) {
+      window.___failedResources = true
+
       // prevent hydrating
       throw new Error(`Missing resources for ${this.state.location.pathname}`)
     }

packages/gatsby/cache-dir/navigation.js

@@ -65,16 +65,6 @@ const navigate = (to, options = {}) => {
     pathname = parsePath(to).pathname
   }
 
-  // If we had a service worker update, no matter the path, reload window and
-  // reset the pathname whitelist
-  if (window.GATSBY_SW_UPDATED) {
-    const { controller } = navigator.serviceWorker
-    controller.postMessage({ gatsbyApi: `resetWhitelist` })
-
-    window.location = pathname
-    return
-  }
-
   // Start a timer to wait for a second before transitioning and showing a
   // loader in case resources aren't around yet.
   const timeoutId = setTimeout(() => {

packages/gatsby/cache-dir/register-service-worker.js

@@ -23,8 +23,14 @@ if (
               if (navigator.serviceWorker.controller) {
                 // At this point, the old content will have been purged and the fresh content will
                 // have been added to the cache.
-                // We set a flag so Gatsby Link knows to refresh the page on next navigation attempt
-                window.GATSBY_SW_UPDATED = true
+                // We call the onServiceWorkerUpdateReady API so users can show update prompts.
+                apiRunner(`onServiceWorkerUpdateReady`, { serviceWorker: reg })
+
+                // If resources failed for the current page, reload.
+                if (window.___failedResources) {
+                  console.log(`resources failed, SW updated - reloading`)
+                  window.reload()
+                }
               } else {
                 // At this point, everything has been precached.
                 // It's the perfect time to display a "Content is cached for offline use." message.

packages/gatsby/src/utils/api-browser-docs.js

@@ -209,6 +209,14 @@ exports.onServiceWorkerInstalled = true
  */
 exports.onServiceWorkerUpdateFound = true
 
+/**
+ * Inform plugins when a service worker has been updated in the background
+ * and the page is ready to reload to apply changes.
+ * @param {object} $0
+ * @param {object} $0.serviceWorker The service worker instance.
+ */
+exports.onServiceWorkerUpdateReady = true
+
 /**
  * Inform plugins when a service worker has become active.
  * @param {object} $0