Progressive Web Apps (PWA) Cheat Sheet

Covers the web app manifest, service worker registration and caching strategies, install prompt handling, and a PWA feature checklist.

2 PagesAdvancedMar 5, 2026

Web App Manifest

Declaring how the app installs and launches.

json

{  "name": "SkillVeris",  "short_name": "SkillVeris",  "start_url": "/",  "display": "standalone",  "background_color": "#ffffff",  "theme_color": "#1976d2",  "icons": [    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }  ]}

Service Worker Registration & Caching

Registering a worker and caching assets for offline use.

javascript

// Register from your appif ('serviceWorker' in navigator) {  navigator.serviceWorker.register('/sw.js');}// sw.js - cache-first strategy for static assetsconst CACHE_NAME = 'app-v1';const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];self.addEventListener('install', (event) => {  event.waitUntil(    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))  );});self.addEventListener('fetch', (event) => {  event.respondWith(    caches.match(event.request).then((cached) => cached || fetch(event.request))  );});self.addEventListener('activate', (event) => {  event.waitUntil(    caches.keys().then((keys) =>      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))    )  );});

Install Prompt Handling

Deferring and triggering the native install UI.

javascript

let deferredPrompt;window.addEventListener('beforeinstallprompt', (e) => {  e.preventDefault();       // stop the automatic mini-infobar  deferredPrompt = e;  showCustomInstallButton();});installButton.addEventListener('click', async () => {  deferredPrompt.prompt();  const { outcome } = await deferredPrompt.userChoice; // 'accepted' | 'dismissed'  deferredPrompt = null;});

PWA Feature Checklist

The building blocks that make an app installable and offline-capable.

Web App Manifest- JSON file declaring name, icons, and display mode for installability
Service Worker- a script that intercepts network requests and enables offline support
HTTPS requirement- service workers only register on secure origins, or on localhost
display: standalone- launches without browser chrome so the app feels native
Push notifications- delivered via the Push API and Notification API, requires a service worker
Background Sync- defers actions like a form submission until connectivity returns
Lighthouse PWA audit- checks installability, offline support, and PWA best practices

Pro Tip

A cache-first strategy is great for versioned static assets but dangerous for API responses: use a stale-while-revalidate or network-first strategy for dynamic data so users don't get stuck seeing stale content indefinitely.

Was this cheat sheet helpful?

Web Performance Optimization Cheat Sheet

WebSockets Cheat Sheet