Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting everybody online with PWAs

Getting everybody online with PWAs

Slides for my talk @ DevFestSW

21e0bdf9c7829dc2422de9086a82ced6?s=128

Orjiewuru Kingdom Isaac

November 18, 2017
Tweet

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