fix(gatsby-plugin-offline): gracefully degrade if appshell isn't prec…

…ached (#10329)

If app shell is not in precache (for whatever reason) - try to fetch it. If we fetch successfully - put it in precache for any future requests so we can use happy path again. If we can't fetch app shell - fallback to fetching actual html content of the page.

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

@@ -12,7 +12,22 @@ const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
       const offlineShell = `%pathPrefix%/offline-plugin-app-shell-fallback/index.html`
       const cacheName = workbox.core.cacheNames.precache
 
-      return caches.match(offlineShell, { cacheName })
+      return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
+        if (!cachedResponse) {
+          return fetch(offlineShell).then(response => {
+            if (response.ok) {
+              return caches.open(cacheName).then(cache =>
+                // Clone is needed because put() consumes the response body.
+                cache.put(offlineShell, response.clone()).then(() => response)
+              )
+            } else {
+              return fetch(event.request)
+            }
+          })
+        }
+
+        return cachedResponse
+      })
     }
 
     return fetch(event.request)