HTML PWA Basics
In this page:
<link rel="manifest" href="manifest.json">
<script>
navigator.serviceWorker.register("sw.js");
</script>What is a Progressive Web App?
A Progressive Web App (PWA) is a standard website that uses modern web APIs to deliver an app-like user experience, complete with offline support, home screen installation, and background updates.
Example: What is a Progressive Web App?
<link rel="manifest" href="manifest.json">The Web App Manifest (manifest.json)
The Web App Manifest is a simple JSON configuration file that defines your app settings, such as your app name, custom splash screen colors, display layouts, and home screen icon paths.
Example: The Web App Manifest (manifest.json)
<link rel="manifest" href="manifest.json">
<!-- manifest.json: { "name": "My App", "display": "standalone" } -->Service Workers for Offline Support
A Service Worker is a background script that intercepts network requests, caches assets (like styles, scripts, and logos), and serves them instantly when the user is offline, keeping your app functional without network connections.
Example: Service Workers for Offline Support
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
</script>Home Screen Installation Prompts
When your website meets all PWA standards (including HTTPS, a valid manifest, and an active service worker), the browser will automatically prompt visitors to install your site as an app on their device.
Example: Home Screen Installation Prompts
<button id="installBtn">Install App</button>
<script>
let deferredPrompt;
window.addEventListener('beforeinstallprompt', function (e) {
deferredPrompt = e;
});
</script>Designing for Mobile App Viewports
To make your PWA look like a native mobile app, you must adjust your CSS styles to fit compact mobile screens and handle modern device safe areas (like notch margins or home indicators).
Example: Designing for Mobile App Viewports
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
</head>Manifest Properties Reference
Beyond icons, the manifest.json file supports several other important properties: name is the full app name, short_name is used when space is limited on a home screen, start_url defines what page opens when launched, display controls whether it looks like a full standalone app or a regular browser tab, and theme_color styles the device status bar.
Example: Manifest Properties Reference
<!-- manifest.json:
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"theme_color": "#317EFB"
}
-->Building an Offline Fallback Page
A service worker can detect when a network request fails because the user has no internet connection, and respond with a cached fallback page instead of the browser's default error screen, letting users know the app still works, just with limited content until they reconnect.
Example: Building an Offline Fallback Page
<script>
self.addEventListener('install', function (event) {
event.waitUntil(caches.open('v1').then(cache => cache.add('/offline.html')));
});
</script>- Attempting to test PWA install features on insecure HTTP domains, causing browsers to block the API.
- Forgetting to register your service worker script in your HTML files.
- Writing invalid JSON inside your manifest.json file, which prevents mobile installation.
- PWAs transform standard websites into installable, offline-capable mobile applications.
- Create a manifest.json file to define your app metadata, splash colors, and shortcut icon paths.
- Register a background Service Worker to handle offline assets caching, and design fluid layouts that respect mobile safe areas.
Standard Web App Manifests and Service Worker APIs are supported natively by all modern web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: