Question

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

我的 Service Worker 似乎运行正常，但获取事件侦听器除外，该事件侦听器在使用获取API触发我的 React 应用中的GET HTTP请求触发时不执行从网络上的外部API获取数据。

我应该在哪里放置提取事件监听器？

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

我使用的是使用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

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

这是我的代码：

1 个答案: