Service worker fetch Particular data

main.js

// Make Sure service work is supported
if('serviceWorker' in navigator){
console.log('Service work is supported');
window.addEventListener('load', ()=>{
navigator.serviceWorker.register('./sw_cached_pages.js')
.then(reg =>console.log("Service Worker: Registered"))
.catch(err => console.log(`Service Worker: Error : ${err}`))
})
}

sw_cached_pages.js

// Caches Datas
const cacheName = "v2";
const assets =[
'/css/cui-standard.min.css',
'/css/grapes.min.css',
'/grapes.min.js',
'/img/favicon.png'
]

// call install Events
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(assets);
})
);
});


// call Activate Events
self.addEventListener('activate', e => {
console.log("ServiceWorker: Activated");
e.waitUntil(
caches.keys().then(cacheNames=>{
return Promise.all(
cacheNames.map(cache=>{
console.log(cache);
if(cache !== cacheName){
console.log("SeriveWorkder: Cleaning Old Caches")
return caches.delete(cache);
}
})
)
})
)
});

// Call Fetch Event
// Network falling back to the cache
self.addEventListener('fetch', e=>{
console.log("ServiceWroker: Fetching");
e.respondWith(
fetch(e.request).catch(()=>caches.match(e.request))
)
})


Comments

Popular posts from this blog

Module Bundel

Power of async and Promise