Service Workers & PWAs — Make Your Site Work Offline

A Progressive Web App installs to the home screen and works offline — huge for Indian students on patchy data. The core is a service worker: a script that intercepts your site's network requests.

Register + cache

// main.js
if ("serviceWorker" in navigator)
  navigator.serviceWorker.register("/sw.js");

// sw.js — cache-first strategy
const CACHE = "site-v1";
const ASSETS = ["/", "/css/style.css", "/js/main.js", "/offline.html"];

self.addEventListener("install", (e) =>
  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)))
);

self.addEventListener("fetch", (e) =>
  e.respondWith(
    caches.match(e.request)
      .then((hit) => hit || fetch(e.request))
      .catch(() => caches.match("/offline.html"))
  )
);

Make it installable

HTTPS + a web manifest with icons + a registered service worker → browsers offer "Add to Home Screen". Standalone display mode = no browser UI, feels native.

The gotchas

• Bump the cache name (site-v2) to ship updates — old caches serve stale files forever otherwise
• DevTools → Application tab shows/clears service workers ("why isn't my change showing" lives here)
• Cache-first for assets, network-first for API data — don't cache what must be fresh

A PWA on your resume — with an offline demo — is a genuine differentiator for freshers.