Progressive Web Applications
A Progressive Web Application is a web application that uses browser platform features to feel more like an installed application. It can provide installation, offline behavior, and device integration where the browser and operating system support them.
itWeb development | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Don't Panic
Don't Panic — Progressive Web Applications
A Progressive Web Application is still a website. It does not climb out of the browser at night and become a small native app with a convincing hat. It is a web application that can gain installed-app presentation, resilient access, and selected device features when the browser and operating system support them.
The useful starting point is the ordinary web path: pages, navigation, forms, data, and accessible HTML. That path must work before any PWA layer arrives carrying a manifest and a service worker. The web app manifest is a JSON description of the installed application: its name, icons, preferred launch address, and display preference. It describes how the browser may present the app. It does not cache a page, grant installation, or negotiate with the operating system on your behalf. Browsers retain that particular privilege, which is probably for the best.
The service worker is where the machinery becomes both useful and slightly fussy. It is an event-driven worker that can receive fetch events for requests in its scope and choose a response. For a versioned script, that might be a cached release asset. For a navigation, it might be a network attempt followed by an offline fallback. For a write, a cache alone is not a plan; the interface needs a visible pending state, safe retries, and a way to deal with conflicts.
The surprise is that offline is not one switch labeled Offline. It is a separate promise for each request type. Cached content can be stale. A stored response cannot prove that a server recorded a write. A service worker also has no page document and no permanent memory, so durable state belongs in browser storage or on the server. The worker can stop between events, leaving any grand in-memory scheme to contemplate its choices.
Updates need the same care. A newer worker can install while an older one still controls open pages. That protects a current session, but it means activation, reload behavior, and stale-cache cleanup need an intentional design. The practical rule is pleasantly unglamorous: decide the response policy for navigation, assets, reads, and writes, then test it on a first visit, repeat visit, offline use, upgrade, and failed request.
Read the Intro for the full layer and lifecycle map. Use the Cheatsheet when you need the request strategies, worker states, and failure rules in one place. The Practice tab turns that map into a test routine, and the Exercise gives one small offline journey a chance to misbehave safely before a larger application does it in public.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
Supports
- A PWA is built with web-platform technologies and provides an experience similar to a platform-specific app
- A PWA can run across platforms and devices from one codebase
- A PWA can be installed and can operate offline, in the background, and with device integrations where supported
- PWA guides cover installation, offline and background operation, caching, manifests, and best practices
- https://web.dev/learn/pwa/
Supports
- Cache Storage can store, delete, and update assets and serve them without a network request
- A service worker fetch event can intercept network requests and serve a response using different techniques
- The manifest defines how a PWA is treated as an installed application, including look, feel, and basic operating-system behavior
- Offline operation involves storage management including IndexedDB, Cache, Storage Manager, Persistent Storage, and Content Indexing
- Workbox modules simplify common service-worker interactions such as routing and caching
- https://www.w3.org/TR/appmanifest/
Supports
- The name member represents the web application name displayed to the user and serves as an accessible name for an installed web application
- The short_name member is a compact application name for limited display space
- start_url is the developer's preferred launch URL and is advisory
- A processed start_url must be same-origin with the document URL
- Identifiers in start_url are privacy-sensitive and should not identify a user
- User agents can apply manifest values such as display mode and orientation when launching a web application
- https://w3c.github.io/ServiceWorker/
Supports
- A service worker is an event-driven worker that can receive events before a document exists
- Service workers can receive fetch events and work with a request and response store to build offline-enabled web applications
- A service worker is registered against an origin and scope and can provide responses that override default network behavior
- Service workers can be started and terminated by the user agent and should not be treated as permanent contexts
- Worker states include installing, installed, activating, activated, and redundant
- Registration records can contain installing, waiting, and active workers
- Service-worker events include install, activate, and fetch
- https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Supports
- Service workers run in a worker context without DOM access and use asynchronous APIs
- Service workers are available only in secure contexts, while localhost is treated as secure for local development
- Registration is followed by download, install, and activation
- A new worker can wait until pages using an old worker close before activation
- install can prepare caches, activate can clean old caches, and fetch can provide request responses
- Cache stores request and response object pairs and CacheStorage is a directory of named caches
- waitUntil extends install and activate work and respondWith provides an arbitrary response for a controlled page request
- https://github.com/TalAter/awesome-progressive-web-apps
Supports
- The Sindresorhus awesome index links to this curated collection of Progressive Web App resources
- The list includes Workbox as a library set for caching assets and PWA features
- The list includes RealFaviconGenerator for generating cross-browser icon assets and related files
- https://developer.chrome.com/docs/workbox/
Supports
- Workbox provides production-ready service-worker libraries and tooling
- Workbox modules simplify common service-worker routing and caching
- Workbox documents caching strategies, lifecycle, deployment, update, troubleshooting, and fallback use cases
- https://realfavicongenerator.net/
Supports
- RealFaviconGenerator generates icon assets and corresponding HTML markup
- RealFaviconGenerator provides an icon checker and platform presentation feedback
- https://webkit.org/blog/17333/webkit-features-in-safari-26-0/
Supports
- iPhone OS added Home Screen website icons in January 2008
- W3C began standardizing Web Application Manifests in 2013
- Browser support for Web Application Manifests started in November 2014 and Safari adopted it in March 2018 with iOS 11.4
- https://www.w3.org/zh-hans/news/2014/service-workers-first-public-working-draft-published/
Supports
- W3C published the first public Service Workers Working Draft on 2014-05-08
- The draft described an event-driven Web Worker for offline-capable web applications
- https://developer.chrome.com/blog/getting-started-pwa
Supports
- Chrome published a Progressive Web Apps getting-started guide in 2015
- The guide connects web app manifests with application presentation and launch behavior
- https://www.w3.org/TR/2018/WD-appmanifest-20180403/
Supports
- W3C published a Web App Manifest Working Draft on 2018-04-03
- The draft describes JSON metadata including names, icons, launch URL, orientation, display mode, and scope
- https://www.w3.org/TR/service-workers/all/
Supports
- W3C lists a Service Workers Candidate Recommendation Snapshot dated 2019-11-19
- https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/
Supports
- Safari 15.4 improved Web App Manifest and ServiceWorker behavior for websites and Home Screen web apps
- https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/
Supports
- iOS and iPadOS 16.4 beta added Web Push support for Home Screen web apps in February 2023
- Web Push permission for a Home Screen web app follows direct user interaction
- https://docs.pwabuilder.com/
Supports
- PWABuilder tools create or convert PWAs, manage manifests, service workers, and icons, and package apps for stores
- https://vite-pwa-org.netlify.app/guide/
Supports
- Vite PWA can generate a Web App Manifest, add it to an entry point, generate a service worker, and register it
- https://serwist.pages.dev/docs/serwist
Supports
- Serwist provides tools for creating service workers and configuring their behavior
- https://ionicframework.com/docs
Supports
- Ionic can run in the browser as a Progressive Web App or use Capacitor or Cordova for native deployment
- https://web.dev/articles/service-worker-lifecycle
Supports
- An updated service worker installs alongside the existing worker and waits until existing controlled clients no longer use the old worker
- Changing a service worker script URL is not recommended because an old cached page can prevent the new worker from being registered
- https://web.dev/case-studies/service-workers-iowa
Supports
- The IOWA team used cache-first for an application shell and later found cached dynamic content did not update as intended
- The team used lifecycle events to notify users that a new version was available
- https://developer.chrome.com/docs/workbox/handling-service-worker-updates
Supports
- Immediate activation can combine a new service worker with an older page and can break lazy-loaded resources
- A reload prompt can provide a controlled update path for selected applications
- https://developer.chrome.com/docs/workbox/service-worker-lifecycle
Supports
- Service-worker updates are checked during in-scope navigations and a new worker normally waits while old controlled clients remain open
- Cache instances require intentional update and cleanup behavior
