A Fullstack Future - Progressive Web Apps
1 like521 views
The document discusses progressive web apps (PWAs), highlighting their accessibility and advantages such as speed, reliability, and engagement. It provides a checklist for PWA development and mentions notable examples like Starbucks and Instagram. The content emphasizes the importance of addressing emerging markets where mobile data limitations influence app usage.
A Fullstack Future - Progressive Web Apps
- 2. Hi, I’m Frances (your professor)! ! Software Engineer @slackhq Mentor @thinkful @fvcproductions
- 4. Curriculum • Why even? 🤔 (50%) • Embracing the web • Where even? 👀 (50%) • Examples in real life @fvcproductions
- 5. Why even? 🤔 @fvcproductions
- 6. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶🚗 @fvcproductions
- 9. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
- 10. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 15. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 16. @fvcproductionsThe State of LTE (Nov 2017)
- 17. @fvcproductions
- 18. @fvcproductions
- 19. 4GB Availability Worldwide @fvcproductions @fvcproductions
- 23. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
- 24. @fvcproductions Emerging markets are becoming more crucial
- 25. @fvcproductions ~53% of the world has access to the Internet now
- 26. @fvcproductions
- 27. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
- 29. Where even? 👀 @fvcproductions
- 31. @fvcproductions
- 32. Exploring Examples • Starbucks (Food) • Instagram (Photos) • Forbes (News) • Trivago (Travel) • Flipkart (Ecommerce) 😲 @fvcproductions
- 33. @fvcproductions
- 36. Forbes
- 37. Trivago
- 38. Flipkart
- 40. No centralized hub @fvcproductions
- 41. No centralized hub @fvcproductions
- 42. @fvcproductions
- 43. @fvcproductions
- 44. @fvcproductions
- 46. @fvcproductions
- 47. 🔥 Checklist • Integrated • 1. manifest.json • 2. HTML enhancements • Reliable • 3. sw.js • 4. HTTPs @fvcproductions
- 48. FIN
- 49. Thanks for listening! 💛 @fvcproductions
- 50. These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 51. 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 @fvcproductions