PWA (Progressive Web Apps)

Progressive Web Apps combine the reach of the web with the capabilities of native apps. They're web applications that use modern browser features to deliver app-like experiences - including offline support, push notifications, and home screen installation.

Core Technologies

Service Workers

JavaScript that runs in the background, enabling:

• Offline functionality
• Background sync
• Push notifications
• Cache management

Web App Manifest

JSON file defining app metadata:

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0066cc",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

HTTPS

Required for service workers and installation.

Service Worker Example

// sw.js
const CACHE_NAME = 'v1';
const ASSETS = ['/', '/styles.css', '/app.js'];

// Install: cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
  );
});

// Fetch: serve from cache, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

PWA Capabilities

Feature	Support
Offline access	Excellent
Push notifications	Good (not iOS Safari)
Home screen install	Excellent
Background sync	Good
File system access	Improving
Bluetooth/USB	Limited

PWA vs Native Apps

Aspect	PWA	Native
Distribution	URL, no app store	App stores
Updates	Instant	Store review
Development cost	Lower	Higher
Offline	Service workers	Full access
Device APIs	Limited	Full
Performance	Good	Best
Discoverability	SEO, links	Store search

What We Like

• Reach: No app store, just a URL
• Updates: Deploy instantly, no store approval
• Cost: One codebase for web and "app"
• Offline: Real offline capability with service workers
• Installable: Add to home screen like native

What We Don't Like

• iOS limitations: Safari has reduced PWA support
• API gaps: Some device features unavailable
• Discoverability: No app store presence
• User expectations: Less polished than native

Tools and Frameworks

Tool	Purpose
Workbox	Service worker library (Google)
Vite PWA Plugin	Easy PWA setup for Vite
Next.js PWA	PWA support for Next.js
Lighthouse	PWA auditing

Best Practices

1. Start with offline: Core experience should work offline
2. Cache strategically: App shell + dynamic content
3. Progressive enhancement: Works without service worker too
4. Test installation: Verify install prompts work
5. Audit with Lighthouse: Check PWA compliance

Related Concepts

• Offline-first: App works when network unavailable
• Local-first: Data lives locally, syncs to cloud
• IndexedDB: Client-side database for PWAs