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', () => {
.then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
self.addEventListener('install', function(event){
console.log('[SW] installing...');
console.log('[SW] precaching');
self.addEventListener('fetch', function(event){
return response;
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
// Wait for the user to respond to the prompt
.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 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