HTML PWA Basics
In this page:
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.
Note: PWAs require secure HTTPS connections to run and load their service scripts.
Warning: If your site does not use HTTPS, mobile devices will block PWA features and prevent installation.
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.
Note: Set the display attribute in your manifest file to standalone to hide the browser address bar when your app is opened.
Warning: Ensure your manifest file is free of syntax errors, as a single typo will prevent your app from being installable.
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.
Note: Register your service worker script in your main HTML file to enable offline features and caching.
Warning: Service Workers operate on a separate background thread and do not have direct access to your page's DOM or elements.
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.
Note: Use custom install buttons to make triggering the installation prompt convenient for your users.
Warning: You cannot trigger the installation prompt manually unless the browser fires the native beforeinstallprompt event first.
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).
Note: Use relative viewport units and CSS safe area padding to prevent your app content from getting cut off by device notches.
Warning: Failing to handle safe areas can cause your navigation bars to overlap with mobile system status icons.
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.
Note: Set display to "standalone" to make an installed PWA feel like a real native app, hiding the browser's address bar entirely.
Warning: A missing or incorrectly formatted start_url in the manifest can cause the installed app icon to fail to launch correctly.
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.
Note: Cache your offline fallback page during the service worker's install event, so it is guaranteed to be available even the very first time the network fails.
Warning: Forgetting to pre-cache the offline page itself means that if the network fails while trying to load the offline page, users see the browser's default error instead.
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: