Download to read offline
Uploaded byFrances Coronel
Scenic City Summit 2018 - Progressive Web Apps 101
The document is a presentation about Progressive Web Apps (PWAs), requiring knowledge of HTML and JavaScript. It covers the importance of PWAs, their characteristics such as speed, reliability, and engagement, as well as the basic structure needed to create one. Examples of successful PWAs from various companies are provided, along with guidelines and references for further learning.
More Related Content
Similar to Scenic City Summit 2018 - Progressive Web Apps 101
![Front End Optimization [Cloud Connect 2012]](https://cdn.slidesharecdn.com/ss_thumbnails/cloudconnect2012-hooman-120213135211-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Scenic City Summit 2018 - Progressive Web Apps 101
- 1. Progressive Web Apps101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. Hi, I’m Frances(your professor)! ! Software Engineer @slackhq @fvcproductions 🐳
- 5.
- 6. Hi, I’m Frances(your professor)! ! @fvcproductions
- 7.
- 8.
- 9. Expectations • You havebasic experience in HTML & JavaScript • You don't really know much about Progressive Web Apps (PWAs) • Why they exist • Where they are used • How to build one @fvcproductions
- 10. Disclaimers • I don'twork for Google but I will be mentioning lots of Googly stuff • Slack does not have a PWA • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff @fvcproductions
- 11. Curriculum • Why even?🤔 (25%) • Embracing the web • Where even? 👀 (15%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
- 12. Why even? 🤔@fvcproductions
- 13. Most accessible platform acrossthe world? 📻 🌐📱💻 🖥 🤖 🕶🚗 @fvcproductions
- 14.
- 15.
- 16. PWA Checklist • Fast •Integrated • Reliable • Engaging @fvcproductions
- 17. Fast First Paint FirstContentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 18.
- 19.
- 20.
- 21.
- 22. @fvcproductions 🔥 !!! • Fast •Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 23. @fvcproductionsThe State ofLTE (Nov 2017)
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. @fvcproductions ~70% of peoplein emerging markets consider app size before downloading due to data costs and storage space
- 33. @fvcproductions Emerging markets are becomingmore crucial
- 34. @fvcproductions ~53% of theworld has access to the Internet now
- 35. Size of TwitterClients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
- 36.
- 37. Where even? 👀@fvcproductions
- 38.
- 39.
- 40. Exploring Examples • Starbucks🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. No centralized hub@fvcproductions
- 49. No centralized hub@fvcproductions
- 50.
- 51.
- 52.
- 53. How even? 🛠@fvcproductions
- 54.
- 55.
- 56.
- 59.
- 61.
- 67.
- 69.
- 70.
- 73.
- 74. 1. HTTPs 2. index.html 3.manifest.json 4. sw.js
- 75.
- 76.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88. 48x48, 72x72, 96x96,144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 91.
- 92.
- 93.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102. Remember this 🔥 ? •Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
- 103. 🔥 Checklist • Integrated •manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
- 104.
- 105.
- 106.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115. Thanks for listening!💛 @fvcproductions
- 116. 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/ 26.Hugo: https://gohugo.io/ 27. Go: https://golang.org/ 28.OneSignal: https://onesignal.com/ 29.Norfolk: https://www.wikiwand.com/en/ Naval_Station_Norfolk @fvcproductions
- 117. These slides willbe shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com