Building a Progressive Web App with JavaScript: Step-by-Step Tutorial
Learn how to build a simple Progressive Web App (PWA) using JavaScript with this beginner-friendly step-by-step tutorial. Enhance your web app with offline support and installability.
Progressive Web Apps (PWAs) combine the best of web and mobile apps, offering fast, reliable, and engaging experiences. In this tutorial, you will learn how to create a basic PWA using JavaScript, including adding a service worker and a manifest to enable offline support and installability.
Step 1: Create a simple web app structure with an HTML, CSS, and JavaScript file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First PWA</title>
<link rel="stylesheet" href="styles.css" />
<link rel="manifest" href="manifest.json" />
</head>
<body>
<h1>Welcome to My PWA!</h1>
<p>This app works offline and can be installed on your device.</p>
<script src="app.js"></script>
</body>
</html>Step 2: Add some basic styles in styles.css to make the app look nice.
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: #f0f0f0;
color: #333;
}Step 3: Create a manifest.json file. This tells the browser about your app and how it should behave when installed.
{
"name": "My First PWA",
"short_name": "MyPWA",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#317EFB",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Step 4: Add a service worker in service-worker.js. This script will cache your files to make your app work offline.
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/app.js',
'/icon-192.png',
'/icon-512.png'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
return response || fetch(event.request);
})
);
});Step 5: Register the service worker in app.js to make the browser aware of it.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch((error) => {
console.log('ServiceWorker registration failed: ', error);
});
});
}Step 6: Add icon images named icon-192.png and icon-512.png in your project folder. These icons will be used when installing the app.
Step 7: Run your app on a local server (for example, using VS Code Live Server or the command line `npx serve`). Visit your app in a browser that supports PWAs, like Chrome.
When everything is set up, you should be able to install the app and it will work offline thanks to the service worker caching your files.
You’ve just built a simple Progressive Web App using JavaScript! From here, you can explore adding push notifications, background sync, and more advanced features to make your PWA even better.