Service Workers – Offline Caching & PWA Basics

Service workers sit between the network and pages.

self.addEventListener('install', e => {
  e.waitUntil(caches.open('v1').then(cache => cache.addAll(['/','/index.html','/style.css'])));
});
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

• Lifecycle – install → activate → fetch.
• Register in main script: navigator.serviceWorker.register('/sw.js').

---

Example: Simple offline page

if('serviceWorker' in navigator){
  navigator.serviceWorker.register('/sw.js').then(()=>console.log('SW registered'));
}