React Service Worker fetch 事件监听器永远不会为外部 API 请求执行

Question

我正在使用 React 创建一个 PWA。

我的 Service Worker 似乎工作正常，除了 fetch 事件侦听器，当使用 fetch API 在我的 React 应用程序中触发 GET HTTP 请求时，它不会执行从 Web 上的外部 API 获取数据。

我应该把我的 fetch 事件监听器放在哪里？

它适用于外部请求还是仅适用于对应用程序一部分文件的请求？
如果您发现下面我的代码有任何问题，请告诉我。

我正在使用 create-react-app 启动新项目时提供的样板 Service Worker 文件。

---

这是我的代码：

（执行永远不会进入window.addEventListener('fetch', ...)部分）

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {

              window.addEventListener('fetch', (event) => {
                event.respondWith(
                  caches.match(event.request)
                    .then((response) => {
                      if (response) {
                        return response
                      }
                      return fetch(event.request).then(response => { 
                        caches.open('fetch').then((cache) => {
                          cache.put(event.request, response.clone());
                        });
                        return response;
                      })
                    }
                  )
                );
              });

              console.log('New content is available; please refresh.');
            } else {
              // static files caching
              cacheStaticFiles();

              // external api data caching
              cacheApiData();

              // At this point, everything has been precached
              console.log('Content is now cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

Answer 1

所以我遇到了这个问题。事实证明，CRA 实际上将该服务工作者编译到您的构建文件夹中的不同 service-worker.js 文件中，并且已注册。如果您将代码附加到该文件的末尾，它将起作用，但令人讨厌的是，您必须在每次构建时都这样做。

我正在使用这个插件：https://www.npmjs.com/package/cra-append-sw 来自动附加它。

目前它有这个小问题，需要使用不同的选项运行它：https://github.com/tszarzynski/cra-append-sw/issues/18