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

Question

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.

Thanks for the comment. I added a code comment explaining why the cache put is not awaited. Wish to have the response returned immediately, and the cachePut to happen in the background later, but let the browser know not to kill the SW before it has finished the cache put. — run_the_race, Feb 09 '22 at 09:21
@T.J.Crowder Thanks for the clarification, I added an `await` inside `cachePut`, good find! — run_the_race, Feb 09 '22 at 09:27
:-) I take it that didn't solve the problem though. (I didn't really think it would, but you never know...) — T.J. Crowder, Feb 09 '22 at 09:27
@T.J.Crowder =) It didnt solve the problem, but probably prevented a second question! Thanks again! — run_the_race, Feb 09 '22 at 09:29
Instead of `event.waitUntil(cachePut(event.request.url, response.clone()))` could is also just write `await cachePut(...)`. As long as I return promises I would not need nested `waitUntil` right? — velop, Aug 02 '23 at 15:09

score 1 · Answer 1 · answered Feb 09 '22 at 09:56

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
}

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

1 Answers1