From 23599eb9cc22330cb71ef9536540fb8162b4d2bd Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 14:12:20 +0000 Subject: [PATCH 1/6] Backport fixes from #9907 --- .../src/gatsby-browser.js | 16 ++++++---- .../gatsby-plugin-offline/src/gatsby-node.js | 7 ++--- .../gatsby-plugin-offline/src/sw-append.js | 30 +------------------ 3 files changed, 14 insertions(+), 39 deletions(-) diff --git a/packages/gatsby-plugin-offline/src/gatsby-browser.js b/packages/gatsby-plugin-offline/src/gatsby-browser.js index 318efddceac57..4f7beac2f9809 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-browser.js +++ b/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 }) } diff --git a/packages/gatsby-plugin-offline/src/gatsby-node.js b/packages/gatsby-plugin-offline/src/gatsby-node.js index a9f4419e93d21..c8b3520ebe254 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-node.js +++ b/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, diff --git a/packages/gatsby-plugin-offline/src/sw-append.js b/packages/gatsby-plugin-offline/src/sw-append.js index a578d3708a9e9..172f1ae6a468c 100644 --- a/packages/gatsby-plugin-offline/src/sw-append.js +++ b/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 From e02f9d54c05721fd96a8597954fc844d31386b8e Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 14:21:13 +0000 Subject: [PATCH 2/6] minor fixes for things I copy-pasted wrong --- packages/gatsby-plugin-offline/src/gatsby-browser.js | 1 + packages/gatsby-plugin-offline/src/gatsby-node.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/gatsby-plugin-offline/src/gatsby-browser.js b/packages/gatsby-plugin-offline/src/gatsby-browser.js index 4f7beac2f9809..9f54f9808b2dd 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-browser.js +++ b/packages/gatsby-plugin-offline/src/gatsby-browser.js @@ -45,6 +45,7 @@ exports.onServiceWorkerActive = ({ const link = document.createElement(`link`) link.rel = `prefetch` link.href = resource + document.head.appendChild(link) link.onload = link.remove }) diff --git a/packages/gatsby-plugin-offline/src/gatsby-node.js b/packages/gatsby-plugin-offline/src/gatsby-node.js index c8b3520ebe254..1edc9a9b3a624 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-node.js +++ b/packages/gatsby-plugin-offline/src/gatsby-node.js @@ -102,6 +102,7 @@ exports.onPostBuild = (args, pluginOptions) => { { // Google Fonts CSS (doesn't end in .css so we need to specify it) urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/, + handler: `staleWhileRevalidate`, }, ], skipWaiting: true, From fdd58441591b9953d34a9e207df671facfc0fc48 Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 19:56:14 +0000 Subject: [PATCH 3/6] Reorder onload / appendChild --- packages/gatsby-plugin-offline/src/gatsby-browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-offline/src/gatsby-browser.js b/packages/gatsby-plugin-offline/src/gatsby-browser.js index 9f54f9808b2dd..916b9b4bf8021 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-browser.js +++ b/packages/gatsby-plugin-offline/src/gatsby-browser.js @@ -45,8 +45,8 @@ exports.onServiceWorkerActive = ({ const link = document.createElement(`link`) link.rel = `prefetch` link.href = resource + link.onload = link.remove document.head.appendChild(link) - link.onload = link.remove }) } From 14cdb9520fda492fed2af40341f355c7e70a1059 Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 20:03:17 +0000 Subject: [PATCH 4/6] Remove links if an error occurs --- packages/gatsby-plugin-offline/src/gatsby-browser.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/gatsby-plugin-offline/src/gatsby-browser.js b/packages/gatsby-plugin-offline/src/gatsby-browser.js index 916b9b4bf8021..0f5749e483eb9 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-browser.js +++ b/packages/gatsby-plugin-offline/src/gatsby-browser.js @@ -45,7 +45,9 @@ exports.onServiceWorkerActive = ({ const link = document.createElement(`link`) link.rel = `prefetch` link.href = resource + link.onload = link.remove + link.onerror = link.remove document.head.appendChild(link) }) From ff6ca9be2f2c0901d5e8d5d43c2890c6d2ac6e12 Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 20:10:53 +0000 Subject: [PATCH 5/6] Add cacheFirst handler for hashed resources + make RegExps consistent --- packages/gatsby-plugin-offline/src/gatsby-node.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-plugin-offline/src/gatsby-node.js b/packages/gatsby-plugin-offline/src/gatsby-node.js index 1edc9a9b3a624..892e99eb953dc 100644 --- a/packages/gatsby-plugin-offline/src/gatsby-node.js +++ b/packages/gatsby-plugin-offline/src/gatsby-node.js @@ -91,12 +91,19 @@ exports.onPostBuild = (args, pluginOptions) => { 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\/)/, + // Don't cache-bust JS or CSS files, and anything in the static directory, + // since these files have unique URLs and their contents will never change + dontCacheBustUrlsMatching: /(\.js$|\.css$|\/static\/)/, runtimeCaching: [ { - // Add runtime caching of various page resources. - urlPattern: /^https?:.*\.(?:png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, + // Use cacheFirst since these don't need to be revalidated (same RegExp + // and same reason as above) + urlPattern: /(\.js$|\.css$|\/static\/)/, + handler: `cacheFirst`, + }, + { + // Add runtime caching of various other page resources + urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, handler: `staleWhileRevalidate`, }, { From b25b07b6b3e329c4aa2bd2dd1f900ba65d5ebc9b Mon Sep 17 00:00:00 2001 From: David Bailey Date: Wed, 14 Nov 2018 20:15:11 +0000 Subject: [PATCH 6/6] Update README --- packages/gatsby-plugin-offline/README.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-plugin-offline/README.md b/packages/gatsby-plugin-offline/README.md index 09493aff2882e..809cc3b41db64 100644 --- a/packages/gatsby-plugin-offline/README.md +++ b/packages/gatsby-plugin-offline/README.md @@ -49,18 +49,25 @@ const options = { 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\/)/, + // Don't cache-bust JS or CSS files, and anything in the static directory, + // since these files have unique URLs and their contents will never change + dontCacheBustUrlsMatching: /(\.js$|\.css$|\/static\/)/, runtimeCaching: [ { - // Add runtime caching of various page resources. - urlPattern: /\.(?:png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, + // Use cacheFirst since these don't need to be revalidated (same RegExp + // and same reason as above) + urlPattern: /(\.js$|\.css$|\/static\/)/, + handler: `cacheFirst`, + }, + { + // Add runtime caching of various other page resources + 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/, + handler: `staleWhileRevalidate`, }, ], skipWaiting: true,