From e688b0cee3b72c5ee69d92ec77157f326c0963f4 Mon Sep 17 00:00:00 2001
From: Espen Hovlandsdal <espen@hovlandsdal.com>
Date: Tue, 24 Sep 2019 07:46:34 -0700
Subject: [PATCH] fix(gatsby-plugin-offline): skip prefetching all resources
 (#16691)

Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
---
 .../src/__tests__/gatsby-browser.test.js      | 44 +++++++++++++++++++
 .../src/gatsby-browser.js                     |  8 ++++
 2 files changed, 52 insertions(+)
 create mode 100644 packages/gatsby-plugin-offline/src/__tests__/gatsby-browser.test.js

diff --git a/packages/gatsby-plugin-offline/src/__tests__/gatsby-browser.test.js b/packages/gatsby-plugin-offline/src/__tests__/gatsby-browser.test.js
new file mode 100644
index 0000000000000..aba58666e297f
--- /dev/null
+++ b/packages/gatsby-plugin-offline/src/__tests__/gatsby-browser.test.js
@@ -0,0 +1,44 @@
+const { onServiceWorkerActive } = require(`../gatsby-browser`)
+
+it(`does not add prefetch for preconnect/prefetch/prerender`, () => {
+  const addHeadElement = (tagName, attributes) => {
+    const el = document.createElement(tagName)
+    for (let key in attributes) {
+      el.setAttribute(key, attributes[key])
+    }
+    document.head.appendChild(el)
+    return el
+  }
+
+  // Should not be prefetched
+  addHeadElement(`link`, { rel: `preconnect`, href: `https://gatsbyjs.org` })
+  addHeadElement(`link`, { rel: `prefetch`, href: `https://gatsbyjs.org` })
+  addHeadElement(`link`, { rel: `prerender`, href: `https://gatsbyjs.org` })
+  addHeadElement(`script`, { src: `https://gats.by/script.js` })
+  addHeadElement(`style`, { "data-href": `https://gats.by/lazy.css` })
+  addHeadElement(`link`, {
+    rel: `stylesheet`,
+    href: `https://gats.by/style.css`,
+  })
+  addHeadElement(`link`, {
+    rel: `preconnect dns-prefetch`,
+    href: `https://www.google-analytics.com`,
+  })
+
+  onServiceWorkerActive({
+    getResourceURLsForPathname: () => [],
+    serviceWorker: { active: {} },
+  })
+
+  // First five link elements should be the actual resources added above
+  // The remaining link elements should be the one added by gatsby-browser as prefetch
+  const links = [].slice.call(document.querySelectorAll(`head > link`))
+
+  // Should add prefetch for stylesheets, scripts and lazy-loaded styles
+  expect(links[5].href).toBe(`https://gats.by/script.js`)
+  expect(links[5].rel).toBe(`prefetch`)
+  expect(links[6].href).toBe(`https://gats.by/lazy.css`)
+  expect(links[6].rel).toBe(`prefetch`)
+  expect(links[7].href).toBe(`https://gats.by/style.css`)
+  expect(links[7].rel).toBe(`prefetch`)
+})
diff --git a/packages/gatsby-plugin-offline/src/gatsby-browser.js b/packages/gatsby-plugin-offline/src/gatsby-browser.js
index d79dc2f85e262..0f0ca2b65a3ba 100644
--- a/packages/gatsby-plugin-offline/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-offline/src/gatsby-browser.js
@@ -1,5 +1,7 @@
 exports.registerServiceWorker = () => true
 
+// only cache relevant resources for this page
+const whiteListLinkRels = /^(stylesheet|preload)$/
 const prefetchedPathnames = []
 
 exports.onServiceWorkerActive = ({
@@ -23,6 +25,12 @@ exports.onServiceWorkerActive = ({
   // get all resource URLs
   const headerResources = [].slice
     .call(nodes)
+    // don't include preconnect/prefetch/prerender resources
+    .filter(
+      node =>
+        node.tagName !== `LINK` ||
+        whiteListLinkRels.test(node.getAttribute(`rel`))
+    )
     .map(node => node.src || node.href || node.getAttribute(`data-href`))
 
   // Loop over prefetched pages and add their resources to an array,