The Progressive Web App Philosophy

Image for post
Image for post
  • Performance
  • Native features
Image for post
Image for post
Image for post
Image for post
  • A Web Manifest
  • A Service Worker

The 10 Minute PWA!

All of the code for the 10 Minute PWA is available on GitHub at https://github.com/mwilber/gz-10-minute-pwa Check it out and follow along as we look at the important parts.

Add a Web Manifest

A web manifest is just a JSON file containing some metadata to describe your app. Simply name it “manifest.json” and place in your website root directory. Then link to the manifest with a meta tag in your app’s index page:

<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

A service worker is simply some javascript code that listens for events. These evens can come from your app front end, or the operating system itself. This is what allows a PWA to run in the background, even when the browser is not active. Service workers are sandboxed to the domain in which they are registered so they cannot interfere with other PWAs.

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

This step is optional depending on your target browser. Some browsers will automatically prompt the user to install a PWA while others require a manual triggering. The following example runs in your app and listens for a beforeinstallprompt event. The event fires in the browser when a PWA qualifies as installable. In some browsers, the install prompt must be triggered as the result of user interaction. Therefore the event is held in a variable where its prompt() method can be called as the result of a button click event.

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?

In the context of a native app alternative, there are many advantages to a web based approach. It gives you the ability to bypass the app stores which are crowded and difficult to stand out. it also avoids the dreaded app store review process. PWAs lower the barrier to entry for users because you don’t have to redirect to an app store, they can jump right into your app from your website. And when built into an existing website, they can leverage that site’s search ranking. Finally, PWAs have a smaller footprint on the device since most of the app overhead is taken from the browser, which is installed anyway.

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