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

8592f54ed57e8948e890308f6302054a?s=128

Koen Van den Wijngaert

June 27, 2019
Tweet

Transcript

  1. Supercharging your web app By Koen Van den Wijngaert

  2. LIE-FI

  3. Progressive Web Apps

  4. Progressive Web Apps ✓ What are they? ✓ Why should

    we use them? ✓ What can they do? ✓ Who uses them? ✓ How do I start?
  5. What are they?

  6. 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.
  7. Where did they come from?

  8. 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
  9. Cool, right?!

  10. 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
  11. evolutionoftheweb.com

  12. Why should we use them?

  13. The State of Mobile ✓ As of May 2019, 49%

    of visitors are mobile ✓ Solving the distribution problem ✓ Capability vs. Reach
  14. Advantages of PWA vs Website ✓ Reliable performance ✓ Worthy

    of being on homescreen ✓ Increased engagement ✓ Improved conversions developers.google.com/web/progressive-web-apps/
  15. Are we ready now? Yes!

  16. Web Share API

  17. Web Bluetooth API

  18. Web Crypto API

  19. Web VR

  20. Credential Management

  21. Payment Request API

  22. Gamepad API

  23. Web Components

  24. And many more. whatwebcando.today

  25. None
  26. Who uses them? Progressive Web Apps in The Wild…

  27. Pokedex.org

  28. appsco.pe/toplist

  29. RIP

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

  31. What can they do?

  32. Progressive Web App Features DISCOVERABLE SAFE RESPONSIVE RE-ENGAGEABLE PROGRESSIVE NETWORK

    INDEPENDENT LINKABLE INSTALLABLE
  33. Progressive Web Apps need to be… INSTALLABLE

  34. manifest.webmanifest INSTALLABLE

  35. DISCOVERABLE Progressive Web Apps need to be…

  36. DISCOVERABLE PWA Directory Appsco.pe

  37. Progressive Web Apps need to be… LINKABLE

  38. Progressive Web Apps need to be… SAFE

  39. Progressive Web Apps need to be… PROGRESSIVE

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

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

  42. Progressive Web Apps need to be… RESPONSIVE

  43. Progressive Web Apps need to be… NETWORK INDEPENDENT

  44. 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
  45. Enter Service Workers

  46. Service Workers NETWORK INDEPENDENT

  47. Service Worker Registration NETWORK INDEPENDENT

  48. Service Worker Lifecycle NETWORK INDEPENDENT INSTALLED / WAITING ACTIVATING /

    ACTIVE INSTALLING
  49. Lie-Fi? SaaM* To The Rescue! NETWORK INDEPENDENT * Superman as

    a Man in The Middle
  50. Handling requests NETWORK INDEPENDENT

  51. Caching strategies NETWORK INDEPENDENT Network or Cache Cache Only Cache

    and Update Cache, Update and Refresh Two sides of the scale: speed vs freshness
  52. Network or Cache NETWORK INDEPENDENT You want to show the

    most up to date content but it’s preferable to load fast. jakearchibald.com
  53. 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
  54. Cache and Update NETWORK INDEPENDENT Send cached version, but update

    caches for next time (staleWhileRevalidate) jakearchibald.com
  55. Advanced usages NETWORK INDEPENDENT Streaming data Web Push API Architectural

    Patterns Queuing Requests Background Sync
  56. How do I start?

  57. 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
  58. Useful Tools Lighthouse Polymer UpUp

  59. None
  60. Workbox ✓ Precaching ✓ Routing ✓ Caching strategies ✓ Cache

    expiry ✓ Background Sync ✓ Offline Google Analytics ✓ Response-based caching ✓ Broadcast updates ✓ Streams ✓ Client module
  61. In my ecosystem?

  62. Resources ✓ Offline Cookbook ✓ Serviceworke.rs ✓ developers.google.com ✓ developer.mozilla.org

    ✓ jakearchibald.github.io/isserviceworkerready
  63. Thanks for listening! @vdwijngaert Koen Van den Wijngaert SiteOptimo.com