Im trying to make a service worker for my react app and am just playing around with stuff. I am getting undefined returned to me when i use cache.match yet when i use cache.matchAll i get all of the response objects and im not sure as to why. Im thinking it has something to do with the fact there are links in the page im caching but am not sure.
const cacheName = 'v2'
const cacheFiles = ['http://localhost:3000/index.html']
self.addEventListener('install',(e)=>{
console.log('installed');
e.waitUntil(
caches
.open(cacheName)
.then(cache => {
self.skipWaiting();
return cache.addAll(cacheFiles);
})
)
})
self.addEventListener('activate',(e)=>{
console.log('activated');
})
self.addEventListener('fetch',(e)=>{
console.log(e.request);
e.waitUntil(
caches.open(cacheName).then(cache => {
cache.match(e.request).then(res => {
console.log('The response',res);
return test
})
})
)
})
The fetch requests include files other than just the index.html because its a react app and things like the bundle.js is also being requested for.
The problem was i was caching a url that didnt match the request name