Progressive Web Apps (PWAs) combine the reach of the web with the experience of native applications. At the core of every PWA are three fundamental building blocks: the Web App Manifest, Service Workers, and the Cache API. Understanding how these components work at a code level is essential for developers who want to build fast, reliable, and installable web applications.
This article explains each core PWA component, how they interact with each other, and how developers can use them effectively.
1. Web App Manifest: Making the App Installable
The Web App Manifest is a simple JSON file that provides metadata about your web application. It tells the browser how the app should behave when installed on a user’s device.
Purpose of the Manifest
The manifest enables:
Add-to-home-screen functionality
Full-screen or standalone app experience
App identity (name, icons, theme colors)
Without a valid manifest, your web app cannot be recognized as a PWA.
Basic Manifest Example
{
"name": "My Progressive Web App",
"short_name": "MyPWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0a58ca",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Key Manifest Properties Explained
name & short_name: App name shown during installation and on the home screen.
start_url: The page loaded when the app is launched.
display: Controls UI appearance (standalone, fullscreen, browser).
theme_color: Affects browser UI and task switcher color.
icons: Required for installability and app branding.
Linking the Manifest
<link rel="manifest" href="/manifest.json">
The manifest itself doesn’t add offline support or performance improvements—it simply enables the app-like experience.
2. Service Workers: The Brain of a PWA
Service Workers are JavaScript files that run in the background, separate from the web page. They act as a programmable network proxy, intercepting network requests and controlling how responses are handled.
Why Service Workers Matter
Service workers enable:
Offline functionality
Network request interception
Push notifications
Background sync
They are the most powerful component of a PWA.
Registering a Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(() => console.log('Service Worker registered'))
.catch(err => console.error('Service Worker error', err));
}
Service workers only work over HTTPS (except on localhost), ensuring secure communication.
Service Worker Lifecycle
Install – Cache essential assets
Activate – Clean old caches
Fetch – Intercept network requests
Install Event Example
self.addEventListener('install', event => {
event.waitUntil(
caches.open('pwa-cache-v1').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/app.js'
]);
})
);
});
This ensures core files are cached before the service worker becomes active.
Fetch Event Example
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
This allows the app to load cached content when the network is unavailable.
3. Cache API: Storing and Serving Assets
The Cache API provides a structured way to store and retrieve HTTP requests and responses. It works closely with service workers to enable offline-first experiences.
What Can Be Cached?
HTML files
CSS and JavaScript
Images
API responses (with caution)
Opening a Cache
caches.open('pwa-cache-v1').then(cache => {
cache.add('/offline.html');
});
Each cache is versioned, making updates and cleanup easier.
Common Caching Strategies
Cache First
Used for static assets like CSS and images.
caches.match(request).then(response => {
return response || fetch(request);
});
Network First
Ideal for dynamic content and APIs.
fetch(request)
.then(response => {
caches.open('api-cache').then(cache => {
cache.put(request, response.clone());
});
return response;
})
.catch(() => caches.match(request));
Stale-While-Revalidate
Serves cached content immediately while updating in the background.
This approach balances performance and freshness.
How These Components Work Together
The Manifest defines how the app looks and launches
The Service Worker controls network behavior and background tasks
The Cache API stores assets and responses for offline use
Together, they transform a standard web app into a fast, resilient, and installable experience.
Best Practices for Developers
Version your caches to avoid serving outdated files
Keep service worker logic simple and well-documented
Avoid caching sensitive or frequently changing API data
Use Lighthouse to audit PWA compliance
Always test offline behavior in DevTools
Conclusion
PWAs rely on three essential components: Web App Manifest, Service Workers, and the Cache API. While the manifest handles installability and branding, service workers and the Cache API deliver performance, reliability, and offline access.
For PWA developers, mastering these components is key to building modern web applications that feel native, load instantly, and work anywhere—regardless of network conditions.
Top comments (0)