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.

Transcript

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

   View Slide

2. @LostInBrittany
   @BrestJS #PWA
   Horacio Gonzalez
   @LostInBrittany
   Cityzen Data
   http://cityzendata.com
   Spaniard lost in Brittany,
   developer, dreamer and
   all-around geek
   

   View Slide

3. @LostInBrittany
   @BrestJS #PWA
   Apps vs Web mobile
   Yet again...
   

   View Slide

4. @LostInBrittany
   @BrestJS #PWA
   How did the Web beat native
   applications on the desktop?
   Distribution Is The Hardest
   Problem In Software
   

   View Slide

5. @LostInBrittany
   @BrestJS #PWA
   The Mobile Internet came when
   it brought the Web
   You had the whole
   desktop internet in
   your hands
   Everywhere !
   

   View Slide

6. @LostInBrittany
   @BrestJS #PWA
   Applications?
   

   View Slide

7. @LostInBrittany
   @BrestJS #PWA
   Applications vs Web
   Users spend way more time on apps than on browser
   

   View Slide

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
   

   View Slide

9. @LostInBrittany
   @BrestJS #PWA
   Apps drive engagement
   But web drives visitors...
   

   View Slide

10. @LostInBrittany
    @BrestJS #PWA
    Are you winning the app lottery?
    If you're not in the top 10, you don't exist...
    

    View Slide

11. @LostInBrittany
    @BrestJS #PWA
    The best of two worlds?
    Web audience and app engagement...
    

    View Slide

12. @LostInBrittany
    @BrestJS #PWA
    What if the Web evolved?
    Just as it did with Ajax!
    Image: © Nintendo
    

    View Slide

13. @LostInBrittany
    @BrestJS #PWA
    Progressive Web Apps
    The missing link
    

    View Slide

14. @LostInBrittany
    @BrestJS #PWA
    What's Missing?
    1. Homescreen Access
    2. Push Notifications
    3. Offline
    4. Access to terminal capabilities
    

    View Slide

15. @LostInBrittany
    @BrestJS #PWA
    PWA
    Mix of new and not so new technologies
    to make webapp evolve
    

    View Slide

16. @LostInBrittany
    @BrestJS #PWA
    Some core technologies
    ● Service workers
    ● App Shell
    ● Installability and App Manifest
    ● Notifications and Push APIs
    

    View Slide

17. @LostInBrittany
    @BrestJS #PWA
    Service Workers
    JavaScript Worker acting as a proxy
    Fully programmable: https://serviceworke.rs/
    ● Cache
    ● Notifications HTTPS only
    

    View Slide

18. @LostInBrittany
    @BrestJS #PWA
    Service Workers
    Sad Safari by Chris Joel
    

    View Slide

19. @LostInBrittany
    @BrestJS #PWA
    AppShell
    Minimal HTML, CSS, JS
    ● load fast
    ● cached
    ● dynamically display
    content
    

    View Slide

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.
    

    View Slide

21. @LostInBrittany
    @BrestJS #PWA
    Testing the manifest
    On Chrome Dev Tools
    

    View Slide

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

    View Slide

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" }
    ]
    }
    

    View Slide

24. @LostInBrittany
    @BrestJS #PWA
    Notifications and Push APIs
    Sad Safari by Chris Joel
    

    View Slide

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

    View Slide

26. @LostInBrittany
    @BrestJS #PWA
    Progressive means everybody
    Progressive enhancement as a core tenant
    No matter the browser choice,
    our web app works for all
    

    View Slide

27. @LostInBrittany
    @BrestJS #PWA
    But not everything for everybody
    Core features for all,
    enhanced features for some
    

    View Slide

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/
    

    View Slide

29. @LostInBrittany
    @BrestJS #PWA
    But iOS doesn't support PWA...
    ● Progressive Web Apps still work on iOS
    ● Progressive Web Apps perform better on iOS
    

    View Slide

30. @LostInBrittany
    @BrestJS #PWA
    Example of progressiveness
    Offline mode
    

    View Slide

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());
    }
    });
    

    View Slide

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
    

    View Slide

33. @LostInBrittany
    @BrestJS #PWA
    Offline mode
    But if I need offline everywhere?
    Universal alternatives...
    IndexedDB PouchDB
    LocalForage Dexie.js
    

    View Slide

34. @LostInBrittany
    @BrestJS #PWA
    Offline mode
    Online or offline?
    A property
    window.navigator.onLine
    Two events
    online and offline
    

    View Slide

35. @LostInBrittany
    @BrestJS #PWA
    Offline mode
    Or simply back to the progressive idea
    Safari users get no offline mode
    Sad Safari by Chris Joel
    

    View Slide

36. @LostInBrittany
    @BrestJS #PWA
    Offline mode
    But the others do
    And Safari still gets a faster app!
    

    View Slide

37. @LostInBrittany
    @BrestJS #PWA
    How to measure progressiveness?
    Lighthouse
    

    View Slide

38. @LostInBrittany
    @BrestJS #PWA
    Lighthouse
    

    View Slide

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
    

    View Slide

40. @LostInBrittany
    @BrestJS #PWA
    I want to know more
    Give me more information
    

    View Slide

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

    View Slide

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

    View Slide

43. @LostInBrittany
    @BrestJS #PWA
    Thank you!
    

    View Slide