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

PWA: Supercharging your webapp

PWA: Supercharging your webapp

You've probably heard about the revolution in web development: Progressive Web Apps. In this talk, Koen will introduce you to the wonderful world of PWAs and what they're all about. In a world of connectedness, the offline-first approach is often neglected.

Leveraging the power of service workers, it is now easier than ever to create awesome near native applications using the technologies you're already acquainted with!

Speaker: While making the web a better place at SiteOptimo, Koen likes playing around with interesting new technologies to see how they can improve both the developer's and user's experience. In his spare time, he fails graciously at trying to balance his various interests and hobbies.

Links
-------
* evolutionoftheweb.com: http://www.evolutionoftheweb.com/
* Jake Archibald: https://jakearchibald.com
* whatwebcando.today: https://whatwebcando.today/
* Offline Cookbook: https://jakearchibald.com/2014/offline-cookbook
* Serviceworke.rs: https://serviceworke.rs
* developers.google.com: https://developers.google.com/web/progressive-web-apps/
* developer.mozilla.org: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
* jakearchibald.github.io/isserviceworkerready: https://jakearchibald.github.io/isserviceworkerready

Koen Van den Wijngaert

June 27, 2019
Tweet

More Decks by Koen Van den Wijngaert

Other Decks in Programming

Transcript

  1. Supercharging your web app
    By Koen Van den Wijngaert

    View full-size slide

  2. Progressive Web Apps

    View full-size slide

  3. Progressive Web Apps
    ✓ What are they?
    ✓ Why should we use them?
    ✓ What can they do?
    ✓ Who uses them?
    ✓ How do I start?

    View full-size slide

  4. What are they?

    View full-size slide


  5. Progressive web apps use modern web APIs along with
    the traditional progressive enhancement strategy to
    create cross-platform web applications.
    These apps work everywhere and provide several
    features that give them the same user experience
    advantages as native apps.

    View full-size slide

  6. Where did they come from?

    View full-size slide


  7. The full Safari engine is inside of iPhone. And so, you
    can write amazing Web 2.0 and Ajax apps that look
    exactly and behave exactly like apps on the iPhone.
    And these apps can integrate perfectly with iPhone
    services. [...]
    And guess what? There’s no SDK that you need!
    You’ve got everything you need if you know how to
    write apps using the most modern web standards to
    write amazing apps for the iPhone today.
    — Steve Jobs, at the WWDC °11/6/2017

    View full-size slide

  8. Cool, right?!

    View full-size slide


  9. Let me just say it: We want native third party
    applications on the iPhone, and we plan to have
    an SDK in developers hands in February.
    — Also Steve Jobs, 4 months later °17/10/2017

    View full-size slide

  10. evolutionoftheweb.com

    View full-size slide

  11. Why should we use them?

    View full-size slide

  12. The State of Mobile
    ✓ As of May 2019, 49% of visitors are mobile
    ✓ Solving the distribution problem
    ✓ Capability vs. Reach

    View full-size slide

  13. Advantages of PWA vs Website
    ✓ Reliable performance
    ✓ Worthy of being on homescreen
    ✓ Increased engagement
    ✓ Improved conversions
    developers.google.com/web/progressive-web-apps/

    View full-size slide

  14. Are we ready now?
    Yes!

    View full-size slide

  15. Web Share API

    View full-size slide

  16. Web Bluetooth API

    View full-size slide

  17. Web Crypto API

    View full-size slide

  18. Credential Management

    View full-size slide

  19. Payment Request API

    View full-size slide

  20. Web Components

    View full-size slide

  21. And many more.
    whatwebcando.today

    View full-size slide

  22. Who uses them?
    Progressive Web Apps in The Wild…

    View full-size slide

  23. appsco.pe/toplist

    View full-size slide

  24. offline-dino-game.firebaseapp.com
    Just kidding!

    View full-size slide

  25. What can they do?

    View full-size slide

  26. Progressive Web App Features
    DISCOVERABLE
    SAFE
    RESPONSIVE
    RE-ENGAGEABLE
    PROGRESSIVE
    NETWORK
    INDEPENDENT
    LINKABLE
    INSTALLABLE

    View full-size slide

  27. Progressive Web Apps need to be…
    INSTALLABLE

    View full-size slide

  28. manifest.webmanifest
    INSTALLABLE

    View full-size slide

  29. DISCOVERABLE
    Progressive Web Apps need to be…

    View full-size slide

  30. DISCOVERABLE
    PWA Directory Appsco.pe

    View full-size slide

  31. Progressive Web Apps need to be…
    LINKABLE

    View full-size slide

  32. Progressive Web Apps need to be…
    SAFE

    View full-size slide

  33. Progressive Web Apps need to be…
    PROGRESSIVE

    View full-size slide

  34. Progressive Web Apps need to be…
    RE-ENGAGEABLE

    View full-size slide

  35. Web Push API
    RE-ENGAGEABLE
    Server
    Push service
    Client

    View full-size slide

  36. Progressive Web Apps need to be…
    RESPONSIVE

    View full-size slide

  37. Progressive Web Apps need to be…
    NETWORK
    INDEPENDENT

    View full-size slide


  38. We live in a disconnected & battery powered world, but
    our technology and best practices are a leftover from the
    always connected & steadily powered past.
    The Offline First Approach - offlinefirst.org

    View full-size slide

  39. Enter Service Workers

    View full-size slide

  40. Service Workers
    NETWORK
    INDEPENDENT

    View full-size slide

  41. Service Worker Registration
    NETWORK
    INDEPENDENT

    View full-size slide

  42. Service Worker Lifecycle
    NETWORK
    INDEPENDENT
    INSTALLED /
    WAITING
    ACTIVATING /
    ACTIVE
    INSTALLING

    View full-size slide

  43. Lie-Fi? SaaM* To The Rescue!
    NETWORK
    INDEPENDENT
    * Superman as a Man in The Middle

    View full-size slide

  44. Handling requests
    NETWORK
    INDEPENDENT

    View full-size slide

  45. Caching strategies
    NETWORK
    INDEPENDENT
    Network or Cache
    Cache Only
    Cache and Update
    Cache, Update and Refresh
    Two sides of the scale: speed vs freshness

    View full-size slide

  46. Network or Cache
    NETWORK
    INDEPENDENT
    You want to show the most up to date content but it’s preferable to load fast.
    jakearchibald.com

    View full-size slide

  47. Cache Only
    NETWORK
    INDEPENDENT
    For a given version of your site, you have static content that never changes such as
    the shell around the content.
    jakearchibald.com

    View full-size slide

  48. Cache and Update
    NETWORK
    INDEPENDENT
    Send cached version, but update caches for next time (staleWhileRevalidate)
    jakearchibald.com

    View full-size slide

  49. Advanced usages
    NETWORK
    INDEPENDENT
    Streaming data
    Web Push API
    Architectural Patterns
    Queuing Requests
    Background Sync

    View full-size slide

  50. How do I start?

    View full-size slide

  51. What do I need?
    manifest.webmanifest (+link)
    ✓ Name
    ✓ Icon
    ✓ Start URL
    ✓ Display Mode != browser
    serviceworker.js
    ✓ Registered in client JS
    ✓ Installed & Active
    ✓ HTTPS
    ✓ Offline fallback

    View full-size slide

  52. Useful Tools
    Lighthouse Polymer UpUp

    View full-size slide

  53. Workbox
    ✓ Precaching
    ✓ Routing
    ✓ Caching strategies
    ✓ Cache expiry
    ✓ Background Sync
    ✓ Offline Google Analytics
    ✓ Response-based caching
    ✓ Broadcast updates
    ✓ Streams
    ✓ Client module

    View full-size slide

  54. In my ecosystem?

    View full-size slide

  55. Resources
    ✓ Offline Cookbook
    ✓ Serviceworke.rs
    ✓ developers.google.com
    ✓ developer.mozilla.org
    ✓ jakearchibald.github.io/isserviceworkerready

    View full-size slide

  56. Thanks for listening!
    @vdwijngaert
    Koen Van den Wijngaert
    SiteOptimo.com

    View full-size slide