I’m following PWA tutorial and the same way implemented offline storage. In addition to the specified error, I got the following warnings
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().
I have web manifest installed with content:
{ "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" }
I have these tags in my layout and corresponding images in specified folders.
<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">
Advertisement
Answer
I made a mistake in code. I forgot to call handler of 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 })) })
Correct:
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 })()) })