Service Workers: Offline-First Architecture | DevPrep

Service Workers: Offline-First Architecture | DevPrep

// Registration
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(reg => console.log("SW registered", reg.scope));
}

// sw.js - Install event
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("v1").then(cache =>
      cache.addAll(["/", "/index.html", "/styles.css", "/app.js"])
    )
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open("v1").then(async (cache) => {
      const cached = await cache.match(event.request);
      const fetched = fetch(event.request).then(response => {
        cache.put(event.request, response.clone());
        return response;
      });
      return cached || fetched;
    })
  );
});