Seeing if a request succeeds from within a service worker

Question

I have the following code in my service worker:

self.addEventListener('fetch', function (event) {
  var fetchPromise = fetch(event.request);

  fetchPromise.then(function () {
    // do something here
  });

  event.respondWith(fetchPromise);
});

However, it's doing some weird stuff in the dev console and seems to be making the script load asynchronously instead of synchronously (which in this context is bad).

Is there any way to listen for when a request is completed without calling fetch(event.request) manually?

For example:

// This doesn't work
self.addEventListener('fetch', function (event) {
  event.request.then(function () {
    // do something here
  });
});

Answer 1

If you want to ensure that your entire series of actions are performed before the response is returned to the page, you should respond with the entire promise chain, not just the initial promise returned by fetch.

self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request).then(function(response) {
    // The fetch() is complete and response is available now.
    // response.ok will be true if the HTTP response code is 2xx
    // Make sure you return response at the end!
    return response;
  }).catch(function(error) {
    // This will be triggered if the initial fetch() fails,
    // e.g. due to network connectivity. Or if you throw an exception
    // elsewhere in your promise chain.
    return error;
  }));
});