Progressive Web Apps

Service workers, offline support, push notifications, and app manifest.

Overview

PWAs provide native app-like experiences with offline capabilities and push notifications.

Key Concepts

• Service Worker — Background script for caching and offline support
• App Manifest — JSON file defining app metadata
• Cache API — Store responses for offline use
• Push Notifications — Re-engage users with server push
• Workbox — Google's library for service worker utilities

Code Examples

// Register service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// sw.js
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  ({ url }) => url.pathname.startsWith('/api'),
  new CacheFirst({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 3600 })
    ]
  })
);

// React component for push notifications
function NotificationManager() {
  const [permission, setPermission] = useState(Notification.permission);

  const requestPermission = async () => {
    const result = await Notification.requestPermission();
    setPermission(result);
  };

  const subscribe = async () => {
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: 'YOUR_VAPID_KEY'
    });
    await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify(subscription) });
  };

  return (
    <div>
      <button onClick={requestPermission} disabled={permission === 'granted'}>
        Enable Notifications
      </button>
      {permission === 'granted' && <button onClick={subscribe}>Subscribe</button>}
    </div>
  );
}

Practice

Convert a React app to a PWA with offline support and push notifications.