Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps 101 - NationJS

268 views

Published on

This was presented at NationJS in DC on May 18th.

Throughout the course, we will explore the wide array of companies that have already benefited from the many enhancements PWAs offer and I will walk you through the steps of transforming an existing website into a Progressive Web App from the bottom up.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Progressive Web Apps 101 - NationJS

  1. 1. Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
  2. 2. Hi, I’m Frances (your professor)! ! Software Engineer @slackhq Mentor @thinkful @fvcproductions
  3. 3. Norfolk, VA
  4. 4. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  5. 5. Curriculum • Why even? 🤔 (25%) • Embracing the web • Where even? 👀 (25%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
  6. 6. Why even? 🤔 @fvcproductions
  7. 7. @fvcproductions
  8. 8. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
  9. 9. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
  10. 10. Integrated @fvcproductions
  11. 11. Reliable @fvcproductions
  12. 12. Engaging @fvcproductions
  13. 13. In Summary @fvcproductions
  14. 14. 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
  15. 15. @fvcproductionsThe State of LTE (Nov 2017)
  16. 16. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  17. 17. @fvcproductions ~53% of the world has access to the Internet now
  18. 18. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
  19. 19. Write once, deploy everywhere! @fvcproductions
  20. 20. Where even? 👀 @fvcproductions
  21. 21. EVERYWHERE! 😮😁 @fvcproductions
  22. 22. Downsides… 😓 @fvcproductions
  23. 23. No centralized hub @fvcproductions
  24. 24. No centralized hub @fvcproductions
  25. 25. How even? 🛠 @fvcproductions
  26. 26. Lighthouse @fvcproductions
  27. 27. 3. sw.js 2. index.html 1. manifest.json HTTPs
  28. 28. hugoma.fvcproductions.com
  29. 29. @fvcproductions
  30. 30. 3. sw.js 2. index.html 1. manifest.json HTTPs
  31. 31. @fvcproductions
  32. 32. @fvcproductions
  33. 33. 1. manifest.json
  34. 34. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 manifest.json icons
  35. 35. 2. index.html @fvcproductions
  36. 36. 3. sw.js @fvcproductions
  37. 37. @fvcproductions
  38. 38. 3. sw.js @fvcproductions
  39. 39. 3. sw.js file manifest @fvcproductions
  40. 40. Remember this 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
  41. 41. 🔥 Checklist • Integrated • 1. manifest.json • 2. HTML enhancements • Reliable • 3. sw.js • 4. HTTPs @fvcproductions
  42. 42. @fvcproductions
  43. 43. sw.js HTML enhancements HTTPs manifest.json
  44. 44. Engaging? @fvcproductions
  45. 45. @fvcproductions
  46. 46. @fvcproductions
  47. 47. FIN
  48. 48. Thanks for listening! 💛 @fvcproductions
  49. 49. References • NationJS website: http://nationjs.com/ • Progressive Web Apps Checklist: https://developers.google.com/web/ progressive-web-apps/checklist • US Design System Standards: https://designsystem.digital.gov/ components/typography/ • PWAs: building bridges to mobile, desktop, and native (Google I/O ’18) : https://www.youtube.com/watch?v=NITk4kXMQDw • Tooling for Progressive Web Apps: https://www.youtube.com/watch? v=_CO3XZj00no • OneSignal: The State of LTE: https://opensignal.com/reports/2017/11/state- of-lte • Syntax Highlighting: https://carbon.now.sh • Workbox: https://developers.google.com/web/tools/workbox/ • Comscore 2017 US Mobile App Report: https://www.comscore.com/ Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App- Report • Music from Jukedeck - create your own at http://jukedeck.com • Speedtest 2017 US Market Report by Ookla: http://www.speedtest.net/ reports/united-states • Jopwell Stock Photos: https://www.jopwell.com • Service workers explained: https://www.netlify.com/blog/2017/10/31/ service-workers-explained/ • 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 • Shrinking APKs, growing installs: https://medium.com/googleplaydev/ shrinking-apks-growing-installs-5d3fcba23ce2 • We Are Social - Digital in 2018 Report: https://wearesocial.com/us/blog/ 2018/01/global-digital-report-2018 • Hugoma Theme: https://github.com/fvcproductions/hugoma-theme @fvcproductions
  50. 50. These slides will be shared ASAP! 🎉 bit.ly/frances-nationjs @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  51. 51. Appendix
  52. 52. 4GB Availability Worldwide @fvcproductions
  53. 53. 4GB Speed Worldwide @fvcproductions
  54. 54. 26.5 Mbps download 12.1 Mbps upload @fvcproductions
  55. 55. 4GB availability 86.94% 4GB speed 13.98 Mbps @fvcproductions
  56. 56. @fvcproductions Emerging markets are becoming more crucial

×