5 exercises on PWA fundamentals — service worker lifecycle, install prompt, Cache API, and background sync.
0 / 5 completed
1 / 5
What is the service worker lifecycle?
Service worker lifecycle: on first visit the browser installs the SW (caches assets in install), but it only activates when all tabs using the old SW are closed (or skipWaiting is called). Once active, it intercepts all fetch requests for the origin.
2 / 5
What triggers the PWA install prompt (beforeinstallprompt event)?
Install prompt: the beforeinstallprompt event fires when the browser decides the site is installable. You can defer it and show a custom "Add to Home Screen" button. Calling prompt() on the saved event shows the native install dialog.
3 / 5
What is an offline-first strategy?
Offline-first: the service worker intercepts fetch events and responds from cache immediately (cache-first strategy). Network updates happen in the background. Users experience instant loads even on flaky connections; the app degrades gracefully when offline.
4 / 5
What does the Cache API provide to service workers?
Cache API:caches.open('v1') returns a named cache store. You put request/response pairs in it and retrieve them by matching URLs or request objects. It is completely under developer control — you decide what is cached, when, and for how long.
5 / 5
What is background sync in PWAs?
Background sync: register a sync event (registration.sync.register('send-message')). If offline, the browser queues it. When connectivity returns — even after the tab is closed — the service worker fires the sync event, allowing the queued action to complete.