El siguiente código JavaScript recupera algunos textos del servidor mediante el uso de Fetch API.
fetch("index.php?user_id=1234", { method: "GET" }).then(function(response) { return response.text(); }).then(function(output) { document.getElementById("output").innerHTML = output; });Pero durante los errores de red, recupera la página sin conexión (offline.html) debido al trabajador del servicio.
"use strict"; self.addEventListener("install", function() { self.skipWaiting(); }); self.addEventListener("activate", function(activation) { activation.waitUntil( caches.keys().then(function(cache_names) { for (let cache_name of cache_names) { caches.delete(cache_name); }; caches.open("client_cache").then(function(cache) { return cache.add("offline.html"); }); }) ); }); self.addEventListener("fetch", function(fetching) { fetching.respondWith( caches.match(fetching.request).then(function(cached_response) { return cached_response || fetch(fetching.request); }).catch(function() { return caches.match("offline.html"); }) ); });Quiero informar a la solicitud de recuperación sobre el error de red.
Y no quiero usar window.navigator . ¿Entonces Que puedo hacer?
(Prefiero las soluciones de vainilla).
Debe estructurar el controlador de eventos de fetch de su trabajador de servicio para que solo devuelva offline.html cuando haya un error de red/pérdida de caché y la solicitud original sea para una navegación. Si la solicitud original no es una navegación, responder con offline.html (como ha visto) dará como resultado la recuperación de HTML para cada falla.
self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request); }).catch((error) => { if (event.request.mode === 'navigate') { return caches.match('offline.html'); } throw error; }) ); });