javascript - How do I exclude url's from service worker scope in create react app, without having to eject?

Question

I need a way to exclude URLs from a service-worker scope in create-react-app without having to eject. The service-worker is being generated and I cannot see any way how I could change this functionality without having to eject.

Answer 1

Here is my solution.

Create a script outside of the src/ directory called rebuild-service-worker.js, with the following contents:

"use strict";
const FS = require("fs");
let text = FS.readFileSync("./build/service-worker.js").toString();
const start = text.indexOf("blacklist: [");
const end = text.indexOf("
", start) - 2;
text = text.substring(0, end) + ",/^\/admin/" + text.substring(end);
FS.writeFileSync("./build/service-worker.js", text);

As you can see, it adds a new item to the blacklist: [] array that is part of the Workbox configuration.

Then, in your package.json build script, simply call it after react-scripts build like this:

  "scripts": {
    "build": "react-scripts build && node ./rebuild-service-worker",
    ...