Mi primer código es:

 const FALLBACK_HTML_URL = '/offline.html'; let urlHandler = new NetworkFirst({ cacheName: 'html' }); registerRoute( ({request}) => true, ({event}) => { return urlHandler.handle({event}) .then((response) => { return response || caches.match(FALLBACK_HTML_URL); }) .catch(() => caches.match(FALLBACK_HTML_URL)); } );

Entonces, cuando instalo el PWA y lo ejecuto en modo fuera de línea, el resultado es: This site can't be reached

Así que cambié NetworkFirst a CacheFirst . Mismo resultado: This site can't be reached

Tengo dos problemas:

1. No almacena en caché las páginas y no las carga en modo fuera de línea.
2. Si no ha almacenado en caché las páginas, debería haber devuelto el respaldo, ¿no es así? No muestra la página sin conexión que es /offline.html .

Arreglé el segundo con (aunque no estoy seguro si es una forma apropiada):

 const CACHE_NAME = 'offline-html'; self.addEventListener('install', (event) => { event.waitUntil((async () => { const cache = await caches.open(CACHE_NAME); await cache.add(new Request(FALLBACK_HTML_URL, {cache: 'reload'})); })()); }); self.addEventListener('activate', (event) => { event.waitUntil((async () => { console.log(self.registration) if ('navigationPreload' in self.registration) { await navigationPreload.enable(); } })()); }); self.addEventListener('fetch', (event) => { if (event.request.mode === 'navigate') { event.respondWith((async () => { try { const preloadResponse = await event.preloadResponse; if (preloadResponse) { return preloadResponse; } return await fetch(event.request); } catch (error) { const cache = await caches.open(CACHE_NAME); return await cache.match(FALLBACK_HTML_URL); } })()); } });

¿Cómo puedo cargar las páginas que se almacenan en caché en modo sin conexión? ¿Y si el caché está vacío para cargar la página offline.html en modo fuera de línea? ¿Y cuando NO está en modo fuera de línea para cargar desde el servidor?