Backport fixes from #9907

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

@@ -21,13 +21,12 @@ exports.onServiceWorkerActive = ({
   // grab nodes from head of document
   const nodes = document.querySelectorAll(`
     head > script[src],
-    head > link[as=script],
-    head > link[rel=stylesheet],
+    head > link[href],
     head > style[data-href]
   `)
 
   // get all resource URLs
-  const resources = [].slice
+  const headerResources = [].slice
     .call(nodes)
     .map(node => node.src || node.href || node.getAttribute(`data-href`))
 
@@ -40,8 +39,13 @@ exports.onServiceWorkerActive = ({
     )
   )
 
-  serviceWorker.active.postMessage({
-    api: `gatsby-runtime-cache`,
-    resources: [...resources, ...prefetchedResources],
+  const resources = [...headerResources, ...prefetchedResources]
+  resources.forEach(resource => {
+    // Create a prefetch link for each resource, so Workbox runtime-caches them
+    const link = document.createElement(`link`)
+    link.rel = `prefetch`
+    link.href = resource
+    document.head.appendChild(link)
+    link.onload = link.remove
   })
 }

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

@@ -96,13 +96,12 @@ exports.onPostBuild = (args, pluginOptions) => {
     runtimeCaching: [
       {
         // Add runtime caching of various page resources.
-        urlPattern: /\.(?:png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
+        urlPattern: /^https?:.*\.(?: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`,
+        // Google Fonts CSS (doesn't end in .css so we need to specify it)
+        urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
       },
     ],
     skipWaiting: true,

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

@@ -1,29 +1 @@
-/* global workbox */
-
-self.addEventListener(`message`, event => {
-  const { api } = event.data
-  if (api === `gatsby-runtime-cache`) {
-    const { resources } = event.data
-    const cacheName = workbox.core.cacheNames.runtime
-
-    event.waitUntil(
-      caches.open(cacheName).then(cache =>
-        Promise.all(
-          resources.map(resource => {
-            let request
-
-            // Some external resources don't allow
-            // CORS so get an opaque response
-            if (resource.match(/^https?:/)) {
-              request = fetch(resource, { mode: `no-cors` })
-            } else {
-              request = fetch(resource)
-            }
-
-            return request.then(response => cache.put(resource, response))
-          })
-        )
-      )
-    )
-  }
-})
+// noop