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

A fairer web for everyone with PWA

A fairer web for everyone with PWA

PWA are cool, but it's more than just another hype buzzword for many people.
As developers we are responsible for building apps that should be usable by everyone, regardless of the device and network performance. But let's be honest: it's rarely the case.

Why should you care, especially as mobile developers? How can you push your app further?

Through this talk and many questions, let's discover the big principles of a PWA from a technical and philosophical standpoint. We will then discuss why PWA are important in the making of a more fair and inclusive app & mobile web landscape.

Yohan Lasorsa

November 23, 2020
Tweet

More Decks by Yohan Lasorsa

Other Decks in Technology

Transcript

  1. A fairer web for everyone with A fairer web for

    everyone with A fairer web for everyone with Progressive Web Apps Progressive Web Apps Progressive Web Apps | Yohan Lasorsa | @sinedied
  2. Google's definition @sinedied Progressive Web Apps are user experiences that

    have the reach of the web, and are fast, reliable and engaging “
  3. Google's definition @sinedied Progressive Web Apps are user experiences that

    have the reach of the web, and are fast, reliable and engaging “
  4. 2003 2007 2008 @sinedied Progressive Enhancement iPhone: Web 2.0 +

    AJAX SproutCore, iOS SDK + App Store  Looking back
  5. 2003 2007 2008 2009 @sinedied Progressive Enhancement iPhone: Web 2.0

    + AJAX SproutCore, iOS SDK + App Store Modernizr  Looking back
  6. 2003 2007 2008 2009 2010 @sinedied Progressive Enhancement iPhone: Web

    2.0 + AJAX SproutCore, iOS SDK + App Store Modernizr Responsive Web Design (RWD) - Ethan Marcott  Looking back
  7. 2003 2007 2008 2009 2010 2015 @sinedied Progressive Enhancement iPhone:

    Web 2.0 + AJAX SproutCore, iOS SDK + App Store Modernizr Responsive Web Design (RWD) - Ethan Marcott Progressive Web Apps (PWA) - Alex Russell  Looking back
  8. 2003 2007 2008 2009 2010 2015 2018 @sinedied Progressive Enhancement

    iPhone: Web 2.0 + AJAX SproutCore, iOS SDK + App Store Modernizr Responsive Web Design (RWD) - Ethan Marcott Progressive Web Apps (PWA) - Alex Russell Service Workers in Edge & Safari  Looking back
  9. Fast @sinedied 53% of users lost if app loading >

    3s 53% of users lost if app loading > 3s
  10. Benefits for developers Benefits for developers Cost efficiency Cost efficiency

    Freedom to deploy and update Freedom to deploy and update Shorter time to market Shorter time to market Seamless onboarding Seamless onboarding Higher conversion rates Higher conversion rates @sinedied @sinedied
  11. PWA Checklist ✅ HTTPS ✅ Responsive Web Design ✅ Offline

    (ie Service Worker) ✅ Web App Manifest ✅ TTI < 10s on 3G ✅ Cross-{browser, device} @sinedied
  12. PWA (minimal) Checklist ✅ HTTPS ✅ Responsive Web Design ✅

    Offline (ie Service Worker) ✅ Web App Manifest ✅ TTI < 10s on 3G ✅ Cross-{browser, device} @sinedied
  13. PWA (minimal) Checklist ✅ Offline (ie Service Worker) ✅ Web

    App Manifest ✅ TTI < 10s on 3G @sinedied ✅ HTTPS ✅ Responsive Web Design ✅ Cross-{browser, device}
  14. <link rel="manifest" href="manifest.webmanifest"/> { "name": "My Awesome PWA", "short_name": "My

    PWA", "theme_color": "#488aff", "background_color": "#488aff", "start_url": "/", "display": "standalone", "icons": [ { "src": "assets/[email protected]", "sizes": "512x512", "type": "image/png" }, ... ] } @sinedied Web App Manifest
  15. SSR + SPA = Universal Apps 1. Initial render on

    the server 2. Send static HTML 3. Load SPA app bundle 4. Rehydrate SSR
  16. SSR + SPA = Universal Apps 1. Initial render on

    the server 2. Send static HTML 3. Load SPA app bundle 4. Rehydrate SSR
  17. SSR + SPA = Universal Apps 1. Initial render on

    the server 2. Send static HTML 3. Load SPA app bundle 4. Rehydrate Angular Universal, Next.js, Nuxt.js... SSR
  18. Push critical resources for the initial URL route Render initial

    route Pre-cache remaining routes Lazy-load and create remaining routes on demand PRPL Pattern
  19. Android TWA ✅ iOS Need wrapper app ⚠ Windows AppX

    ✅ Store distribution pwabuilder.com @sinedied
  20. Web PWA Web/Hybrid Native/Hybrid Native Cross-platform Single codebase Integrated look'n

    feel App store Performance Cost effectiveness @sinedied PWA vs hybrid
  21. The Web gives freedom Speed is a form of accessibility

    User experience drives success @sinedied
  22. const end = { message: 'Thank you!', slides : 'bit.ly/everypwa',

    link : 'aka.ms/gopwa' // Get started with PWA }; alert('Questions?'); {    } @sinedied