Pluralsight LIVE 2019 | Progressive Web Apps 101
•
1 like•274 views
Progressive Web Apps 101 Progressive Web Apps (PWAs) bring features we expect from native apps to the mobile browser experience and are on track to becoming the new golden web standard. In this class, I'll walk you through the steps of transforming an existing website into a PWA from the bottom up and together, we'll explore the wide array of companies that have already benefited from the many enhancements PWAs offer. Pluralsight LIVE August 27, 2019, from 1:00 pm to 1:45 pm Grand America Hotel Salt Lake City, Utah Little America Ballroom A/B
Recommended
More Related Content
Similar to Pluralsight LIVE 2019 | Progressive Web Apps 101
Similar to Pluralsight LIVE 2019 | Progressive Web Apps 101 (20)
More from Frances Coronel
More from Frances Coronel (20)
Recently uploaded
Recently uploaded (20)
Pluralsight LIVE 2019 | Progressive Web Apps 101
- 1. @fvcproductions Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. @fvcproductions Hi, I’m Frances (your professor)! ! Software Engineer, Customer Acquisition
- 6. @fvcproductions Curriculum Why even? 🤔 (25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process
- 7. @fvcproductions Expectations • You have intermediate experience in both 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
- 8. @fvcproductions Disclaimers • I don't work for Google or Microsoft but I will be mentioning lots of Googly & Microsofty (?) stuff • Not gonna be talking about my work at Slack • Also, don't complain to me about Slack 😂 • I'm not a developer advocate trying to sell you on PWAs- I'm just a FE dev who likes to talk about FE stuff
- 9. @fvcproductions Why even? 🤔 @fvcproductions
- 10. @fvcproductions Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥
- 12. @fvcproductions
- 13. @fvcproductions
- 14. @fvcproductions PWA Checklist • Fast • Integrated • Reliable • Engaging
- 15. @fvcproductions Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive
- 20. @fvcproductions But I need an easy way to remember all this stuff
- 21. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 23. @fvcproductionsThe State of LTE (Nov 2017)
- 28. @fvcproductions
- 33. @fvcproductions
- 34. @fvcproductions But what about the rest of the world... 🌍
- 35. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
- 36. @fvcproductions Emerging markets are becoming more crucial @fvcproductions
- 37. @fvcproductions ~53% of the world has access to the Internet now @fvcproductions
- 38. @fvcproductions Size of Twitter Clients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 1.3
- 41. @fvcproductions
- 42. @fvcproductions
- 43. @fvcproductions
- 46. @fvcproductions Where even? 👀 @fvcproductions
- 52. @fvcproductions Do the big companies support this though? 🤔
- 66. @fvcproductions Exploring Examples Starbucks 🍴🍔🍕🍗🌮 Forbes 📰🗞 Trivago ✈🌎🌍🌏 Flipkart 👜👕💸👚🛍 Hulu 🎥🍿🎬🎞📺 Slack 💬💼💡🧠
- 68. @fvcproductions
- 72. @fvcproductions
- 73. @fvcproductions
- 74. @fvcproductions
- 77. @fvcproductions No centralized hub @fvcproductions
- 78. @fvcproductions No centralized hub @fvcproductions
- 84. @fvcproductions
- 85. @fvcproductions 3. More support from Apple lol
- 86. @fvcproductions
- 87. @fvcproductions
- 88. @fvcproductions How even? 🛠 @fvcproductions
- 91. @fvcproductions
- 94. @fvcproductions
- 99. @fvcproductions Web UI (web.dev) @fvcproductions
- 120. @fvcproductions sw.js 🌐 index.html 😌 manifest.json 📝 HTTPs 🔒 @fvcproductions
- 121. @fvcproductions HTTPs 🔒 Web App Manifest 📝 Service Worker 🌐 ✨ MVPWA ✨
- 122. @fvcproductions 1. HTTPs 🔒 2. index.html 😌 3. manifest.json 📝 4. sw.js 🌐
- 128. @fvcproductions
- 129. @fvcproductions
- 131. @fvcproductions index.html <head></head> Adding manifest, viewport, icons @fvcproductions
- 138. @fvcproductions 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 143. @fvcproductions
- 147. @fvcproductions
- 154. @fvcproductions Remember 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 155. @fvcproductions 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs
- 160. @fvcproductions
- 164. @fvcproductions
- 165. @fvcproductions
- 166. @fvcproductions
- 167. @fvcproductions
- 170. @fvcproductions Takeaways Why even? 🤔 To deliver a native experience with the broad reach of the modern web Where even? 👀 Everywhere! How even? 🛠 A few vitamins
- 173. @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/
- 174. @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.co m/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/
- 175. @fvcproductions Questions, comments or concerns? 💭 Let’s chat after. ^
- 176. @fvcproductions These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 178. @fvcproductions