// main.js
const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;
(async () => {
  const worker = new Worker('./worker.js');
  // create a stream to send the input to the worker
  const { writable, readablePort } = new RemoteWritableStream();
  // create a stream to receive the output from the worker
  const { readable, writablePort } = new RemoteReadableStream();
  // transfer the other ends to the worker
  worker.postMessage({ readablePort, writablePort }, [readablePort, writablePort]);

  const response = await fetch('./some-data.txt');
  await response.body
    // send the downloaded data to the worker
    // and receive the results back
    .pipeThrough({ readable, writable })
    // show the results as they come in
    .pipeTo(new WritableStream({
      write(chunk) {
        const results = document.getElementById('results');
        results.appendChild(document.createTextNode(chunk)); // tadaa!
      }
    }));
})();

// worker.js
const { fromReadablePort, fromWritablePort } = RemoteWebStreams;
self.onmessage = async (event) => {
  // create the input and output streams from the transferred ports
  const { readablePort, writablePort } = event.data;
  const readable = fromReadablePort(readablePort);
  const writable = fromWritablePort(writablePort);

  // process data
  await readable
    .pipeThrough(new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(process(chunk)); // do the actual work
      }
    }))
    .pipeTo(writable); // send the results back to main thread
};

What you're trying to do is known as the "Application Shell" architectural pattern.

The trick is to have your service worker's fetch handler check to see whether an incoming request is a navigation (event.request.mode === 'navigate'), and if so, respond with the cached App Shell HTML (which sounds like /index.html in your case).

A generic way of doing this would be:

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(caches.match('/index.html'));
  } else {
    // Your other response logic goes here.
  }
});

This will cause your service worker to behave in a similar fashion to how you're web server is already configured.

/**
 * @param {string} headerNameSrc Header to get the new value from
 * @param {string} headerNameDst Header to set based off of value in src
 */
const headerNameSrc = "foo" //"Orig-Header"
const headerNameDst = "Last-Modified"

async function handleRequest(request) {
  /**
   * Response properties are immutable. To change them, construct a new
   * Response and pass modified status or statusText in the ResponseInit
   * object. Response headers can be modified through the headers `set` method.
   */
  const originalResponse = await fetch(request)

  // Change status and statusText, but preserve body and headers
  let response = new Response(originalResponse.body, {
    status: 500,
    statusText: "some message",
    headers: originalResponse.headers,
  })

  // Change response body by adding the foo prop
  const originalBody = await originalResponse.json()
  const body = JSON.stringify({ foo: "bar", ...originalBody })
  response = new Response(body, response)

  // Add a header using set method
  response.headers.set("foo", "bar")

  // Set destination header to the value of the source header
  const src = response.headers.get(headerNameSrc)

  if (src != null) {
    response.headers.set(headerNameDst, src)
    console.log(
      `Response header "${headerNameDst}" was set to "${response.headers.get(
        headerNameDst,
      )}"`,
    )
  }
  return response
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

I wonder how can we identify issues like this when they occur

Immigrant Key Workers: Their Contribution to Europe’s COVID-19 Response. COVID-19 and the Labor Market. (n.d.). IZA – Institute of Labor Economics. Retrieved August 7, 2020, from https://covid-19.iza.org/publications/dp13178/

Quinn, A. E., Trachtenberg, A. J., McBrien, K. A., Ogundeji, Y., Souri, S., Manns, L., Rennert-May, E., Ronksley, P., Au, F., Arora, N., Hemmelgarn, B., Tonelli, M., & Manns, B. J. (2020). Impact of payment model on the behaviour of specialist physicians: A systematic review. Health Policy, 124(4), 345–358. https://doi.org/10.1016/j.healthpol.2020.02.007

Johnson, S. U., Ebrahimi, O. V., & Hoffart, A. (2020, May 20). Level and Predictors of PTSD Symptoms Among Health Workers and Public Service Providers During the COVID-19 Outbreak. https://doi.org/10.31234/osf.io/w8c6p

Rotman, D. (2020 April 8). Stop covid or save the economy? We can do both. MIT Technology Review. https://www.technologyreview.com/2020/04/08/998785/stop-covid-or-save-the-economy-we-can-do-both/