CODEWITHSUNDEEP
javascriptservice-worker
run_the_race
run_the_race

Reputation: 2418

Service Worker: The event handler is already finished (even though called synchronously from the event handler)

I have read and think I understand:

The just of those answers is that event.waitUntil() must be called synchronously from the event handler. Which is what I am doing below (in fact it is the only line of the event handler):

The Error

Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The event handler is already finished.

Min reproducible example:

self.addEventListener("fetch", (event) => event.waitUntil(handleFetch(event)));

async function handleFetch(event) {
    const response = await runFetch(event);
    event.respondWith(response);  // <---- here the error is raised
}

async function runFetch(event) {
    const response = await fetch(event.request.url);

    if (response.ok) {
        // Don't await cachePut, allow the response to be returned immediately first.
        // Then later it will perform the cachePut promise. Use waitUntil so the Service worker is not killed until the cachePut promise resolves.
        event.waitUntil(cachePut(event.request.url, response.clone()));
    }
    return response
}

async function cachePut(url, response) {
    const cache = await caches.open('my-cache');
    await cache.put(url, response)
}

Note: It seems okay to call waitUntil multiple times (calling waitUntil in a nested sense for cachePut): MDN:

The waitUntil() method must be initially called within the event callback, but after that it can be called multiple times, until all the promises passed to it settle.

Upvotes: 3

Views: 1669

Answers (1)

run_the_race
run_the_race

Reputation: 2418

TLDR: respondWith wait before ending the .event waitUntil wait before killing the service worker.

The differences between respondWith and waitUntil seem obvious at first, but the context is slightly different. If one uses respondWith, then waitUntil is implicit, i.e. can't respond until respondWith completes.

Originally I would bypass the Service worker and not use respondWith in some situations, but I guess then it doesnt know I am still figuring out whether to respond or not, and assumes the event is done. So if I wish to bypass the SW, I just return fetch(event.request), and use respondWith instead.

self.addEventListener("fetch", (event) => { event.respondWith(handleFetch2(event)) });

async function handleFetch2(event) {
    const response = await runFetch2(event);
    return response;
}

async function cachePut2(url, response) {
    const cache = await caches.open('my-cache');
    await cache.put(url, response)
}

async function runFetch2(event) {
    const response = await fetch(event.request.url);

    if (response.ok) {
        event.waitUntil(cachePut2(event.request.url, response.clone()));
    }
    return response
}

Upvotes: 2

Related Questions