[offline-plugin] Add support for SW caching of prefetched resources (#6566)

* remove babel compiled file

* refactor: change how we process prefetches after SW install, clean up code

* fix: make sure we don't cache xml

* Small copy tweak

* refactor: minor cleanup

* fix: pass sw instance to all sw events

Author: kkemple

packages/gatsby-plugin-offline/.gitignore

@@ -2,3 +2,4 @@
 /gatsby-ssr.js
 /gatsby-browser.js
 /app-shell.js
+/prefetch-catcher.js

packages/gatsby-plugin-offline/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@babel/runtime": "7.0.0-beta.52",
     "cheerio": "^1.0.0-rc.2",
-    "sw-precache": "^5.0.0"
+    "sw-precache": "^5.2.1"
   },
   "devDependencies": {
     "@babel/cli": "7.0.0-beta.52",

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

@@ -1 +1,45 @@
 exports.registerServiceWorker = () => true
+
+let swNotInstalled = true
+const pathnameResources = []
+
+exports.onPrefetchPathname = ({ pathname, getResourcesForPathname }) => {
+  // 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) {
+    pathnameResources.push(
+      new Promise(resolve => {
+        getResourcesForPathname(pathname, resources => {
+          resolve(resources)
+        })
+      })
+    )
+  }
+}
+
+exports.onServiceWorkerInstalled = () => {
+  // stop recording prefetch events
+  swNotInstalled = false
+
+  // grab nodes from head of document
+  const nodes = document.querySelectorAll(
+    `head > script[src], head > link[as=script]`
+  )
+
+  // get all script URLs
+  const scripts = [].slice
+    .call(nodes)
+    .map(node => (node.src ? node.src : node.href))
+
+  // loop over all resources and fetch the page component and JSON
+  // thereby storing it in SW cache
+  Promise.all(pathnameResources).then(pageResources => {
+    pageResources.forEach(pageResource => {
+      const [script] = scripts.filter(s =>
+        s.includes(pageResource.page.componentChunkName)
+      )
+      fetch(pageResource.page.jsonURL)
+      fetch(script)
+    })
+  })
+}

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

@@ -56,17 +56,15 @@ exports.onPostBuild = (args, pluginOptions) => {
   // holds any paths for scripts and links
   const criticalFilePaths = []
 
-  $(`script`)
-    .filter((_, elem) => $(elem).attr(`src`) !== undefined)
-    .each((_, elem) => {
-      criticalFilePaths.push(`${rootDir}${$(elem).attr(`src`)}`)
-    })
+  $(`script[src], link[as=script]`).each((_, elem) => {
+    const $elem = $(elem)
+    const url = $elem.attr(`src`) || $elem.attr(`href`)
+    const blackListRegex = /\.xml$/
 
-  $(`link`)
-    .filter((_, elem) => $(elem).attr(`as`) !== `script`)
-    .each((_, elem) => {
-      criticalFilePaths.push(`${rootDir}${$(elem).attr(`href`)}`)
-    })
+    if (!blackListRegex.test(url)) {
+      criticalFilePaths.push(`${rootDir}${url}`)
+    }
+  })
 
   const options = {
     staticFileGlobs: files.concat([

packages/gatsby/cache-dir/loader.js

@@ -41,6 +41,8 @@ const fetchPageResourceMap = () => {
   return fetchingPageResourceMapPromise
 }
 
+const createJsonURL = jsonName => `${__PATH_PREFIX__}/static/d/${jsonName}.json`
+
 const fetchResource = resourceName => {
   // Find resource
   let resourceFunction
@@ -52,9 +54,7 @@ const fetchResource = resourceName => {
     } else {
       resourceFunction = () => {
         const fetchPromise = new Promise((resolve, reject) => {
-          const url = `${__PATH_PREFIX__}/static/d/${
-            jsonDataPaths[resourceName]
-          }.json`
+          const url = createJsonURL(jsonDataPaths[resourceName])
           var req = new XMLHttpRequest()
           req.open(`GET`, url, true)
           req.withCredentials = true
@@ -198,7 +198,10 @@ const queue = {
     // Tell plugins with custom prefetching logic that they should start
     // prefetching this path.
     if (!prefetchTriggered[path]) {
-      apiRunner(`onPrefetchPathname`, { pathname: path })
+      apiRunner(`onPrefetchPathname`, {
+        pathname: path,
+        getResourcesForPathname: queue.getResourcesForPathname,
+      })
       prefetchTriggered[path] = true
     }
 
@@ -355,7 +358,7 @@ const queue = {
       getResourceModule(page.jsonName),
     ]).then(([component, json]) => {
       const pageResources = { component, json, page }
-
+      pageResources.page.jsonURL = createJsonURL(jsonDataPaths[page.jsonName])
       pathScriptsCache[path] = pageResources
       cb(pageResources)
 

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

@@ -1,10 +1,11 @@
-import emitter from "./emitter"
+import { apiRunner } from "./api-runner-browser"
 
 if (`serviceWorker` in navigator) {
   navigator.serviceWorker
     .register(`${__PATH_PREFIX__}/sw.js`)
     .then(function(reg) {
       reg.addEventListener(`updatefound`, () => {
+        apiRunner(`onServiceWorkerUpdateFound`, { serviceWorker: reg })
         // The updatefound event implies that reg.installing is set; see
         // https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
         const installingWorker = reg.installing
@@ -21,12 +22,19 @@ if (`serviceWorker` in navigator) {
                 // At this point, everything has been precached.
                 // It's the perfect time to display a "Content is cached for offline use." message.
                 console.log(`Content is now available offline!`)
-                emitter.emit(`sw:installed`)
+
+                // post to service worker that install is complete
+                apiRunner(`onServiceWorkerInstalled`, { serviceWorker: reg })
               }
               break
 
             case `redundant`:
               console.error(`The installing service worker became redundant.`)
+              apiRunner(`onServiceWorkerRedundant`, { serviceWorker: reg })
+              break
+
+            case `active`:
+              apiRunner(`onServiceWorkerActive`, { serviceWorker: reg })
               break
           }
         })

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

@@ -104,6 +104,7 @@ exports.wrapRootComponent = true
  * for plugins with custom prefetching logic.
  * @param {object} $0
  * @param {object} $0.pathname The pathname whose resources should now be prefetched
+ * @param {object} $0.getResourcesForPathname Function for fetching resources related to pathname
  */
 exports.onPrefetchPathname = true
 
@@ -126,3 +127,31 @@ exports.disableCorePrefetching = true
  * };
  */
 exports.replaceHydrateFunction = true
+
+/**
+ * Inform plugins when a service worker has been installed.
+ * @param {object} $0
+ * @param {object} $0.serviceWorker The service worker instance.
+ */
+exports.onServiceWorkerInstalled = true
+
+/**
+ * Inform plugins of when a service worker has an update available.
+ * @param {object} $0
+ * @param {object} $0.serviceWorker The service worker instance.
+ */
+exports.onServiceWorkerUpdateFound = true
+
+/**
+ * Inform plugins when a service worker has become active.
+ * @param {object} $0
+ * @param {object} $0.serviceWorker The service worker instance.
+ */
+exports.onServiceWorkerActive = true
+
+/**
+ * Inform plugins when a service worker is redundant.
+ * @param {object} $0
+ * @param {object} $0.serviceWorker The service worker instance.
+ */
+exports.onServiceWorkerRedundant = true