Download to read offline
Uploaded byFrances Coronel
Telegraph Track - Progressive Web Apps 101
This document introduces Progressive Web Apps (PWAs) as a modern web technology combining the best of web and mobile apps. It covers prerequisites like HTML and JavaScript knowledge, the advantages of PWAs, a checklist for implementation, and various examples of successful applications. The content also addresses the challenges of PWAs, emphasizes the importance of a native-like experience, and provides resources for further learning.
More Related Content
Similar to Telegraph Track - Progressive Web Apps 101
Telegraph Track - Progressive Web Apps 101
- 1. Progressive Web Apps101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. Hi, I’m Frances(your professor)! ! Software Engineer, Customer Acquisition @SlackHQ @fvcproductions
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. Hi, I’m Frances(your professor)! ! Software Engineer @SlackHQ @fvcproductions
- 10.
- 11.
- 12. Curriculum Why even? 🤔(25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process @fvcproductions
- 13. 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 @fvcproductions
- 14. Disclaimers • I don'twork for Google but I will be mentioning lots of Googly stuff • Not gonna be talking about Slack work • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff @fvcproductions
- 15. Why even? 🤔@fvcproductions
- 16. Most accessible platform acrossthe world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥 @fvcproductions
- 17.
- 18.
- 19.
- 20. PWA Checklist • Fast •Integrated • Reliable • Engaging @fvcproductions
- 21. Fast First Paint FirstContentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 22.
- 23.
- 24.
- 25.
- 26. @fvcproductions 🔥 !!! • Fast •Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 27.
- 28. @fvcproductionsThe State ofLTE (Nov 2017)
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. But what aboutthe rest of the world... 🌍 @fvcproductions
- 41. @fvcproductions ~70% of peoplein emerging markets consider app size before downloading due to data costs and storage space
- 42. @fvcproductions Emerging markets are becomingmore crucial
- 43. @fvcproductions ~53% of theworld has access to the Internet now
- 44. Size of TwitterClients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 @fvcproductions 1.3
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 55. Where even? 👀@fvcproductions
- 56.
- 57.
- 58.
- 59.
- 60. Do the bigcompanies support this though? 🤔 @fvcproductions
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. Exploring Examples • Starbucks🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. 1. No centralizedhub @fvcproductions
- 85. No centralized hub@fvcproductions
- 86. No centralized hub@fvcproductions
- 87. Alex Russell "These appsaren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'." @fvcproductions
- 88.
- 89.
- 90.
- 91.
- 92. Lol jk • DifferentFrances - they're married lol @fvcproductions
- 93. Alex Russell "These appsaren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'." @fvcproductions
- 94.
- 95.
- 96.
- 97. 3. More supportfrom Apple lol @fvcproductions
- 98.
- 99.
- 100. Ok but letme rant about Apple for a sec @fvcproductions
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111. How even? 🛠@fvcproductions
- 112. Testing for PWA Readiness💡 @fvcproductions
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124. Static generators arecool tho @fvcproductions
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135. 1. HTTPs 2. index.html 3.manifest.json 4. sw.js @fvcproductions
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147. 48x48, 72x72, 96x96,144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow @fvcproductions
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160. Remember 🔥 ? •Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
- 161. 🔥 Checklist • Integrated •manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 173.
- 174.
- 175.
- 176. Takeaways Why even? 🤔 Todeliver a native experience with the broad reach of the modern web Where even? 👀 Everywhere! How even? 🛠 A few vitamins @fvcproductions
- 177.
- 178. Thanks for listening!💛 @fvcproductions
- 179. 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 30.Project Stream: https://www.youtube.com/watch? time_continue=10&v=sE53eSbzxoU 31. Verizon 5G: https://www.verizon.com/about/our- company/5g 32.Microsoft & Google: https://www.computerworld.com/ article/3314746/mobile-apps/why-microsoft-and- google-love-progressive-web-apps.html 33.Google Fuschia: https://www.wikiwand.com/en/ Google_Fuchsia 34.Mobile OS Market Share: http://gs.statcounter.com/os- market-share/mobile/china @fvcproductions
- 180. References At least 30more links need to be added here - please refer to the slide notes in the meantime 😂 😅 @fvcproductions
- 181. Questions, comments orconcerns? 💭 @fvcproductions
- 182. These slides willbe shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 183.
- 184. Tech Queens • Firstepisode releasing tomorrow for International Women's Day • If you're interested or know someone, head over to the website and fill out the contact form at the bottom • https://techqueenspod.com @fvcproductions
- 185. Kudos • Music fromJukedeck - create your own at http://jukedeck.com @fvcproductions