feat(gatsby-plugin-offline): replace no-cache detection with dynamic path whitelist

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

@@ -1,23 +1,12 @@
 exports.registerServiceWorker = () => true
 
-let swNotInstalled = true
 const prefetchedPathnames = []
-
-exports.onPostPrefetchPathname = ({ pathname }) => {
-  // if SW is not installed, we need to record any prefetches
-  // that happen so we can then add them to SW cache once installed
-  if (swNotInstalled && `serviceWorker` in navigator) {
-    prefetchedPathnames.push(pathname)
-  }
-}
+const whitelistedPathnames = []
 
 exports.onServiceWorkerActive = ({
   getResourceURLsForPathname,
   serviceWorker,
 }) => {
-  // stop recording prefetch events
-  swNotInstalled = false
-
   // grab nodes from head of document
   const nodes = document.querySelectorAll(`
     head > script[src],
@@ -41,7 +30,44 @@ exports.onServiceWorkerActive = ({
   )
 
   serviceWorker.active.postMessage({
-    api: `gatsby-runtime-cache`,
+    gatsbyApi: `runtimeCache`,
     resources: [...resources, ...prefetchedResources],
   })
+  serviceWorker.active.postMessage({
+    gatsbyApi: `whitelistPathnames`,
+    pathnames: whitelistedPathnames,
+  })
+}
+
+function whitelistPathname(pathname, includesPrefix) {
+  if (`serviceWorker` in navigator) {
+    const { serviceWorker } = navigator
+
+    if (serviceWorker.controller !== null) {
+      serviceWorker.controller.postMessage({
+        gatsbyApi: `whitelistPathnames`,
+        pathnames: [{ pathname, includesPrefix }],
+      })
+    } else {
+      whitelistedPathnames.push({ pathname, includesPrefix })
+    }
+  }
+}
+
+exports.onPostPrefetchPathname = ({ pathname }) => {
+  console.log(`onPostPrefetchPathname ${pathname}`)
+  whitelistPathname(pathname, false)
+
+  // if SW is not installed, we need to record any prefetches
+  // that happen so we can then add them to SW cache once installed
+  if (
+    `serviceWorker` in navigator &&
+    !(
+      navigator.serviceWorker.controller !== null &&
+      navigator.serviceWorker.controller.state === `activated`
+    )
+  ) {
+    console.log(`SERVICE WORKER NOT INSTALLED`)
+    prefetchedPathnames.push(pathname)
+  }
 }

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

@@ -79,17 +79,6 @@ exports.onPostBuild = (args, pluginOptions) => {
       // the default prefix with `pathPrefix`.
       "/": `${pathPrefix}/`,
     },
-    navigateFallback: `${pathPrefix}/offline-plugin-app-shell-fallback/index.html`,
-    // Only match URLs without extensions or the query `no-cache=1`.
-    // So example.com/about/ will pass but
-    // example.com/about/?no-cache=1 and
-    // example.com/cheeseburger.jpg will not.
-    // We only want the service worker to handle our "clean"
-    // URLs and not any files hosted on the site.
-    //
-    // Regex based on http://stackoverflow.com/a/18017805
-    navigateFallbackWhitelist: [/^([^.?]*|[^?]*\.([^.?]{5,}|html))(\?.*)?$/],
-    navigateFallbackBlacklist: [/\?(.+&)?no-cache=1$/],
     cacheId: `gatsby-plugin-offline`,
     // Don't cache-bust JS or CSS files, and anything in the static directory
     dontCacheBustUrlsMatching: /(.*\.js$|.*\.css$|\/static\/)/,
@@ -99,11 +88,6 @@ exports.onPostBuild = (args, pluginOptions) => {
         urlPattern: /\.(?:png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
         handler: `staleWhileRevalidate`,
       },
-      {
-        // Use the Network First handler for external resources
-        urlPattern: /^https?:/,
-        handler: `networkFirst`,
-      },
     ],
     skipWaiting: true,
     clientsClaim: true,
@@ -121,9 +105,11 @@ exports.onPostBuild = (args, pluginOptions) => {
     .then(({ count, size, warnings }) => {
       if (warnings) warnings.forEach(warning => console.warn(warning))
 
-      const swAppend = fs.readFileSync(`${__dirname}/sw-append.js`)
-      fs.appendFileSync(`public/sw.js`, swAppend)
+      const swAppend = fs
+        .readFileSync(`${__dirname}/sw-append.js`, `utf8`)
+        .replace(/%pathPrefix%/g, pathPrefix)
 
+      fs.appendFileSync(`public/sw.js`, swAppend)
       console.log(
         `Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`
       )

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

@@ -1,8 +1,79 @@
-/* global workbox */
+/* global importScripts, workbox, idbKeyval */
 
-self.addEventListener(`message`, event => {
-  const { api } = event.data
-  if (api === `gatsby-runtime-cache`) {
+importScripts(
+  `https://cdn.jsdelivr.net/npm/idb-keyval@3/dist/idb-keyval-iife.min.js`
+)
+
+const WHITELIST_KEY = `custom-navigation-whitelist`
+
+const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
+  const { pathname } = new URL(event.request.url)
+  console.log(`handling ${pathname}`)
+
+  return idbKeyval.get(WHITELIST_KEY).then((customWhitelist = []) => {
+    // Respond with the offline shell if we match the custom whitelist
+    if (customWhitelist.includes(pathname)) {
+      const offlineShell = `%pathPrefix%/offline-plugin-app-shell-fallback/index.html`
+      const cacheName = workbox.core.cacheNames.precache
+
+      console.log(`serving ${offlineShell} for ${pathname}`)
+      return caches.match(offlineShell, { cacheName })
+    }
+
+    console.log(`fetching ${pathname} from network`)
+    return fetch(event.request)
+  })
+})
+
+workbox.routing.registerRoute(navigationRoute)
+
+// Handle any other requests with Network First, e.g. 3rd party resources.
+// This needs to be done last, otherwise it will prevent the custom navigation
+// route from working (and any other rules).
+workbox.routing.registerRoute(
+  /^https?:/,
+  workbox.strategies.networkFirst(),
+  `GET`
+)
+
+let updatingWhitelist = null
+
+function rawWhitelistPathnames(pathnames) {
+  if (updatingWhitelist !== null) {
+    // Prevent the whitelist from being updated twice at the same time
+    return updatingWhitelist.then(() => rawWhitelistPathnames(pathnames))
+  }
+
+  updatingWhitelist = idbKeyval
+    .get(WHITELIST_KEY)
+    .then((customWhitelist = []) => {
+      pathnames.forEach(pathname => {
+        if (!customWhitelist.includes(pathname)) customWhitelist.push(pathname)
+      })
+
+      return idbKeyval.set(WHITELIST_KEY, customWhitelist)
+    })
+    .then(() => {
+      updatingWhitelist = null
+    })
+
+  return updatingWhitelist
+}
+
+function rawResetWhitelist() {
+  if (updatingWhitelist !== null) {
+    return updatingWhitelist.then(() => rawResetWhitelist())
+  }
+
+  updatingWhitelist = idbKeyval.set(WHITELIST_KEY, []).then(() => {
+    updatingWhitelist = null
+  })
+
+  return updatingWhitelist
+}
+
+const messageApi = {
+  runtimeCache(event) {
     const { resources } = event.data
     const cacheName = workbox.core.cacheNames.runtime
 
@@ -25,5 +96,29 @@ self.addEventListener(`message`, event => {
         )
       )
     )
-  }
+  },
+
+  whitelistPathnames(event) {
+    let { pathnames } = event.data
+
+    pathnames = pathnames.map(({ pathname, includesPrefix }) => {
+      if (!includesPrefix) {
+        return `%pathPrefix%${pathname}`
+      } else {
+        return pathname
+      }
+    })
+
+    console.log(`setting whitelist`)
+    event.waitUntil(rawWhitelistPathnames(pathnames))
+  },
+
+  resetWhitelist(event) {
+    event.waitUntil(rawResetWhitelist())
+  },
+}
+
+self.addEventListener(`message`, event => {
+  const { gatsbyApi } = event.data
+  if (gatsbyApi) messageApi[gatsbyApi](event)
 })

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

@@ -2,7 +2,6 @@ import React from "react"
 import PropTypes from "prop-types"
 import loader from "./loader"
 import shallowCompare from "shallow-compare"
-import { getRedirectUrl } from "./load-directly-or-404"
 
 // Pass pathname in as prop.
 // component will try fetching resources. If they exist,
@@ -94,16 +93,11 @@ class EnsureResources extends React.Component {
   }
 
   render() {
+    // This should only occur if there's no custom 404 page
     if (
       process.env.NODE_ENV === `production` &&
       !(this.state.pageResources && this.state.pageResources.json)
     ) {
-      // This should only occur if there's no custom 404 page
-      const url = getRedirectUrl(this.state.location.href)
-      if (url) {
-        window.location.replace(url)
-      }
-
       return null
     }
 

packages/gatsby/cache-dir/navigation.js

@@ -6,7 +6,6 @@ import { apiRunner } from "./api-runner-browser"
 import emitter from "./emitter"
 import { navigate as reachNavigate } from "@reach/router"
 import parsePath from "./parse-path"
-import loadDirectlyOr404 from "./load-directly-or-404"
 
 // Convert to a map for faster lookup in maybeRedirect()
 const redirectMap = redirects.reduce((map, redirect) => {
@@ -66,8 +65,12 @@ const navigate = (to, options = {}) => {
     pathname = parsePath(to).pathname
   }
 
-  // If we had a service worker update, no matter the path, reload window
+  // 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
   }
@@ -82,14 +85,11 @@ const navigate = (to, options = {}) => {
   }, 1000)
 
   loader.getResourcesForPathname(pathname).then(pageResources => {
-    if (
-      (!pageResources || pageResources.page.path === `/404.html`) &&
-      process.env.NODE_ENV === `production`
-    ) {
-      clearTimeout(timeoutId)
-      loadDirectlyOr404(pageResources, to).then(() =>
+    if (!pageResources && process.env.NODE_ENV === `production`) {
+      loader.getResourcesForPathname(`/404.html`).then(() => {
+        clearTimeout(timeoutId)
         reachNavigate(to, options)
-      )
+      })
     } else {
       reachNavigate(to, options)
       clearTimeout(timeoutId)