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

Question

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

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

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

---

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

Answer 1

已解决

我找到的最佳解决方案-使用https://github.com/liuderchi/sw-precache-cra 并将不需要的网址添加到自定义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-scripts的{​​{1}}部分的scripts替换为package.json
3. 在项目的根目录中放置一个名为react-app-rewired的文件。在此文件中，您可以将条目添加到服务工作者配置。例如：

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/的网址。