Как я могу исключить некоторые URL из сервисного работника с помощью create-реагировать на приложение?

Question

У меня есть приложение, использующее create-реакции-приложение и сервис-работник, сгенерированные при сборке.

Я проверил много вопросов и статей, но до сих пор не нашел подходящего ответа.

Каков наилучший способ добавить что-то вроде urlBlockList для работника службы создания-реакции-приложения?

---

Я думаю, react eject - не самое подходящее решение

Answer 1

Вот решение, которое работает с CRA 3:

1. Добавьте response-app-rewired к вашему проекту, например: yarn add react-app-rewired --save-dev
2. Заменить react-scripts в разделе scripts вашего package.json с react-app-rewired
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;
};

Приведенная выше конфигурация исключает URL-адреса с /oauth2/authorization/ и /login/oauth2/ из работника службы.

Answer 2

Решено

Лучшее решение, которое я нашел - используйте https://github.com/liuderchi/sw-precache-cra и добавьте нежелательные URL-адреса в пользовательский sw-config

Пример:

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