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

Question

I'm creating a PWA using React.

My Service Worker seems to be working fine except for the fetch event listener, which does not execute when a GET HTTP request fires within my React app using the fetch API to get data from an external API on the web.

Where should I be placing my fetch event listener?

Does it work for external requests or only for requests to files that are part of the app?
Please let me know if you notice any issues with my code below.

I'm using the boilerplate Service Worker file that comes when using create-react-app to start a new project.

---

Here is my code:

(The execution never gets into the window.addEventListener('fetch', ...) part)

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

So I ran into this issue. It turns out that CRA actually compiles that service worker into a different service-worker.js file in your build folder, and that gets registered. If you append your code to the end of that file it will work, but annoyingly you'd have to do that on every build.

I'm using this addin: https://www.npmjs.com/package/cra-append-sw to append it automatically instead.

At present it had this minor issue, which requires running it with a different option: https://github.com/tszarzynski/cra-append-sw/issues/18