Serviceworker + upload progress

Uppy
1

When I integrated Uppy into my app, I was having trouble showing upload progress - the ‘upload-progress’ event would only fire at the beginning and the end of the upload, even for very large/slow files. The same exact Uppy code would work fine on a fresh app built from scratch.

After much time trying swapping everything in and out of my app I discovered that disabling the onFetch event of my Serviceworker caused it to start working again.

Here’s the event:

// Borrowed from https://github.com/TalAter/UpUp
function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/offline');
        }
      })
    })
  );
}
self.addEventListener('fetch', onFetch);

Does anyone know what this might be? What about this fetch method is blocking the progress event?

Things I’ve also tried:

  1. A simple XHR upload handler (such as this one) in the same place in my codebase works fine and does report the progress.
  2. Swapping out the Uppy backends (e.g. Tus vs Transloadit) and disabling all the plugins has no impact. I’m using the Dashboard UI rather than my own ProgressBar UI but I’ve also tried listening for the ‘upload-progress’ event on my Uppy core object and that also only reports at the start and the end of the upload.
2

Update: The following method does work. Any idea what about the differences might have caused the issue?

function onFetch(event) {
  event.respondWith(
    caches.match(event.request)
    .then(function(response) {
      // Cache hit - return response
      if (response) return response;
      // Fetch the page and return the offline page if it fails
      return fetch(event.request).catch(function (error) {
        return caches.match('/offline');
      })
    })
  );
}