I made a web application and used a service worker in my application. Everything works fine when online. All files are cached when we launch the application for the first time. But I get this error when it shuts down.
Uncaught (in promise) TypeError: Failed to fetch
I do not know why this error occurs!
I used pwabuilder.com to add a workspace and manifest to the web application.
This is the pwabuilder-sw.js file:
self.addEventListener('install', function(event) { event.waitUntil(preLoad()); }); var preLoad = function() { console.log('[PWA Builder] Install Event processing'); return caches.open('pwabuilder-offline').then(function(cache) { console.log('[PWA Builder] Cached index and offline page during Install'); return cache.addAll([ '/manup.js', 'pwabuilder-sw-register.js', 'pwabuilder-sw.js', 'manifest.json', '/js/angular.min.js', '/js/script.js', '/js/materialize.min.js', '/css/materialize.min.css', '/css/style.css', '/offline.html', '/index.html' ]); }); } self.addEventListener('fetch', function(event) { console.log('The service worker is serving the asset.'); event.respondWith(checkResponse(event.request).catch(function() { return returnFromCache(event.request) })); event.waitUntil(addToCache(event.request)); }); var checkResponse = function(request) { return new Promise(function(fulfill, reject) { fetch(request).then(function(response) { if (response.status !== 404) { fulfill(response) } else { reject() } }, reject) }); }; var addToCache = function(request) { return caches.open('pwabuilder-offline').then(function(cache) { return fetch(request).then(function(response) { console.log('[PWA Builder] add page to offline' + response.url) return cache.put(request, response); }); }); }; var returnFromCache = function(request) { return caches.open('pwabuilder-offline').then(function(cache) { return cache.match(request).then(function(matching) { if (!matching || matching.status == 404) { return cache.match('offline.html') } else { return matching } }); }); };
This is the pwabuilder-sw-register.js file:
if (navigator.serviceWorker.controller) { console.log('[PWA Builder] active service worker found, no need to register') } else { //Register the ServiceWorker navigator.serviceWorker.register('pwabuilder-sw.js', { scope: './' }).then(function(reg) { console.log('Service worker has been registered for scope:'+ reg.scope); }); }
Any clues ?!
source share