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

Progressive Web Apps - BrestJS 2016-10

Progressive Web Apps - BrestJS 2016-10

Progressive Web Apps, or PWA, we are been hearing that a lot these last months, but what's behind this term? In this talk I explain the concepts and technologies behind PWA, and how they allows to boost your webapp in both performance and UX, even in browsers that don't support the full technical stack yet.

Horacio Gonzalez

October 27, 2016

More Decks by Horacio Gonzalez

Other Decks in Technology


  1. @LostInBrittany @BrestJS #PWA How did the Web beat native applications

    on the desktop? Distribution Is The Hardest Problem In Software
  2. @LostInBrittany @BrestJS #PWA The Mobile Internet came when it brought

    the Web You had the whole desktop internet in your hands Everywhere !
  3. @LostInBrittany @BrestJS #PWA So apps are winning aren't it? Mobile

    audience growth driven by mobile web which is actually bigger and growing faster than apps
  4. @LostInBrittany @BrestJS #PWA Are you winning the app lottery? If

    you're not in the top 10, you don't exist...
  5. @LostInBrittany @BrestJS #PWA What's Missing? 1. Homescreen Access 2. Push

    Notifications 3. Offline 4. Access to terminal capabilities
  6. @LostInBrittany @BrestJS #PWA PWA Mix of new and not so

    new technologies to make webapp evolve
  7. @LostInBrittany @BrestJS #PWA Some core technologies • Service workers •

    App Shell • Installability and App Manifest • Notifications and Push APIs
  8. @LostInBrittany @BrestJS #PWA Service Workers JavaScript Worker acting as a

    proxy Fully programmable: https://serviceworke.rs/ • Cache • Notifications HTTPS only
  9. @LostInBrittany @BrestJS #PWA AppShell Minimal HTML, CSS, JS • load

    fast • cached • dynamically display content
  10. @LostInBrittany @BrestJS #PWA Installability and manifest Browsers display install banner

    if app has: • A web app manifest file with: ◦ a short_name (used on the home screen) ◦ a name (used in the banner) ◦ a 144x144 png icon (the icon declarations must include a mime type of image/png) ◦ a start_url that loads • Has a service worker registered • Is served over HTTPS • Is visited at least twice, with at least five minutes between visits.
  11. @LostInBrittany @BrestJS #PWA Notifications and Push APIs • Based on

    Service Workers ◦ In background serviceWorkerRegistration. showNotification(title, options); { "body": "Did you make a $1,000,000 purchase at Dr. Evil...", "icon": "images/ccard.png", "vibrate": [200, 100, 200, 100, 200, 100, 400], "tag": "request", "actions": [ { "action": "yes", "title": "Yes", "icon": "images/yes.png" }, { "action": "no", "title": "No", "icon": "images/no.png" } ] }
  12. @LostInBrittany @BrestJS #PWA Progressive means everybody Progressive enhancement as a

    core tenant No matter the browser choice, our web app works for all
  13. @LostInBrittany @BrestJS #PWA But iOS doesn't support PWA... Safari's… hmm…

    delay in adding modern features... isn't a problem if you're considering Progressive Web Apps https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/
  14. @LostInBrittany @BrestJS #PWA But iOS doesn't support PWA... • Progressive

    Web Apps still work on iOS • Progressive Web Apps perform better on iOS
  15. @LostInBrittany @BrestJS #PWA Offline mode Background sync API Using Service

    Workers // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); }); // in /sw.js self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });
  16. @LostInBrittany @BrestJS #PWA Offline mode Service Worker and Cache API

    Great and easy to use… but support isn't universal yet Sad Safari by Chris Joel
  17. @LostInBrittany @BrestJS #PWA Offline mode But if I need offline

    everywhere? Universal alternatives... IndexedDB PouchDB LocalForage Dexie.js
  18. @LostInBrittany @BrestJS #PWA Offline mode Online or offline? A property

    window.navigator.onLine Two events online and offline
  19. @LostInBrittany @BrestJS #PWA Offline mode Or simply back to the

    progressive idea Safari users get no offline mode Sad Safari by Chris Joel
  20. @LostInBrittany @BrestJS #PWA Lighthouse 1. Install Lighthouse extension (Chrome) 2.

    Visit website, click on the Lighthouse icon 3. Check the results 4. Target 90% or higher https://github.com/GoogleChrome/lighthouse