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/.gitignore

@@ -1,4 +1,3 @@
 /*.js
 !index.js
-!sw-append.js
 yarn.lock

packages/gatsby-plugin-offline/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "cheerio": "^1.0.0-rc.2",
+    "cpx": "^1.5.0",
     "idb-keyval": "^3.1.0",
     "lodash": "^4.17.10",
     "workbox-build": "^3.6.3"
@@ -34,8 +35,10 @@
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline",
   "scripts": {
-    "build": "babel src --out-dir . --ignore **/__tests__",
+    "build": "npm run build:src && npm run build:sw-append",
+    "build:src": "babel src --out-dir . --ignore **/__tests__",
+    "build:sw-append": "cpx -v src/sw-append.js .",
     "prepare": "cross-env NODE_ENV=production npm run build",
-    "watch": "babel -w src --out-dir . --ignore **/__tests__"
+    "watch": "npm run build:sw-append -- --watch & npm run build:src -- --watch"
   }
 }

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 → packages/gatsby-plugin-offline/src/sw-append.js

@@ -13,20 +13,23 @@ const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
       const cacheName = workbox.core.cacheNames.precache
 
       return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
-        if (!cachedResponse) {
-          return fetch(offlineShell).then(response => {
-            if (response.ok) {
-              return caches.open(cacheName).then(cache =>
-                // Clone is needed because put() consumes the response body.
-                cache.put(offlineShell, response.clone()).then(() => response)
-              )
-            } else {
-              return fetch(event.request)
-            }
-          })
-        }
-
-        return cachedResponse
+        if (cachedResponse) return cachedResponse
+
+        console.error(
+          `The offline shell (${offlineShell}) was not found ` +
+            `while attempting to serve a response for ${pathname}`
+        )
+
+        return fetch(offlineShell).then(response => {
+          if (response.ok) {
+            return caches.open(cacheName).then(cache =>
+              // Clone is needed because put() consumes the response body.
+              cache.put(offlineShell, response.clone()).then(() => response)
+            )
+          } else {
+            return fetch(event.request)
+          }
+        })
       })
     }
 

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