He leído y creo entender:
La única de esas respuestas es que event.waitUntil() debe llamarse sincrónicamente desde el controlador de eventos. Que es lo que estoy haciendo a continuación (de hecho, es la única línea del controlador de eventos):
El error
Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The event handler is already finished.Ejemplo reproducible mínimo:
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) } Nota: parece correcto llamar a waitUntil varias veces (llamando a waitUntil en un sentido anidado para cachePut): MDN :
El método waitUntil() se debe llamar inicialmente dentro de la devolución de llamada del evento, pero luego se puede llamar varias veces, hasta que se asienten todas las promesas que se le pasaron.
TLDR: respondWith espera antes de finalizar el .event waitUntil espera antes de matar al trabajador del servicio.
Las diferencias entre respondWith y waitUntil parecen obvias al principio, pero el contexto es ligeramente diferente. Si uno usa respondWith , entonces waitUntil está implícito, es decir, no puede responder hasta respondWith se complete.
Originalmente, pasaría por alto el trabajador del servicio y no usaría respondWith en algunas situaciones, pero supongo que entonces no sabe que todavía estoy decidiendo si responder o no, y asume que el evento está hecho. Entonces, si deseo omitir el SW, solo return fetch(event.request) y uso respondWith en su lugar.
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 }