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.

6f8d092fec403f766c734ce36e1eef93?s=128

Horacio Gonzalez

October 27, 2016
Tweet

Transcript

  1. @LostInBrittany @BrestJS #PWA Progressive Web Apps with Polymer Horacio Gonzalez

    @LostInBrittany
  2. @LostInBrittany @BrestJS #PWA Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard

    lost in Brittany, developer, dreamer and all-around geek
  3. @LostInBrittany @BrestJS #PWA Apps vs Web mobile Yet again...

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

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

    the Web You had the whole desktop internet in your hands Everywhere !
  6. @LostInBrittany @BrestJS #PWA Applications?

  7. @LostInBrittany @BrestJS #PWA Applications vs Web Users spend way more

    time on apps than on browser
  8. @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
  9. @LostInBrittany @BrestJS #PWA Apps drive engagement But web drives visitors...

  10. @LostInBrittany @BrestJS #PWA Are you winning the app lottery? If

    you're not in the top 10, you don't exist...
  11. @LostInBrittany @BrestJS #PWA The best of two worlds? Web audience

    and app engagement...
  12. @LostInBrittany @BrestJS #PWA What if the Web evolved? Just as

    it did with Ajax! Image: © Nintendo
  13. @LostInBrittany @BrestJS #PWA Progressive Web Apps The missing link

  14. @LostInBrittany @BrestJS #PWA What's Missing? 1. Homescreen Access 2. Push

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

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

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

    proxy Fully programmable: https://serviceworke.rs/ • Cache • Notifications HTTPS only
  18. @LostInBrittany @BrestJS #PWA Service Workers Sad Safari by Chris Joel

  19. @LostInBrittany @BrestJS #PWA AppShell Minimal HTML, CSS, JS • load

    fast • cached • dynamically display content
  20. @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.
  21. @LostInBrittany @BrestJS #PWA Testing the manifest On Chrome Dev Tools

  22. @LostInBrittany @BrestJS #PWA Installability and manifest Sad Safari by Chris

    Joel
  23. @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" } ] }
  24. @LostInBrittany @BrestJS #PWA Notifications and Push APIs Sad Safari by

    Chris Joel
  25. @LostInBrittany @BrestJS #PWA Progressiveness What does it mean?

  26. @LostInBrittany @BrestJS #PWA Progressive means everybody Progressive enhancement as a

    core tenant No matter the browser choice, our web app works for all
  27. @LostInBrittany @BrestJS #PWA But not everything for everybody Core features

    for all, enhanced features for some
  28. @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/
  29. @LostInBrittany @BrestJS #PWA But iOS doesn't support PWA... • Progressive

    Web Apps still work on iOS • Progressive Web Apps perform better on iOS
  30. @LostInBrittany @BrestJS #PWA Example of progressiveness Offline mode

  31. @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()); } });
  32. @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
  33. @LostInBrittany @BrestJS #PWA Offline mode But if I need offline

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

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

    progressive idea Safari users get no offline mode Sad Safari by Chris Joel
  36. @LostInBrittany @BrestJS #PWA Offline mode But the others do And

    Safari still gets a faster app!
  37. @LostInBrittany @BrestJS #PWA How to measure progressiveness? Lighthouse

  38. @LostInBrittany @BrestJS #PWA Lighthouse

  39. @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
  40. @LostInBrittany @BrestJS #PWA I want to know more Give me

    more information
  41. @LostInBrittany @BrestJS #PWA PWA showcase https://developers.google.com/web/showcase/

  42. @LostInBrittany @BrestJS #PWA Conclusion That's all folks!

  43. @LostInBrittany @BrestJS #PWA Thank you!