Building a Progressive Web App (PWA) from Scratch
In today's mobile-first world, delivering a seamless and engaging user experience across all devices is paramount.
Braine Agency
Published
Building a Progressive Web App (PWA) from Scratch
```htmlIn today's mobile-first world, delivering a seamless and engaging user experience across all devices is paramount. That's where Progressive Web Apps (PWAs) come in. At Braine Agency, we've helped numerous businesses leverage the power of PWAs to enhance user engagement, improve conversion rates, and boost overall business performance. This comprehensive guide will walk you through the process of building a PWA from scratch, equipping you with the knowledge and tools you need to create a cutting-edge web application.
What is a Progressive Web App (PWA)?
A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience to users. It combines the best features of both websites and native mobile applications. Think of it as a website that can be installed on a user's device, offering features like offline access, push notifications, and a fast, reliable performance.
Key Characteristics of PWAs:
- Progressive: Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
- Responsive: Fits any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent: Enhanced with service workers to work offline or on low-quality networks.
- App-like: Feels like an app to the user with app-style interactions and navigation.
- Fresh: Always up-to-date thanks to the service worker update process.
- Safe: Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
- Discoverable: Is identifiable as an "application" thanks to W3C manifests and service worker registration scope, allowing search engines to find it.
- Re-engageable: Makes re-engagement easy through features like push notifications.
- Installable: Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
- Linkable: Easily share via URL and does not require complex installation.
According to a Google study, PWAs can lead to a 50% increase in user engagement and a 30% improvement in conversion rates. This makes PWAs a powerful tool for businesses looking to improve their online presence and drive growth.
Why Choose a PWA? The Benefits
Before we dive into the technical details, let's understand why you should consider building a PWA:
- Improved User Experience: PWAs offer a fast, reliable, and engaging user experience, leading to increased user satisfaction and retention.
- Offline Access: Service workers enable PWAs to work offline or on low-quality networks, ensuring users can access content even when they're not connected to the internet.
- Lower Development Costs: PWAs are built using web technologies, reducing the need to develop separate native apps for different platforms, thus lowering development costs.
- Increased Discoverability: PWAs are discoverable by search engines, making them easier for users to find.
- Easy Installation: Users can install PWAs directly from the browser without going through an app store.
- Automatic Updates: PWAs are automatically updated in the background, ensuring users always have the latest version.
- Push Notifications: PWAs can send push notifications to re-engage users and keep them informed.
Building Your First PWA: A Step-by-Step Guide
Now, let's get our hands dirty and build a simple PWA from scratch. We'll focus on the core components: the manifest file and the service worker.
Step 1: Setting Up Your Project
First, create a new directory for your PWA project. Inside this directory, create three files:
index.html: The main HTML file for your application.style.css: A stylesheet for styling your application.app.js: A JavaScript file for your application's logic.
And create a folder:
images/: A folder to store images for your application.
Step 2: Creating the index.html File
Open index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple PWA</title>
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="images/icon-192x192.png">
<meta name="theme-color" content="#007bff">
</head>
<body>
<h1>Welcome to My Simple PWA!</h1>
<p>This is a basic Progressive Web App example.</p>
<button id="install-button" style="display: none;">Install
<script src="app.js"></script>
</body>
</html>Explanation:
<link rel="manifest" href="manifest.json">: This line links your HTML to the manifest file, which we'll create in the next step.<link rel="apple-touch-icon" href="images/icon-192x192.png">: This is an icon for iOS devices when added to the home screen. You need to provide an image (e.g.,icon-192x192.png) in theimages/directory.<meta name="theme-color" content="#007bff">: This sets the theme color for the app, which will be used in the browser's address bar.
Step 3: Creating the manifest.json File
The manifest file (manifest.json) provides metadata about your PWA, such as its name, icons, and display mode. Create a file named manifest.json in the root directory of your project and add the following code:
{
"name": "My Simple PWA",
"short_name": "SimplePWA",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#007bff",
"icons": [
{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Explanation:
name: The full name of your PWA.short_name: A shorter name for your PWA, used on the home screen.start_url: The URL that will be loaded when the PWA is launched. "." means the root.display: Specifies how the PWA should be displayed.standalonemakes it look like a native app. Other options includefullscreenandminimal-ui.background_color: The background color of the splash screen when the PWA is launched.theme_color: The theme color of the PWA.icons: An array of icon objects, each specifying the source, size, and type of an icon. You'll need to provide the actual image files in theimages/directory. Different sizes are recommended for different devices and resolutions.
Important: Make sure you have the icon files (icon-192x192.png and icon-512x512.png) in your images/ directory. You can create these icons using image editing software or online icon generators.
Step 4: Creating the Service Worker (service-worker.js)
The service worker is the heart of a PWA. It's a JavaScript file that runs in the background, intercepting network requests and caching resources to enable offline access. Create a file named service-worker.js in the root directory of your project and add the following code:
const cacheName = 'my-pwa-cache-v1';
const staticAssets = [
'./',
'./index.html',
'./style.css',
'./app.js',
'./images/icon-192x192.png',
'./images/icon-512x512.png'
];
self.addEventListener('install', async event => {
const cache = await caches.open(cacheName);
await cache.addAll(staticAssets);
return self.skipWaiting();
});
self.addEventListener('activate', event => {
self.clients.claim();
});
self.addEventListener('fetch', async event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});Explanation:
cacheName: A name for your cache. Increment this value if you change the cache contents.staticAssets: An array of URLs to cache. These are the files that will be cached when the service worker is installed.installevent: This event is triggered when the service worker is installed. It opens a cache, adds the static assets to the cache, and callsself.skipWaiting()to activate the service worker immediately.activateevent: This event is triggered when the service worker is activated. It callsself.clients.claim()to take control of all clients.fetchevent: This event is triggered when the browser makes a network request. It checks if the requested resource is in the cache. If it is, it returns the cached resource. Otherwise, it fetches the resource from the network and returns it. This enables offline access.
Step 5: Registering the Service Worker
To register the service worker, you need to add the following code to your app.js file:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup:
if (isIos() && !isInStandaloneMode()) {
const installButton = document.getElementById('install-button');
installButton.style.display = 'block';
installButton.addEventListener('click', () => {
alert('To install this app, tap the "Share" button, then select "Add to Home Screen".');
});
}
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
});
}Explanation:
- This code checks if the browser supports service workers.
- If it does, it registers the service worker located at
/service-worker.jswhen the page is loaded. - The
thenblock logs a success message to the console. - The
catchblock logs an error message to the console if the registration fails. - The code also detects if the user is on iOS and not in standalone mode (i.e., not already installed). If so, it displays an install button and provides instructions on how to install the PWA.
Step 6: Adding Some Basic Styling (style.css)
Create a style.css file and add some basic styling to make your PWA look a bit nicer:
body {
font-family: sans-serif;
text-align: center;
padding: 20px;
}
h1 {
color: #007bff;
}Step 7: Testing Your PWA
To test your PWA, you'll need to serve it over HTTPS. You can use a local development server like http-server or live-server. Here's how to use http-server:
- Install
http-serverglobally:npm install -g http-server - Navigate to your project directory in the terminal.
- Run
http-server -S -C cert.pem -K key.pem(This requires you to create a self-signed certificate. See below for instructions). Alternatively, for development purposes, you can try running without HTTPS using `http-server`, but many PWA features will not work. - Open your browser and navigate to
https://localhost:8080(or the address provided byhttp-server).
Creating a self-signed certificate:
You can create a self-signed certificate using OpenSSL. Here's how:
openssl genrsa -out key.pem 2048
openssl req -new -key key.pem -out cert.pem
openssl x509 -req -days 365 -in cert.pem -signkey key.pem -out cert.pemOnce your PWA is running, open your browser's developer tools (usually by pressing F12). Go to the "Application" or "Manifest" tab to check if the manifest file is loaded correctly. You should also see the service worker registered in the "Service Workers" tab.
You should now be able to install your PWA on your device. On Chrome, you'll see an "Install" button in the address bar. On iOS, you'll need to tap the "Share" button and then select "Add to Home Screen".
Advanced PWA Features
Once you have a basic PWA up and running, you can start adding more advanced features:
- Push Notifications: Use the Push API to send push notifications to re-engage users. This requires
