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.

Scenic City Summit 2018 - Progressive Web Apps 101

176 views

Published on

I presented this at Scenic City Summit in Chattanooga, TN from 11:15 am to 12 pm on August 17th, 2018.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Scenic City Summit 2018 - Progressive Web Apps 101

  1. 1. Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
  2. 2. Hi, Iโ€™m Frances (your professor)! ! Software Engineer @slackhq @fvcproductions ๐Ÿณ
  3. 3. @fvcproductions
  4. 4. Hi, Iโ€™m Frances (your professor)! ! @fvcproductions
  5. 5. Norfolk, VA @fvcproductions
  6. 6. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  7. 7. Expectations โ€ข You have basic 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
  8. 8. Disclaimers โ€ข I don't work 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
  9. 9. Curriculum โ€ข Why even? ๐Ÿค” (25%) โ€ข Embracing the web โ€ข Where even? ๐Ÿ‘€ (15%) โ€ข Examples in real life โ€ข How even? ๐Ÿ›  (50%) โ€ข The transformation process @fvcproductions
  10. 10. Why even? ๐Ÿค” @fvcproductions
  11. 11. Most accessible platform across the world? ๐Ÿ“ป ๐ŸŒ๐Ÿ“ฑ๐Ÿ’ป ๐Ÿ–ฅ ๐Ÿค– ๐Ÿ•ถ๐Ÿš— @fvcproductions
  12. 12. The mobile web. ๐ŸŒ๐Ÿ“ฑ @fvcproductions
  13. 13. @fvcproductions
  14. 14. PWA Checklist โ€ข Fast โ€ข Integrated โ€ข Reliable โ€ข Engaging @fvcproductions
  15. 15. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
  16. 16. Integrated @fvcproductions
  17. 17. Reliable @fvcproductions
  18. 18. Engaging @fvcproductions
  19. 19. In Summary @fvcproductions
  20. 20. @fvcproductions ๐Ÿ”ฅ !!! โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications
  21. 21. @fvcproductionsThe State of LTE (Nov 2017)
  22. 22. @fvcproductions
  23. 23. @fvcproductions
  24. 24. 4GB Availability Worldwide @fvcproductions
  25. 25. 4GB Speed Worldwide @fvcproductions
  26. 26. @fvcproductions
  27. 27. @fvcproductions
  28. 28. @fvcproductions @fvcproductions
  29. 29. @fvcproductions @fvcproductions
  30. 30. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  31. 31. @fvcproductions Emerging markets are becoming more crucial
  32. 32. @fvcproductions ~53% of the world has access to the Internet now
  33. 33. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
  34. 34. Write once, deploy everywhere! @fvcproductions
  35. 35. Where even? ๐Ÿ‘€ @fvcproductions
  36. 36. EVERYWHERE! ๐Ÿ˜ณ๐Ÿ˜ฎ๐Ÿ˜ฏ๐Ÿ˜ฒ @fvcproductions
  37. 37. @fvcproductions
  38. 38. Exploring Examples โ€ข Starbucks ๐Ÿด๐Ÿ”๐Ÿ˜‹๐Ÿ•๐Ÿ—๐ŸŒฎ โ€ข Instagram ๐Ÿ“ท๐ŸŽฅ๐Ÿ“ธ๐ŸŽฌ โ€ข Forbes ๐Ÿ“ฐ๐Ÿ—ž โ€ข Trivago โœˆ๐ŸŒŽ๐ŸŒ๐ŸŒ โ€ข Flipkart ๐Ÿ‘œ๐Ÿ‘•๐Ÿ’ธ๐Ÿ‘”๐Ÿ‘š๐Ÿ› ๐Ÿคฏ @fvcproductions
  39. 39. @fvcproductions
  40. 40. @fvcproductions
  41. 41. @fvcproductions
  42. 42. Forbes@fvcproductions
  43. 43. Trivago@fvcproductions
  44. 44. @fvcproductions
  45. 45. Downsidesโ€ฆ ๐Ÿ˜“ @fvcproductions
  46. 46. No centralized hub @fvcproductions
  47. 47. No centralized hub @fvcproductions
  48. 48. @fvcproductions
  49. 49. @fvcproductions
  50. 50. @fvcproductions
  51. 51. How even? ๐Ÿ›  @fvcproductions
  52. 52. Lighthouse @fvcproductions
  53. 53. @fvcproductions
  54. 54. @fvcproductions
  55. 55. @fvcproductions
  56. 56. hugoma.fvcproductions.com @fvcproductions
  57. 57. @fvcproductions @fvcproductions
  58. 58. The Transformation ๐Ÿ› ๐Ÿฆ‹
  59. 59. The caterpillar ๐Ÿ›
  60. 60. sw.js index.html manifest.json HTTPs
  61. 61. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js
  62. 62. 1. HTTPs
  63. 63. sw.js index.html manifest.json HTTPs
  64. 64. @fvcproductions
  65. 65. @fvcproductions
  66. 66. 2. index.html
  67. 67. sw.js index.html manifest.json HTTPs
  68. 68. index.html <head></head> @fvcproductions
  69. 69. @fvcproductions index.html <body></body>
  70. 70. The Cocoon
  71. 71. 3. manifest.json
  72. 72. sw.js index.html manifest.json HTTPs
  73. 73. 3. manifest.json
  74. 74. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
  75. 75. 4. sw.js
  76. 76. sw.js index.html manifest.json HTTPs
  77. 77. O๏ฌ„ine-๏ฌrst @fvcproductions
  78. 78. @fvcproductions
  79. 79. @fvcproductions webpack.config.js
  80. 80. webpack.config.js @fvcproductions
  81. 81. GenerateSW() @fvcproductions
  82. 82. @fvcproductions webpack.config.js
  83. 83. generated sw.js @fvcproductions
  84. 84. sw.js file manifest @fvcproductions
  85. 85. Remember this ๐Ÿ”ฅ ? โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications @fvcproductions
  86. 86. ๐Ÿ”ฅ Checklist โ€ข Integrated โ€ข manifest.json โ€ข HTML enhancements โ€ข Reliable โ€ข sw.js โ€ข HTTPs @fvcproductions
  87. 87. The butter๏ฌ‚y ๐Ÿฆ‹
  88. 88. @fvcproductions
  89. 89. manifest.json index.html sw.js @fvcproductions Only 3 ๏ฌles needed! ๐Ÿฆ‹
  90. 90. Web push notifications?
  91. 91. Engaging? @fvcproductions
  92. 92. @fvcproductions
  93. 93. @fvcproductions
  94. 94. TLDR; @fvcproductions
  95. 95. @fvcproductions
  96. 96. FIN ๐Ÿฆ‹ @fvcproductions
  97. 97. Thanks for listening! ๐Ÿ’› @fvcproductions
  98. 98. 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
  99. 99. These slides will be shared ASAP! ๐ŸŽ‰ https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com

ร—