如何使用 create-react-app 从服务人员中排除一些 url？答案

【问题标题】：How can i exclude some urls from service worker with create-react-app?如何使用 create-react-app 从服务人员中排除一些 url？
【发布时间】：2018-10-19 11:57:05
【问题描述】：

我的应用程序使用 create-react-app 和 service-worker 在构建时生成。

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

将类似 urlBlockList 的内容添加到 create-react-app service worker 的最佳做法是什么？

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

【问题讨论】：

你看过stackoverflow.com/questions/45663796/…吗？
是的，但是 service-worker 代码包含非常明确的短语“不要修改此生成的代码”，这就是我认为的原因 - 这不是最佳实践方式。顺便说一句，它被缩小了
我在此处的 create-react-app 构建过程之后自动修改了 build/service-worker.js 代码 - stackoverflow.com/questions/49776235/… 应该没问题。该文件发布到生产环境后，将不会再对其进行任何修改。

标签： reactjs service-worker create-react-app

【解决方案1】：

已解决

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

例子：

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

【讨论】：

【解决方案2】：

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

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

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

上面的配置从 service-worker 中排除了带有 /oauth2/authorization/ 和 /login/oauth2/ 的 url。

【讨论】：