[v2] [gatsby-plugin-offline] fix: improve service worker initial cach…

…ing (#8183)

* Upgrade packages

* Use push messages to fetch resources

* Resolve the promises properly

* Use NetworkFirst for external resources

* Change "type" to "api"

* Fix integration test

jest.config.js

@@ -29,5 +29,5 @@ module.exports = {
   },
   // TODO: Remove this once https://github.com/facebook/jest/pull/6792 is released.
   // Probably in Jest 23.4.3
-  testURL: 'http://localhost',
+  testURL: `http://localhost`,
 }

jest.integration.js

@@ -10,4 +10,7 @@ module.exports = {
   ],
   transform: { "^.+\\.js$": `<rootDir>/jest-transformer.js` },
   verbose: true,
+  // TODO: Remove this once https://github.com/facebook/jest/pull/6792 is released.
+  // Probably in Jest 23.4.3
+  testURL: `http://localhost`,
 }

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

@@ -11,7 +11,7 @@ exports.onPrefetchPathname = ({ pathname }) => {
   }
 }
 
-exports.onServiceWorkerInstalled = ({ getResourceURLsForPathname }) => {
+exports.onServiceWorkerActive = ({ getResourceURLsForPathname, serviceWorker }) => {
   // stop recording prefetch events
   swNotInstalled = false
 
@@ -28,19 +28,17 @@ exports.onServiceWorkerInstalled = ({ getResourceURLsForPathname }) => {
     .call(nodes)
     .map(node => node.src || node.href || node.getAttribute(`data-href`))
 
-  for (const resource of resources) {
-    const url = new URL(resource, window.location.origin)
-    const isExternal = url.origin !== window.location.origin
-    fetch(
-      resource,
-      isExternal ? { mode: `no-cors` } : undefined
-    )
-  }
-
   // Loop over all resources and fetch the page component and JSON
   // to add it to the sw cache.
-  prefetchedPathnames.forEach(path => {
-    const urls = getResourceURLsForPathname(path)
-    urls.forEach(url => fetch(url))
+  const prefetchedResources = []
+  prefetchedPathnames.forEach(path =>
+    getResourceURLsForPathname(path).forEach(resource =>
+      prefetchedResources.push(resource)
+    )
+  )
+
+  serviceWorker.active.postMessage({
+    api: `gatsby-runtime-cache`,
+    resources: [...resources, ...prefetchedResources],
   })
 }

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

@@ -101,6 +101,11 @@ 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,
@@ -117,6 +122,10 @@ exports.onPostBuild = (args, pluginOptions) => {
     .generateSW({ swDest, ...combinedOptions })
     .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)
+
       console.log(
         `Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`
       )

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

@@ -0,0 +1,23 @@
+/* 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 =>
+            cache.add(resource).catch(e => {
+              // ignore TypeErrors - these are usually due to
+              // external resources which don't allow CORS
+              if (!(e instanceof TypeError)) throw e
+            })
+          )
+        )
+      )
+    )
+  }
+})

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

@@ -26,11 +26,7 @@ if (`serviceWorker` in navigator) {
                 // Post to service worker that install is complete.
                 // Delay to allow time for the event listener to be added --
                 // otherwise fetch is called too soon and resources aren't cached.
-                window.setTimeout(() => {
-                  apiRunner(`onServiceWorkerInstalled`, {
-                    serviceWorker: reg,
-                  })
-                }, 100)
+                apiRunner(`onServiceWorkerInstalled`, { serviceWorker: reg })
               }
               break
 
@@ -39,7 +35,7 @@ if (`serviceWorker` in navigator) {
               apiRunner(`onServiceWorkerRedundant`, { serviceWorker: reg })
               break
 
-            case `active`:
+            case `activated`:
               apiRunner(`onServiceWorkerActive`, { serviceWorker: reg })
               break
           }