Progressive Web Apps in 100 Seconds // Build a PWA from Scratch

Progressive Web Apps (PWAs) let websites behave like native mobile apps—offline support, push notifications, and device features—while keeping the web’s advantages: installability, cross-platform reach (iOS, Android, and browsers), and distribution without app-store revenue cuts. With modern web capabilities now close to native feature parity, a PWA can be installed from a phone’s home screen, run without a connection, and still interact with things like the camera and receive push messages, all from a single code base.

Turning a site into a PWA is less complicated than it sounds, especially when the core requirements are treated as a checklist. Chrome’s Lighthouse audit in DevTools is the starting point: it scores performance and accessibility and flags what’s needed to qualify as a PWA. At minimum, the site must load quickly and be mobile-accessible—most sites already meet that bar. The harder requirement is offline functionality, which typically hinges on a service worker.

A service worker is a background script registered by the browser that can handle caching, background sync, and push notification events. Instead of relying on the page’s single-threaded runtime, the service worker runs independently and can intercept network requests. Implementation is straightforward: check for browser support, register a JavaScript service worker file, and then confirm it’s active in Chrome’s Application tab. From there, the key step is caching the app’s URLs (and other assets) so the content can be served when the network is unavailable. DevTools makes this tangible by letting developers inspect the cache and other background services.

The final piece is a manifest.json file, which provides app metadata—icons, name, and install-related details—and also signals whether a service worker is running correctly. Once Lighthouse requirements are satisfied, the “PWA achievement” appears and the app becomes installable on most native devices. Installable PWAs can also be listed on platforms such as Google Play or the Microsoft Store, extending reach beyond the browser.

For developers, the workflow gets faster with tooling. Workbox is highlighted as a practical library that covers common service-worker tasks with minimal code, including offline fallbacks, image caching, and Google Fonts caching. It also offers “recipes” that can implement features with small, focused calls. Framework ecosystems can reduce effort further: Angular includes service worker support, and create-react-app can generate a service worker automatically. For learning and comparison, a Hacker News PWA showcase site provides examples across frameworks.

The build-from-scratch walkthrough narrows the project to four files: index.html, a logo, manifest.json, and serviceworker.js. The manifest references icon sizes used for home-screen installation, and an asset generator can create the required icon set automatically. In the service worker, Workbox routing matches image files and applies a caching strategy—cache-first for relatively static assets, with a network-then-cache approach for frequently changing content. After serving locally, developers verify icons, confirm the service worker is running, and run a Lighthouse audit to reach a near-perfect score and the installable badge.

Beyond the basics, the transcript points to additional resources like web.dev and Trusted Web Activities (TWAs) for publishing on Google Play alongside Android apps, plus Microsoft Store options for PWAs. It also teases an upcoming advanced browser-API video covering capabilities such as Bluetooth, motion, and idle detection.