farmOS / field-kit

A modular, offline-first companion app to farmOS.
https://farmOS.org
GNU General Public License v3.0
59 stars 38 forks source link

Fix Workbox precaching error on Netlify deployments #469

Closed jgaehring closed 2 years ago

jgaehring commented 2 years ago

I just noticed our first (minor) bug in the alpha deployment. After adding a _redirects file to handle the caveats outlined in #460, we're now getting the following error in the console every time the page loads:

PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://develop.farmos.app/_redirects?__WB_REVISION__=6a02faf7ea2a9584134ffe15779a0e44","status":404}]
    at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)
    at async Promise.all (index 0)
    at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)

It's not really breaking anything, the redirects still work as expected, but it's noise we shouldn't have in the console. Looks like there's a simple fix we can apply to how we have workbox-webpack-plugin configured. We should just need to add an exclude option where we generate our service worker:

new WorkboxPlugin.GenerateSW({
  runtimeCaching: [{
    urlPattern: /.*\.(?:js|css)$/,
    handler: 'StaleWhileRevalidate',
    exclude: ['/_redirects/']
  }]
}),

I'm still not 100% on how exclude works, since the Workbox docs just point to Webpack's docs, which are typically abstruse, but I think it should work fine with the trailing slash, no need for wildcards or anything.

Basing this on: https://stackoverflow.com/a/57982417/1549703

jgaehring commented 2 years ago

Added a commit that hopefully resolves this, but I'll wait til I have a new preview ready on Netlify to test it out.

jgaehring commented 2 years ago

We should just need to add an exclude option where we generate our service worker

Hmm, well that caused the build to fail for the preview deployment of #472, with the following error:

8:56:35 AM: (node:1723) UnhandledPromiseRejectionWarning: ValidationError: child "runtimeCaching" fails because ["runtimeCaching" at position 0 fails because ["exclude" is not a supported parameter.]]

I think the issue is that added the exclude option to the runtimeCaching parameters, whereas it should have been one level up in the general options for GenerateSW, like so:

new WorkboxPlugin.GenerateSW({
  runtimeCaching: [{
    urlPattern: /.*\.(?:js|css)$/,
    handler: 'StaleWhileRevalidate',
  }],
  exclude: ['/_redirects/'],
}),

Gonna try fixing that with a local build first, and if it works I'll add the commit to the PR and see if the Netlify build works. :crossed_fingers:

jgaehring commented 2 years ago

Well, that fixed the build-time error, but the original runtime error is still popping up. I think I need to replace the string condition with some regex:

new WorkboxPlugin.GenerateSW({
  runtimeCaching: [{
    urlPattern: /.*\.(?:js|css)$/,
    handler: 'StaleWhileRevalidate',
  }],
  exclude: [/.*_redirects.*\w/],
}),

My guess is the query parameters are preventing the string condition from matching, but the regex should work. :crossed_fingers: :crossed_fingers:

jgaehring commented 2 years ago

Hmm, still not working. I found a fairly similar issue outlined here, which fixed it with regex pretty close to what I have, but not matching the whole word, just /_redirects/, so I'll try that now...

jgaehring commented 2 years ago

just /_redirects/, so I'll try that now...

Phew, finally worked! Closing.