Getting Everybody Online with PWAs - Orjiewuru Kingdom Isaac, DevFestSW17 

What is a PWA? A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. They are installable and live on the user's home screen, without the need for an app store. 

Why the web? 5b devices are connected to the web 

Why do we need progressive web apps? A lot of people visit the web from their mobile devices, but only a few keep returning. Most people visit the web in passing, this means that it is not their primary means of accessing the web. 

4.0 Mobile apps Monthly Unique Visitors (M) 11.4 Mobile web Source comScore Mobile Metrix US, Age 18+, June 2016 

#thoughts These numbers are encouraging, so let’s build more responsive web apps. 

But how long do these visitors spend on mobile apps compared to mobile web? 

188.6 Mobile apps Average minutes per visitor 9.3 Mobile web Source comScore Mobile Metrix US, Age 18+, June 2016 

Visitors Engagement 

We need a way to retain visitors by providing them with an engaging experience 

We need PWAs 

Why PWA? 

Reliable Loads instantly even in shaky internet connections. 

Fast Once a PWA is loaded, the experience is fast. Note: Apps are not fast by default so you need to build the app with speed in mind. 

Engaging ● They appear in app drawer(menu) and home screen ● Immersive full screen experience with the help of manifest file ● Re-engage users with the help of push notifications 

/* A little aside on speed 

* RAIL - user-centric model for measuring performance Read Article here - http://bit.ly/2AKwR3u Paul Irish & Paul Lewis - October 2015 

Back to business */ 

Building a PWA 

manifest.json The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. - Mozilla (mzl.la/2lefIbe) 

Configuring a PWA - manifest.json { "short_name": "Sample PWA", "name": "Sample PWA App DevFestSW", } 

Configuring a PWA - manifest.json { "short_name": "Sample PWA", "name": "Sample PWA App DevFestSW", "icons": [{ "src": "launcher-icon-4x.png","sizes": "192x192" }], } 

Configuring a PWA - manifest.json { ... "start_url": "index.html?launcher=true", } 

Configuring a PWA - manifest.json { ... "display": "standalone", "theme_color": "#FF9800" } 

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Service Worker 

const cacheName = 'sample-pwa'; const filesToCache = ['/','/index.html','/styles.css']; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); }); ... Configuring a PWA - service-worker.js 

... self.addEventListener('activate', event => { event.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request, {ignoreSearch:true}).then(response => { return response || fetch(event.request); }) ); }); Configuring a PWA - service-worker.js 

Adding the service worker and manifest files ... if('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function() { console.log('Service Worker Registered'); }); } ... 

Demo 

Who uses PWAs 

Questions ? 

Thanks