Progressive Web Apps (PWA): Complete Guide

Build installable web applications.

Create PWAs that work offline and feel native.

Manifest

// manifest.json

{

“name”: “My PWA”,

“short_name”: “App”,

“start_url”: “/”,

“display”: “standalone”,

“background_color”: “#ffffff”,

“icons”: [{ “src”: “icon.png”, “sizes”: “192×192” }]

}

Service Worker

const CACHE = ‘my-pwa-cache’;

self.addEventListener(‘install’, (e) => {

e.waitUntil(

caches.open(CACHE).then((cache) => cache.addAll([‘/’, ‘/app.js’])

);

});

self.addEventListener(‘fetch’, (e) => {

e.respondWith(

caches.match(e.request).then((r) => r || fetch(e.request))

);

});

Registration

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(‘/sw.js’);

}

Conclusion

PWAs blur the line between web and native apps!

Leave a Comment