I am back with a working service worker. The article covers caching data and fetching cached data in a Progressive Web App, which were today's lessons.
To cache data you have to declare two variables, one holds the cache name and the other holds the data/files to be cached (should be an array of files).
const cacheName = 'cache-v1';
const cacheResources = [
'index.js',
'style.css',
]
Caching resources/data:
self.addEventListener("install", event => {
console.log('Service Worker install event');
event.waitUntil(
caches.open(cacheName)
.then(cache => {
console.log("Service Worker: Caching files");
return cache.addAll(cacheResources );
})
.catch(err => console.log(err))
);m
});
Code Explained:
Self points to the global scope which in this case is the service worker. You attach an event listener which listens for the install event, opens: .open()
cache storage with the declared cache name and adds all the files addAll()
.
Fetching data:
self.addEventListener("fetch", event => {
console.log('Sw: fetching');
event.respondWith(caches.match(event.request)
.then(cachedResponse => {
return cachedResponse || fetch(event.request)
}))
})
Code Explained:
To fetch data you'll listen for the fetch event and check if the requested data matches the cached data: caches.match()
. If the data matches send back the data if not make a network request. This should be within respondWith()
function which prevents the default browsers fetch handling.
That's it for Day 67
Let's do this again tomorrow
Top comments (0)