Setting service worker to exclude certain urls only

Question

I built an app using create react which by default includes a service worker. I want the app to be run anytime someone enters the given url except when they go to /blog/, wh

Answer 1

If you are using or willing to use customize-cra, the solution is quite straight-forward.

Put this in your config-overrides.js:

const { adjustWorkbox, override } = require("customize-cra");

module.exports = override(
  adjustWorkbox(wb => 
    Object.assign(wb, {
      navigateFallbackWhitelist: [
        ...(wb.navigateFallbackWhitelist || []),
        /^\/blog(\/.*)?/,
      ],
     })
   )
);

Note that in the newest workbox documentation, the option is called navigateFallbackAllowlist instead of navigateFallbackWhitelist. So, depending on the version of CRA/workbox you use, you might need to change the option name.

The regexp /^/blog(/.*)?/ matches /blog, /blog/, /blog/abc123 etc.