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
Intro
Progressive Web Applications
A Progressive Web Application, or PWA, is an application built with web platform technologies that provides an experience similar to a platform-specific application. It remains a website: the browser fetches its documents and resources, and the application can run across platforms from one codebase. Where a browser and operating system support the relevant features, it can also be installed, launched from an application surface, work during connectivity loss, and use selected device integrations.
PWA is not a separate runtime, framework, or package format. It is an approach to a web application. Start with a useful web experience, then add capabilities that make sense for its users. A public catalog, a field-data form, and a task tracker have different offline and installation needs. The right design follows the work users need to finish, not a feature checklist.
The capability layers
A PWA commonly combines three layers.
- The web application supplies documents, navigation, forms, data access, and accessible HTML.
- A web app manifest describes how a user agent can represent an installed application. It can provide a name, a short name, icons, a preferred start URL, and display preferences.
- A service worker is an event-driven worker that can observe fetches in its scope and return responses. It can coordinate Cache Storage and other browser storage so the application has an intentional response when the network is unavailable or unreliable.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
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