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

How not to mess up your first PWA

How not to mess up your first PWA

Avatar for Dmitri Pisarev

Dmitri Pisarev

June 18, 2020
Tweet

More Decks by Dmitri Pisarev

Other Decks in Programming

Transcript

  1. Dmitri Pisarev, Neos Conference 2020 How not to Mess up

    Your First PWA Wish I knew this stuff earlier…
  2. - Christian believer ❤ - Into web dev since 2005

    - Volunteer @ SFI.ru - Part-time @ DEED - team member Dmitri Pisarev Me, COVID-19 edition @dimaip dimaip.github.io
  3. Why Native Apps are so engaging? + offline, performance, reliability

    + push notifications + home screen icon, OS integration + hardware access
  4. Native Apps + Web React Native Flutter, Xamarin Cordova/Capacitor -

    3x effort - Web is an afterthought - Yoga !== CSS - No JS no Love - WebView << Safari/Chrome - App Store review?! Options?
  5. What are PWAs? + Offline (ServiceWorker) + push notifications (WebPush)

    + home screen icon (manifest.json) + other cool web APIs
  6. iOS + SW support since iOS 11.3 - No App

    Store - No push notifications - No install prompt - No SW in WKWebView Support Android + PWA paradise! + Submit to Play Market as Trusted Web Activity
  7. We are stuck! - Reload? - Restart device? - Delete

    service worker? - Replace with empty service worker? ⏳ - HTTP header Clear-Site-Data: "*"
  8. Caching Strategies - Stale-While-Revalidate - Cache First (Cache Falling Back

    to Network) - Network First (Network Falling Back to Cache) - Network Only Hand-rolling is hard and dangerous!
  9. Solution 1. Keep previous versions of assets PROS: the most

    reliable solution CONS: not many platforms support it out of the box
  10. Solution 2. Catch exceptions and force-reload SW PROS: works with

    all deployment platforms CONS: horrible UX for stateful apps
  11. Solution 3. Pre-cache all JS bundles with a service worker

    PROS: prefetching makes sense in many cases anyways CONS: does not conserve bandwidth
  12. 1. Choose the right platform 2. Make sure you understand

    Service Workers well 3. Pretend to be native Too long; Didn’t listen