fix(workbox): add additional details for uncaught errors and fix chromium CORS (#417)

Author: pi0

templates/workbox/sw.js

@@ -52,13 +52,35 @@ function precacheAssets(workbox, options) {
 
 
 function runtimeCaching(workbox, options) {
+  const requestInterceptor = {
+    requestWillFetch({ request }) {
+      if (request.cache === 'only-if-cached' && request.mode === 'no-cors') {
+        return new Request(request.url, { ...request, cache: 'default', mode: 'no-cors' })
+      }
+      return request
+    },
+    fetchDidFail(ctx) {
+      ctx.error.message =
+        '[workbox] Network request for ' + ctx.request.url + ' threw an error: ' + ctx.error.message
+      console.error(ctx.error, 'Details:', ctx)
+    },
+    handlerDidError(ctx) {
+      ctx.error.message =
+        `[workbox] Network handler threw an error: ` + ctx.error.message
+      console.error(ctx.error, 'Details:', ctx)
+      return null
+    }
+  }
+
   for (const entry of options.runtimeCaching) {
     const urlPattern = new RegExp(entry.urlPattern)
     const method = entry.method || 'GET'
 
     const plugins = (entry.strategyPlugins || [])
       .map(p => new (getProp(workbox, p.use))(...p.config))
 
+    plugins.unshift(requestInterceptor)
+
     const strategyOptions = { ...entry.strategyOptions, plugins }
 
     const strategy = new workbox.strategies[entry.handler](strategyOptions)

test/__snapshots__/pwa.test.js.snap

@@ -156,13 +156,35 @@ function precacheAssets(workbox, options) {
 
 
 function runtimeCaching(workbox, options) {
+  const requestInterceptor = {
+    requestWillFetch({ request }) {
+      if (request.cache === 'only-if-cached' && request.mode === 'no-cors') {
+        return new Request(request.url, { ...request, cache: 'default', mode: 'no-cors' })
+      }
+      return request
+    },
+    fetchDidFail(ctx) {
+      ctx.error.message =
+        '[workbox] Network request for ' + ctx.request.url + ' threw an error: ' + ctx.error.message
+      console.error(ctx.error, 'Details:', ctx)
+    },
+    handlerDidError(ctx) {
+      ctx.error.message =
+        \`[workbox] Network handler threw an error: \` + ctx.error.message
+      console.error(ctx.error, 'Details:', ctx)
+      return null
+    }
+  }
+
   for (const entry of options.runtimeCaching) {
     const urlPattern = new RegExp(entry.urlPattern)
     const method = entry.method || 'GET'
 
     const plugins = (entry.strategyPlugins || [])
       .map(p => new (getProp(workbox, p.use))(...p.config))
 
+    plugins.unshift(requestInterceptor)
+
     const strategyOptions = { ...entry.strategyOptions, plugins }
 
     const strategy = new workbox.strategies[entry.handler](strategyOptions)