From 77187cd1b453a34c77fe90d262bc0730c4273381 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 20 Dec 2020 16:02:10 +0100 Subject: [PATCH 1/5] fix: add details and handle cors issue with chrimium --- templates/workbox/sw.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/templates/workbox/sw.js b/templates/workbox/sw.js index 847ec174..9e8c869c 100644 --- a/templates/workbox/sw.js +++ b/templates/workbox/sw.js @@ -52,6 +52,26 @@ function precacheAssets(workbox, options) { function runtimeCaching(workbox, options) { + const requestInterceptor = { + requestWillFetch({ request }) { + if (request.cache === 'only-if-cached' && request.mode === 'no-cors') { + request = new Request(request.url, { ...request, 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' @@ -59,6 +79,8 @@ function runtimeCaching(workbox, options) { 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) From c0ed7cd84e460c9e4ab91e507a5137e592084c5a Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 20 Dec 2020 16:13:27 +0100 Subject: [PATCH 2/5] simplify --- templates/workbox/sw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/workbox/sw.js b/templates/workbox/sw.js index 9e8c869c..0cead1d9 100644 --- a/templates/workbox/sw.js +++ b/templates/workbox/sw.js @@ -55,7 +55,7 @@ function runtimeCaching(workbox, options) { const requestInterceptor = { requestWillFetch({ request }) { if (request.cache === 'only-if-cached' && request.mode === 'no-cors') { - request = new Request(request.url, { ...request, mode: 'no-cors' }) + return new Request(request.url, { ...request, mode: 'no-cors' }) } return request }, From 46f36754025218dc6194fc0befe2ada0fd90b09e Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 20 Dec 2020 16:15:56 +0100 Subject: [PATCH 3/5] fix: avoid using string templates due to lodassh template incompat --- templates/workbox/sw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/workbox/sw.js b/templates/workbox/sw.js index 0cead1d9..56169bfb 100644 --- a/templates/workbox/sw.js +++ b/templates/workbox/sw.js @@ -61,7 +61,7 @@ function runtimeCaching(workbox, options) { }, fetchDidFail(ctx) { ctx.error.message = - `[workbox] Network request for '${ctx.request.url}' threw an error: ` + ctx.error.message + '[workbox] Network request for ' + ctx.request.url + ' threw an error: ' + ctx.error.message console.error(ctx.error, 'Details:', ctx) }, handlerDidError(ctx) { From 3ce5d1cf6d213b177e53746a075de79fa8cf1498 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 20 Dec 2020 16:16:03 +0100 Subject: [PATCH 4/5] test: update snapshot --- test/__snapshots__/pwa.test.js.snap | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/test/__snapshots__/pwa.test.js.snap b/test/__snapshots__/pwa.test.js.snap index 6e9fd5a6..d4d1ac6a 100644 --- a/test/__snapshots__/pwa.test.js.snap +++ b/test/__snapshots__/pwa.test.js.snap @@ -156,6 +156,26 @@ 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, 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' @@ -163,6 +183,8 @@ function runtimeCaching(workbox, options) { 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) From dcb519fb099fd031f6fc933bf5edd78127194700 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Sun, 20 Dec 2020 16:19:46 +0100 Subject: [PATCH 5/5] fix: explicitly set cache to default --- templates/workbox/sw.js | 2 +- test/__snapshots__/pwa.test.js.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/workbox/sw.js b/templates/workbox/sw.js index 56169bfb..039fd0d7 100644 --- a/templates/workbox/sw.js +++ b/templates/workbox/sw.js @@ -55,7 +55,7 @@ function runtimeCaching(workbox, options) { const requestInterceptor = { requestWillFetch({ request }) { if (request.cache === 'only-if-cached' && request.mode === 'no-cors') { - return new Request(request.url, { ...request, mode: 'no-cors' }) + return new Request(request.url, { ...request, cache: 'default', mode: 'no-cors' }) } return request }, diff --git a/test/__snapshots__/pwa.test.js.snap b/test/__snapshots__/pwa.test.js.snap index d4d1ac6a..1abb6ab0 100644 --- a/test/__snapshots__/pwa.test.js.snap +++ b/test/__snapshots__/pwa.test.js.snap @@ -159,7 +159,7 @@ function runtimeCaching(workbox, options) { const requestInterceptor = { requestWillFetch({ request }) { if (request.cache === 'only-if-cached' && request.mode === 'no-cors') { - return new Request(request.url, { ...request, mode: 'no-cors' }) + return new Request(request.url, { ...request, cache: 'default', mode: 'no-cors' }) } return request },