The power of modern web experiences with progressive web apps

Progressive Web Apps, or PWAs, are modern web applications that look and feel like native apps on your phone or tablet. They combine the best of websites and mobile apps: you don’t need to install them from an app store, they load quickly, work offline, and can show push notifications. In this article, we’ll explain step by step what PWAs are, why they’re useful, and provide simple code examples that you can get started with yourself.

What makes a web app a PWA?

A regular website only loads when there’s an internet connection and offers few options for working offline or showing notifications. A PWA adds three important elements. First, there’s a manifest file that describes how your app should appear on the home screen, with an icon and name. Second, there’s a service worker, a piece of JavaScript that runs in the background and caches content so that your app works even without an internet connection. Third, you serve the pages over HTTPS, which ensures that the data travels securely between the user and the server.

The manifest file

The manifest is a small JSON file that you place in the root of your project. It contains properties such as the name, icon, and color of the status bar. This file tells your browser: “This is an app that you can install on your home screen.”

{
"name": "My PWA Example",
"short_name": "MyPWA",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2c3e50",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

After creating manifest.json and link to it in your HTML header:

<link rel="manifest" href="/manifest.json">

Registering the Service Worker

The Service Worker is a JavaScript file that works in the browser as a proxy between the network and the cache. It allows you to make pages and files available offline.

In your main script, for example app.js, you register the service worker like this:

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(reg) {
console.log('Service worker registered.', reg);
}).catch(function(err) {
console.log('Service worker registration failed:', err);
});
});
}

The service worker itself

In sw.js you define which files you want to cache and how you serve them. The simplest example looks like this:

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/app.js',
'/icons/icon-192.png'
];

self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});

The install event fills the cache with your specified files. The fetch event ensures that the browser first looks in the cache and only goes to the network if something is not found.

HTTPS is required

Service workers only work via HTTPS. This ensures a secure connection and prevents malicious parties from eavesdropping or manipulating data without permission. During development, you can use localhost without HTTPS, but once you go live, you will need to install an SSL certificate.

Offline-first approach

The advantage of a PWA is that your app remains largely functional even without internet. For dynamic data, you can implement additional strategies in the service worker, such as “cache then network” or “network then cache”. The first strategy immediately shows the cached version and refreshes in the background, while the second first makes a network request and falls back to cache on failure.

self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).then(response => {
const responseClone = response.clone();
caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, responseClone);
});
return response;
}).catch(() => caches.match(event.request))
);
});

Push notifications

A PWA can send push notifications, just like native apps. This requires additional steps: first, you ask the user for permission, then you register a push service and process push data in the service worker.

Notification.requestPermission().then(permission => {
if (permission === 'granted') {
navigator.serviceWorker.ready.then(registration => {
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: ''
}).then(subscription => {
console.log('Subscribed to push:', subscription.endpoint);
});
});
}
});

self.addEventListener('push', event => {
const data = event.data.json();
const options = {
body: data.body,
icon: '/icons/icon-192.png'
};
event.waitUntil(
self.registration.showNotification(data.title, options)
);
});

Installation prompt

Browsers sometimes automatically prompt you to install the PWA. You can also trigger this manually. Save the “beforeinstallprompt” event and show a custom button:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
e.preventDefault();
deferredPrompt = e;
document.getElementById('install-button').style.display = 'block';
});

document.getElementById('install-button').addEventListener('click', () => {
deferredPrompt.prompt();
deferredPrompt.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('App installed');
}
deferredPrompt = null;
});
});

Examples of successful PWAs

Two well-known examples of companies that switched to PWAs are Twitter and Starbucks. Twitter launched Twitter Lite, a faster, lighter version of the app that uses 65% less data. Starbucks built a PWA that allows baristas to quickly read orders, even on poor connections, and saw a huge increase in orders.

Useful tools and resources

To test your PWA, use Chrome DevTools in the Applications tab. Audit your site with Lighthouse for performance and PWA checks. To generate icons, you can use a generator like RealFaviconGenerator.

Conclusion

Progressive Web Apps are a powerful way to transform your website into an app experience without the hassle of the app store. With a manifest, a service worker, and HTTPS, you can create an app that loads quickly, works offline, and even sends push notifications. Your users get a smooth, reliable experience, and you keep a single codebase. Start small, experiment with caching strategies and extensible features, and watch your website evolve into a modern PWA.

Did I help you well?

Your contribution enables me to write more articles.

I donate € 1,- now