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.

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. Making apps @sinedied
3. Making apps Web @sinedied
4. Making apps Web Native @sinedied
5. Making apps Web Native Hybrid @sinedied
6. Making apps Web Native Hybrid Cost vs Performance vs Reach @sinedied
7. Making apps Web Native Hybrid Cost vs Performance vs Reach? @sinedied
8. Who can use your app? @sinedied
9. Survivor bias You may be missing something @sinedied
10. What's a PWA? @sinedied
11. It's not @sinedied
12. It's not A framework @sinedied
13. It's not A framework A new technology @sinedied
14. It's "just" a web app @sinedied
15. It's "just" a web app @sinedied
16. It's "just" a web app With a better user experience @sinedied
17. Google's definition @sinedied Progressive Web Apps are user experiences that have the reach of the web, and are fast, reliable and engaging “
18. Google's definition @sinedied Progressive Web Apps are user experiences that have the reach of the web, and are fast, reliable and engaging “
19. 2003 @sinedied Progressive Enhancement  Looking back
20. 2003 2007 @sinedied Progressive Enhancement iPhone: Web 2.0 + AJAX  Looking back
21. 2003 2007 2008 @sinedied Progressive Enhancement iPhone: Web 2.0 + AJAX SproutCore  Looking back
22. 2003 2007 2008 @sinedied Progressive Enhancement iPhone: Web 2.0 + AJAX SproutCore, iOS SDK + App Store  Looking back
23. 2003 2007 2008 2009 @sinedied Progressive Enhancement iPhone: Web 2.0 + AJAX SproutCore, iOS SDK + App Store Modernizr  Looking back
24. 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
25. 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
26. 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
27. The 3 principles of @sinedied
28. Fast @sinedied 53% of users lost if app loading > 3s 53% of users lost if app loading > 3s
29. Reliable @sinedied Always work, start quickly Always work, start quickly
30. Engaging @sinedied Feels like a native experience Feels like a native experience
31. Twitter Native App 131 MB Twitter Lite PWA 2.2MB Benefits for users @sinedied
32. Average internet speed by country @sinedied
33. 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
34. How? @sinedied
35. PWA Checklist ✅ HTTPS ✅ Responsive Web Design ✅ Offline (ie Service Worker) ✅ Web App Manifest ✅ TTI < 10s on 3G ✅ Cross-{browser, device} @sinedied
36. PWA (minimal) Checklist ✅ HTTPS ✅ Responsive Web Design ✅ Offline (ie Service Worker) ✅ Web App Manifest ✅ TTI < 10s on 3G ✅ Cross-{browser, device} @sinedied
37. PWA (minimal) Checklist ✅ Offline (ie Service Worker) ✅ Web App Manifest ✅ TTI < 10s on 3G @sinedied ✅ HTTPS ✅ Responsive Web Design ✅ Cross-{browser, device}
38. developers.google.com/web/updates/2018/05/beyond-spa Service Worker
39. developers.google.com/web/updates/2018/05/beyond-spa Service Worker
40. Libraries WorkBox @angular/service-worker UpUp offline-plugin for Webpack Service Worker
41. serviceworke.rs - The cookbook
42. jakearchibald.github.io/isserviceworkerready/ @sinedied Service Worker - Can I use it?
43. <link rel="manifest" href="manifest.webmanifest"/> @sinedied Web App Manifest
44. <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/icon@512.png", "sizes": "512x512", "type": "image/png" }, ... ] } @sinedied Web App Manifest
45. caniuse.com/web-app-manifest Web App Manifest - Can I use it?
46. @sinedied TTI < 10s on 3G
47. GO FAST! @sinedied TTI < 10s on 3G
48. Lighthouse @sinedied TTI < 10s on 3G
49. TTI < 10s on 3G
50. Patterns Lazy loading SSR (Server Side Rendering) PRPL Pattern App Shell @sinedied TTI < 10s on 3G
51. @sinedied SSR
52. @sinedied SSR
53. SSR + SPA = Universal Apps SSR
54. SSR + SPA = Universal Apps 1. Initial render on the server 2. Send static HTML 3. Load SPA app bundle 4. Rehydrate SSR
55. SSR + SPA = Universal Apps 1. Initial render on the server 2. Send static HTML 3. Load SPA app bundle 4. Rehydrate SSR
56. 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
57. 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
58. developers.google.com/web/fundamentals/architecture/app-shell App Shell
59. developers.google.com/web/fundamentals/performance/prpl-pattern App Shell
60. Now what?
61. Deploy. ✅ Deploy. ✅ @sinedied @sinedied
62. Android TWA ✅ iOS Need wrapper app ⚠ Windows AppX ✅ Store distribution pwabuilder.com @sinedied
63. @sinedied
65. Web PWA Web/Hybrid Native/Hybrid Native Cross-platform Single codebase Integrated look'n feel App store Performance Cost effectiveness @sinedied PWA vs hybrid
66.  @ShouldBePWA
67. The Web gives freedom Speed is a form of accessibility User experience drives success @sinedied
68. const end = { message: 'Thank you!', slides : 'bit.ly/everypwa', link : 'aka.ms/gopwa' // Get started with PWA }; alert('Questions?'); {    } @sinedied