Download as PDF, PPTX
Uploaded byFrances Coronel
RevolutionConf 2019 - Progressive Web Apps 101
This document serves as an introduction to Progressive Web Apps (PWAs) and their significance in modern web development, emphasizing the prerequisites of understanding HTML and JavaScript. It highlights the benefits of PWAs, such as being fast, reliable, and engaging, which allow for a native app-like experience across various platforms. The presentation also outlines the essential components for implementing PWAs and discusses the current state of web accessibility, particularly in emerging markets.
More Related Content
Similar to RevolutionConf 2019 - Progressive Web Apps 101
RevolutionConf 2019 - Progressive Web Apps 101
- 1. @fvcproductions Progressive Web Apps101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. @fvcproductions Hi, I’m Frances(your professor)! ! Software Engineer, Customer Acquisition
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. @fvcproductions Curriculum Why even? 🤔(25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process
- 16. @fvcproductions Expectations • You havebasic experience in HTML & JavaScript • You don't know too much about these Progressive Web Apps (PWAs) • Like why they exist • Or where they are used • Or even how to implement one
- 17. @fvcproductions Disclaimers • I don'twork for Google or Microsoft but I will be mentioning lots of Googly & Microsofty (?) stuff • Not gonna be talking about my work at Slack (sorry not sorry) • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff
- 18. @fvcproductions Why even? 🤔@fvcproductions
- 19. @fvcproductions Most accessible platform acrossthe world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥
- 20.
- 21.
- 22.
- 23. @fvcproductions PWA Checklist • Fast •Integrated • Reliable • Engaging
- 24. @fvcproductions Fast First Paint FirstContentful Paint First Meaningful Paint Time to Interactive
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. @fvcproductions 🔥 !!! • Fast •Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 32.
- 33. @fvcproductionsThe State ofLTE (Nov 2017)
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. @fvcproductions But what aboutthe rest of the world... 🌍
- 46. @fvcproductions ~70% of peoplein emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
- 47. @fvcproductions Emerging markets are becomingmore crucial @fvcproductions
- 48. @fvcproductions ~53% of theworld has access to the Internet now @fvcproductions
- 49. @fvcproductions Size of TwitterClients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 1.3
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. @fvcproductions Where even? 👀@fvcproductions
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. @fvcproductions Do the bigcompanies support this though? 🤔
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81. @fvcproductions Exploring Examples Starbucks 🍴🍔😋🍕🍗🌮 Instagram📷🎥📸🎬 Forbes 📰🗞 Trivago ✈🌎🌍🌏 Flipkart 👜👕💸👔👚🛍 Hulu 🎥🍿🎬🎞📺 Slack 💬💼Q💡🧠 🤯
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. @fvcproductions No centralized hub@fvcproductions
- 93. @fvcproductions No centralized hub@fvcproductions
- 94. @fvcproductions Alex Russell "These appsaren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'."
- 95.
- 96.
- 97.
- 98.
- 99. @fvcproductions Same name! • DifferentFrances - they're married lol
- 100. @fvcproductions Alex Russell "These appsaren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'."
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107. @fvcproductions 3. More supportfrom Apple lol
- 108.
- 109.
- 110. @fvcproductions Ok but letme rant about Apple for a sec
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121. @fvcproductions How even? 🛠@fvcproductions
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132. @fvcproductions Web UI (web.dev)@fvcproductions
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152. @fvcproductions sw.js 🌐 index.html 😌 manifest.json📝 HTTPs 🔒 @fvcproductions
- 153.
- 154.
- 155.
- 156. @fvcproductions 1. HTTPs 🔒 2.index.html 😌 3. manifest.json 📝 4. sw.js 🌐
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172. @fvcproductions 48x48, 72x72, 96x96,144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188. @fvcproductions Remember 🔥 ? •Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 189. @fvcproductions 🔥 Checklist • Integrated •manifest.json • HTML enhancements • Reliable • sw.js • HTTPs
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204. @fvcproductions Takeaways Why even? 🤔 Todeliver a native experience with the broad reach of the modern web Where even? 👀 Everywhere! How even? 🛠 A few vitamins
- 205.
- 206.
- 207. @fvcproductions References 1. Slack website:https://slack.com 2. Progressive Web Apps Checklist: https:// developers.google.com/web/progressive-web- apps/checklist 3. US Design System Standards: https:// designsystem.digital.gov/components/ typography/ 4. PWAs: building bridges to mobile, desktop, and native (Google I/O ’18) : https:// www.youtube.com/watch?v=NITk4kXMQDw 5. Tooling for Progressive Web Apps: https:// www.youtube.com/watch?v=_CO3XZj00no 6. OneSignal: The State of LTE: https:// opensignal.com/reports/2017/11/state-of-lte 7. Syntax Highlighting: https://carbon.now.sh 8. Workbox: https://developers.google.com/web/ tools/workbox/ 9. Comscore 2017 US Mobile App Report: https:// www.comscore.com/Insights/Presentations- and-Whitepapers/2017/The-2017-US-Mobile- App-Report 10. Music from Jukedeck - create your own at http://jukedeck.com 11. Speedtest 2017 US Market Report by Ookla: http://www.speedtest.net/reports/united-states 12. Jopwell Stock Photos: https://www.jopwell.com 13. Service workers explained: https:// www.netlify.com/blog/2017/10/31/service- workers-explained/ 14. App revenue climbed 35 percent to $60 billion in 2017: https://techcrunch.com/2018/01/05/app- revenue-climbed-35-percent-to-60-billion- in-2017 15. Shrinking APKs, growing installs: https:// medium.com/googleplaydev/shrinking-apks- growing-installs-5d3fcba23ce2 16. We Are Social - Digital in 2018 Report: https:// wearesocial.com/us/blog/2018/01/global-digital- report-2018 17. Hugoma Theme: https://github.com/ fvcproductions/hugoma 18. PWAs 101 (same title lol): https:// medium.freecodecamp.org/progressive-web- apps-101-the-what-why-and-how-4aa5e9065ac2 19. Build the Next Generation of Mobile Web: https://www.youtube.com/watch? v=3tb-1MWg44Y 20.YouTube: Trivago, Forbes and Flipkart Video 21. PWA Builder: https://www.pwabuilder.com/ 22.Netlify: https://netlify.com 23.Static Site Generators: https:// www.staticgen.com/ 24.Gatsby: https://www.gatsbyjs.org/ 25.React: https://reactjs.org/
- 208. @fvcproductions References 1. Hugo: https://gohugo.io/ 2.Go: https://golang.org/ 3. OneSignal: https://onesignal.com/ 4. Norfolk: https://www.wikiwand.com/ en/Naval_Station_Norfolk 5. Project Stream: https:// www.youtube.com/watch? time_continue=10&v=sE53eSbzxoU 6. Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19): https:// www.youtube.com/watch? v=2KhRmFHLuhE 7. Verizon 5G: https://www.verizon.com/ about/our-company/5g 8. Microsoft & Google: https:// www.computerworld.com/article/ 3314746/mobile-apps/why-microsoft- and-google-love-progressive-web- apps.html 9. Google Fuschia: https:// www.wikiwand.com/en/Google_Fuchsia 10. Mobile OS Market Share: http:// gs.statcounter.com/os-market-share/ mobile/china 11. Manifest.json on MDN: https:// developer.mozilla.org/en-US/docs/ Mozilla/Add-ons/WebExtensions/ manifest.json 12. Microsoft - Progressive Web Overview: https://www.youtube.com/watch? v=ugAewC3308Y 13. Microsoft - Building Progressive Web Apps: https:// mybuild.techcommunity.microsoft.com/ sessions/77018? source=TechCommunity 14. What’s New with Chrome and the Web (Google I/O ’19): https:// www.youtube.com/watch? v=rUUazNIZW7I 15. Techqueria: https://techqueria.org 16. Tech Queens: https:// techqueenspod.com 17. Jukedeck: https://jukedeck.com 18. AARRR Pirate Metrics for Startups - How to Grow Revenue - Boardview: https://boardview.io/blog/startup- metrics-two-jackpot-moments-make- pirates-go-aarrr/
- 209. @fvcproductions Questions, comments or concerns?💭 Let’s chat after. g
- 210. @fvcproductions These slides willbe shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 212. @fvcproductions Kudos • Music fromJukedeck - create your own at http://jukedeck.com
- 213. @fvcproductions Tech Queens • 6episodes so far • If you're interested or know someone, head over to the website and fill out the contact form at the bottom • https://techqueenspod.com