javascript - React Service Worker 获取事件监听器从不为外部 API 请求执行

Question

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

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

Where should I be placing my fetch event listener?

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

我正在使用使用 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 编译为构建文件夹中的另一个 service-worker.js 文件，并进行了注册。如果您将代码附加到该文件的末尾，它会起作用，但令人恼火的是，您必须在每次构建时都这样做。

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

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