How can I listen to a request abort event inside a service-worker?

Question

I'm fetching some data with Axios and React inside a PWA. I programmed the abort-controller to abort calls if the same API is called twice while the first call is still in progress.

While the calls from the app to the service worker are regularly cancelled, the calls from service-worker to server are always fulfilled.

Here's an example:

 // app
  useEffect(() => {
    const controller = new AbortController();

    axios.get<any, IInstance[]>('/instances',
      { signal: controller.signal })
      .then(data => setInstancesState(data));

    return () => {
      controller.abort();
    };
  }, [foo]);

// service-worker
self.addEventListener("fetch", (event) => {
  const url = (new URL(event.request.url));
  console.log(event.request.signal.aborted); // Always false
  event.respondWith(fetch(event.request));
});

How can I intercept the request abortion from the app to the service-worker?

Answer 1

Axios makes XHR requests. Make sure XHR requests can intercept with all browsers.

Can Service Workers respond to synchronous XHR requests?

And I highly recommend using Axios with ReactQuery.

About the abort request in the service worker, I have to mention that it's controlled by an instance of AbortController in the useEffect, not in request.

You have to use addEventListener('abort', (event) => { }) or use your instance. But none of them are accessible in serviceWorker.

For more information, read:

abort event

aborted property