Getting everybody online with PWAs

Slides for my talk @ DevFestSW

Transcript

1. Getting Everybody Online with PWAs - Orjiewuru Kingdom Isaac, DevFestSW17
2. 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.
3. Why the web? 5b devices are connected to the web
4. 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.
5. 4.0 Mobile apps Monthly Unique Visitors (M) 11.4 Mobile web Source comScore Mobile Metrix US, Age 18+, June 2016
6. #thoughts These numbers are encouraging, so let’s build more responsive web apps.
7. But how long do these visitors spend on mobile apps compared to mobile web?
8. 188.6 Mobile apps Average minutes per visitor 9.3 Mobile web Source comScore Mobile Metrix US, Age 18+, June 2016
9. Visitors Engagement
10. We need a way to retain visitors by providing them with an engaging experience
11. We need PWAs
12. Why PWA?
13. Reliable Loads instantly even in shaky internet connections.
14. 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.
15. 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
16. /* A little aside on speed
17. * RAIL - user-centric model for measuring performance Read Article here - http://bit.ly/2AKwR3u Paul Irish & Paul Lewis - October 2015
18. Back to business */
19. Building a PWA
20. 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)
21. Configuring a PWA - manifest.json { "short_name": "Sample PWA", "name": "Sample PWA App DevFestSW", }
22. Configuring a PWA - manifest.json { "short_name": "Sample PWA", "name": "Sample PWA App DevFestSW", "icons": [{ "src": "launcher-icon-4x.png","sizes": "192x192" }], }
23. Configuring a PWA - manifest.json { ... "start_url": "index.html?launcher=true", }
24. Configuring a PWA - manifest.json { ... "display": "standalone", "theme_color": "#FF9800" }
25. 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
26. 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
27. ... 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
28. Adding the service worker and manifest files ... <link rel="manifest" href="manifest.json"> <script> if('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function() { console.log('Service Worker Registered'); }); } </script> ...
29. Demo
30. Who uses PWAs
31. Questions ?
32. Thanks