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.

* 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

More Decks by Koen Van den Wijngaert

Other Decks in Programming


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

    we use them? ✓ What can they do? ✓ Who uses them? ✓ How do I start?
  2. 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.
  3. 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
  4. 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
  5. The State of Mobile ✓ As of May 2019, 49%

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

    of being on homescreen ✓ Increased engagement ✓ Improved conversions developers.google.com/web/progressive-web-apps/
  7. RIP

  8. 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
  9. Caching strategies NETWORK INDEPENDENT Network or Cache Cache Only Cache

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

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

    caches for next time (staleWhileRevalidate) jakearchibald.com
  13. 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
  14. Workbox ✓ Precaching ✓ Routing ✓ Caching strategies ✓ Cache

    expiry ✓ Background Sync ✓ Offline Google Analytics ✓ Response-based caching ✓ Broadcast updates ✓ Streams ✓ Client module