Estoy siguiendo el tutorial de PWA y de la misma manera implementé el almacenamiento fuera de línea. Además del error especificado, recibí las siguientes advertencias
The FetchEvent for "https://localhost:7047/Shop/Catalog" resulted in a network error response: an object that was not a Response was passed to respondWith().Tengo un manifiesto web instalado con contenido:
{ "name": "To table", "short_name": "To table", "description": "Excellent marketplace", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "start_url": "/", "display": "standalone" }Tengo estas etiquetas en mi diseño y las imágenes correspondientes en carpetas específicas.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">Cometí un error en el código. Olvidé llamar al controlador de respondWith :
self.addEventListener(`fetch`, (e: any) => { e.respondWith((async () => { const r = await caches.match(e.request) if (r) { return r } const response = await fetch(e.request) const cache = await caches.open(cacheName) cache.put(e.request, response.clone()) return response })) })Correcto:
self.addEventListener(`fetch`, (e: any) => { e.respondWith((async () => { const r = await caches.match(e.request) if (r) { return r } const response = await fetch(e.request) const cache = await caches.open(cacheName) cache.put(e.request, response.clone()) return response })()) })