我如何使用 create-react-app 从 service worker 中排除一些 url？

Question

我有使用 create-react-app 的应用程序和构建时生成的服务工作者。

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

向 create-react-app service worker 添加类似 urlBlockList 的最佳实践是什么？

我认为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 的解决方案：

将 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。

我如何使用 create-react-app 从 service worker 中排除一些 url？

How can i exclude some urls from service worker with create-react-app?

reactjs

service-worker

create-react-app