如何使用create-react-app从服务工作者中排除一些网址？

Question

I have app using create-react-app and service-worker generated on-a-build.

I checked out a lot of issues and articles, but still not found usable answer.

What is a best practice to add something like urlBlockList to create-react-app service worker?

---

I think react eject is not the most appropriate solution

Answer 1

Resolved

Best solution that I found - use https://github.com/liuderchi/sw-precache-cra and add unwanted urls to custom sw-config

Example:

// sw-config.js
module.exports = {
  runtimeCaching: [
    {
      urlPattern: '/unwantedurl',
      handler: 'networkFirst',
    },
  ],
};

Answer 2

Here's a solution that works with CRA 3:

1. Add react-app-rewired to your project, eg: yarn add react-app-rewired --save-dev
2. Replace react-scripts in the scripts section of your package.json with react-app-rewired
3. Place a file called config-overrides.js in the root of your project. In this file you can add entries to the service-worker configuration. For example:

module.exports = function override(config, env) {
  const swPrecacheConfig = config.plugins.find(
     plugin => plugin.constructor.name === "GenerateSW"
  );
  // Prevent some URLs from being cached by the service worker
  const blacklist = swPrecacheConfig.config.navigateFallbackBlacklist;
  blacklist.push(/\/oauth2\/authorization\//);
  blacklist.push(/\/login\/oauth2\//);
  return config;
};

The configuration above excludes urls with /oauth2/authorization/ and /login/oauth2/ from the service-worker.