PWA and Service Worker: Making Your Web App Feel Native

What is a Progressive Web App (PWA)?

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.
Ref: Progressive web apps

• Reliable: loads instantly, even on flaky networks or offline.
• Fast: responds quickly to user interactions.
• Engaging: installable on the home screen, can send push notifications.

The Web App Manifest

// language: javascript
{
  "name": "My Blog",
  "short_name": "Blog",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0f0f0f",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// language: html
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0f0f0f" />

What is a Service Worker?

// language: text
Your App ── fetch() ──> Service Worker ── maybe ──> Network
                                │
                                └──── or ──> Cache

Registering a Service Worker

// language: javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then(reg => console.log('SW registered', reg.scope))
    .catch(err => console.error('SW failed', err));
}

• Putting SW in /assets/sw.js: scope becomes /assets/ (almost useless) 
•  Expecting /blog/sw.js to control the entire site 
•  Forgetting leading /: relative path issues

•  Fetches /sw.js
•  Compares it with the cached version 
•  If byte-different, it will trigger an update

Service Worker Lifecycle

Install

// language: javascript
const CACHE = 'blog-v1';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE).then(cache => cache.addAll(['/', '/offline.html']))
  );
  self.skipWaiting(); // activate immediately
});

// language: javascript
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
    )
  );
  self.clients.claim();
});

// language: javascript
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => cached || fetch(event.request))
  );
});

• Cache First: Serve cache, fall back to network
• Network First: Try network, fall back to cache
• Stale While Revalidate: Return cache immediately, update in background
• Network Only: Always hit the network 

• You bump the cache name: changing blog-v1 to blog-v2 means the activate event deletes the old one on the next deploy. This is the standard pattern.
• The user clears browser data: DevTools or browser settings.
• Browser storage pressure: if the device is critically low on disk, the browser may evict your cache. No guarantee of permanence.
• You delete it explicitly: caches.delete('blog-v1') or cache.delete(specificRequest)

Conclusion