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

Question

我有使用create-react-app和service-worker生成的应用程序。

我检查了很多问题和文章，但仍然找不到可用的答案。

将urlBlockList之类的内容添加到create-react-app服务工作者的最佳实践是什么？

---

我认为react eject不是最合适的解决方案

Answer 1

解决

我找到的最佳解决方案-使用https://github.com/liuderchi/sw-precache-cra并将不需要的URL添加到自定义sw-config

例：

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

Answer 2

这是适用于CRA 3的解决方案：

1. 将react-app-rewired添加到您的项目中，例如： yarn add react-app-rewired --save-dev
2. 用react-app-rewired替换package.json scripts部分中的react-scripts
3. 在项目的根目录中放置一个名为config-overrides.js的文件。 在此文件中，您可以将条目添加到服务工作者配置。 例如：

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;
};

上面的配置从服务工作者处排除带有/oauth2/authorization/和/login/oauth2/ url。