Reputation: 885
I have a PWA that isn't working offline. Online it work great but when I switch over to offline it doesn't do anything. I've suspect it's got something to do with my service-worker.js file -
var dataCacheName = 'sigmaApp';
var cacheName = 'sigmaApp';
var filesToCache = [
"/",
"./images/icons/icon-128x128.png",
"./images/icons/icon-144x144.png",
"./images/icons/icon-152x152.png",
"./images/icons/icon-192x192.png",
"./images/icons/icon-256x256.png",
"./images/create-how-boxes.png",
"./images/create-how-lines.png",
"./images/create-what-logo-1.png",
"./images/create-what-logo-2.png",
"./images/create-who-telkomsel.png",
"./images/create-who-volvo.png",
"./images/create-who-windstream.png",
"./images/create-why-hand.png",
"./images/create-why-rock.png",
"./images/deliver-what-logo-1.png",
"./images/deliver-what-logo-2.png",
"./images/deliver-why-road-orange.png",
"./images/deliver-why-roads.png",
"./images/sell-how-phone.png",
"./images/sell-how-sphere.png",
"./images/sell-what-logo-1.png",
"./images/sell-what-logo-1.png",
"./images/sell-what-logo-2.png",
"./images/sell-why-block.png",
"./images/sell-why-hand.png",
"./images/telkomsel-logo.png",
"./scripts",
"./index.html",
"./manifest.json",
"./scripts/jquery-3.3.1.js",
"./scripts/swiper.min.js",
"./scripts/swiper.min.js.map",
"./scripts/tube-animation.min.js",
"./scripts/typeit.min.js",
"./scripts/scripts.js",
"./service-worker.js",
"./styles",
"./styles/style.min.css",
"./videos/create-what-infographic-1.mp4",
"./scripts/swiper.min.js.map"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[Service Worker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
My page seems to error out saying - Uncaught (in promise) TypeError: Request failed in my service-worker.js file in my install event listener. I feel like it's going through the filesToCache array and erroring out there.
Does anyone have any idea on what I'm doing wrong?
Upvotes: 3
Views: 711
Reputation: 885
Turns out this was my fault. I had accidentally added two files that were the same so it was erroring out because of that.
"./images/sell-what-logo-1.png",
"./images/sell-what-logo-1.png",
Hopefully this helps someone else
Upvotes: 1