The Progressive Web App Philosophy

The 10 Minute PWA!

Add a Web Manifest

<link rel=”manifest” href=”manifest.json”>
{
"name": "GreenZeta Progressive Web App Demo",
"short_name": "GZ PWA",
"theme_color": "#7bb951",
"background_color": "#111313",
"display": "fullscreen",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "/assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"splash_pages": null
}
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#7bb951">
<meta name="mobile-web-app-capable" content="yes">

<link rel="apple-touch-icon" href="assets/icons/icon-512x512.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/icon-144x144.png">
<link rel="apple-touch-icon" sizes="512x512" href="assets/icons/icon-512x512.png">

Register a Service Worker

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('service-worker.js')
.then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
self.addEventListener('install', function(event){
console.log('[SW] installing...');
event.waitUntil(caches.open('static')
.then(function(cache){
console.log('[SW] precaching');
cache.addAll([
'/',
'/index.html'
]);
}));
});
self.addEventListener('fetch', function(event){
event.respondWith(
caches.match(event.request)
.then(function(response){
if(response){
return response;
}else{
return fetch(event.request);
}
})
);
});

Add an Install Prompt

let deferredPrompt;window.addEventListener('beforeinstallprompt', (e) => {
// Store the install prompt event
deferredPrompt = e;
console.log('install prompt ready');
});
document.getElementById('install').addEventListener('click', (e)=>{
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the prompt');
} else {
console.log('User dismissed the prompt');
}
deferredPrompt = null;
});
});

Why create a PWA?

A professional web developer for over 15 years. For more information, visit greenzeta.com and follow his latest web experiments @greenzeta on twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store