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.

RevolutionConf 2019 - Progressive Web Apps 101

284 views

Published on

Progressive Web Apps 101

Progressive Web Apps (PWAs) bring features we expect from native apps to the mobile browser experience and are on track to becoming the new golden web standard. In this class, I'll walk you through the steps of transforming an existing website into a PWA from the bottom up and together, we'll explore the wide array of companies that have already benefited from the many enhancements PWAs offer.

RevolutionConf
June 6, 2019, from 3:30 pm to 4:15 pm
Trader Interactive (Cape Henry)

Published in: Technology
  • Be the first to comment

RevolutionConf 2019 - Progressive Web Apps 101

  1. 1. @fvcproductions Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
  2. 2. @fvcproductions Hi, Iโ€™m Frances (your professor)! ! Software Engineer, Customer Acquisition
  3. 3. @fvcproductions Call me Ishmael.
  4. 4. @fvcproductions
  5. 5. @fvcproductions
  6. 6. @fvcproductions
  7. 7. @fvcproductions Norfolk, VA @fvcproductions
  8. 8. @fvcproductions@fvcproductions
  9. 9. @fvcproductions@fvcproductions
  10. 10. @fvcproductions
  11. 11. @fvcproductions@fvcproductions
  12. 12. @fvcproductions
  13. 13. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  14. 14. @fvcproductions
  15. 15. @fvcproductions Curriculum Why even? ๐Ÿค” (25%) Embracing the web Where even? ๐Ÿ‘€ (15%) Examples in real life How even? ๐Ÿ›  (50%) The transformation process
  16. 16. @fvcproductions Expectations โ€ข You have basic 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
  17. 17. @fvcproductions Disclaimers โ€ข I don't work for Google or Microsoft but I will be mentioning lots of Googly & Microsofty (?) stuff โ€ข Not gonna be talking about my work at Slack (sorry not sorry) โ€ข I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff
  18. 18. @fvcproductions Why even? ๐Ÿค” @fvcproductions
  19. 19. @fvcproductions Most accessible platform across the world? ๐Ÿ“ป ๐ŸŒ๐Ÿ“ฑ๐Ÿ’ป ๐Ÿ–ฅ ๐Ÿค– ๐Ÿ•ถ ๐Ÿš— ๐Ÿฅ
  20. 20. @fvcproductions The mobile web. ๐ŸŒ๐Ÿ“ฑ
  21. 21. @fvcproductions
  22. 22. @fvcproductions
  23. 23. @fvcproductions PWA Checklist โ€ข Fast โ€ข Integrated โ€ข Reliable โ€ข Engaging
  24. 24. @fvcproductions Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive
  25. 25. @fvcproductions Integrated @fvcproductions
  26. 26. @fvcproductions Reliable
  27. 27. Engaging @fvcproductions
  28. 28. @fvcproductions In Summary
  29. 29. @fvcproductions@fvcproductions
  30. 30. @fvcproductions@fvcproductions
  31. 31. @fvcproductions ๐Ÿ”ฅ !!! โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications
  32. 32. @fvcproductions PWAs & Privilege ๐Ÿ’ฐ
  33. 33. @fvcproductionsThe State of LTE (Nov 2017)
  34. 34. @fvcproductions 4GB Availability Worldwide
  35. 35. @fvcproductions 4GB Speed Worldwide @fvcproductions
  36. 36. @fvcproductions@fvcproductions
  37. 37. @fvcproductions@fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions@fvcproductions
  40. 40. @fvcproductions @fvcproductions @fvcproductions
  41. 41. @fvcproductions@fvcproductions@fvcproductions
  42. 42. @fvcproductions@fvcproductions
  43. 43. @fvcproductions @fvcproductions
  44. 44. @fvcproductions
  45. 45. @fvcproductions But what about the rest of the world... ๐ŸŒ
  46. 46. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
  47. 47. @fvcproductions Emerging markets are becoming more crucial @fvcproductions
  48. 48. @fvcproductions ~53% of the world has access to the Internet now @fvcproductions
  49. 49. @fvcproductions Size of Twitter Clients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 1.3
  50. 50. @fvcproductions
  51. 51. @fvcproductions Write once, deploy everywhere! ๐Ÿฅ‡ @fvcproductions
  52. 52. @fvcproductions @fvcproductions Write once, deploy everywhere! ๐Ÿฅ‡
  53. 53. @fvcproductions @fvcproductions @fvcproductions
  54. 54. @fvcproductions @fvcproductions @fvcproductions
  55. 55. @fvcproductions@fvcproductions
  56. 56. @fvcproductions@fvcproductions
  57. 57. @fvcproductions
  58. 58. @fvcproductions
  59. 59. @fvcproductions@fvcproductions
  60. 60. @fvcproductions
  61. 61. @fvcproductions@fvcproductions
  62. 62. @fvcproductions@fvcproductions
  63. 63. @fvcproductions Where even? ๐Ÿ‘€ @fvcproductions
  64. 64. @fvcproductions EVERYWHERE! ๐Ÿ˜ณ๐Ÿ˜ฎ๐Ÿ˜ฏ๐Ÿ˜ฒ
  65. 65. @fvcproductions@fvcproductions
  66. 66. @fvcproductions@fvcproductions
  67. 67. @fvcproductions ๐Ÿคฃ @fvcproductions
  68. 68. @fvcproductions@fvcproductions ๐Ÿคฃ@fvcproductions
  69. 69. @fvcproductions Do the big companies support this though? ๐Ÿค”
  70. 70. @fvcproductions@fvcproductionsFacebook
  71. 71. @fvcproductions@fvcproductionsAmazon
  72. 72. @fvcproductions@fvcproductionsApple
  73. 73. @fvcproductions@fvcproductionsNetflix
  74. 74. @fvcproductions @fvcproductions Netflix
  75. 75. @fvcproductionsGoogle
  76. 76. @fvcproductions @fvcproductions Google
  77. 77. @fvcproductions@fvcproductionsAdobe
  78. 78. @fvcproductions@fvcproductionsMozilla
  79. 79. @fvcproductions@fvcproductionsMicrosoft
  80. 80. @fvcproductions@fvcproductionsForrester
  81. 81. @fvcproductions Exploring Examples Starbucks ๐Ÿด๐Ÿ”๐Ÿ˜‹๐Ÿ•๐Ÿ—๐ŸŒฎ Instagram ๐Ÿ“ท๐ŸŽฅ๐Ÿ“ธ๐ŸŽฌ Forbes ๐Ÿ“ฐ๐Ÿ—ž Trivago โœˆ๐ŸŒŽ๐ŸŒ๐ŸŒ Flipkart ๐Ÿ‘œ๐Ÿ‘•๐Ÿ’ธ๐Ÿ‘”๐Ÿ‘š๐Ÿ› Hulu ๐ŸŽฅ๐Ÿฟ๐ŸŽฌ๐ŸŽž๐Ÿ“บ Slack ๐Ÿ’ฌ๐Ÿ’ผQ๐Ÿ’ก๐Ÿง  ๐Ÿคฏ
  82. 82. @fvcproductions@fvcproductions
  83. 83. @fvcproductions
  84. 84. @fvcproductions
  85. 85. @fvcproductionsForbes@fvcproductions
  86. 86. @fvcproductionsTrivago@fvcproductions
  87. 87. @fvcproductions@fvcproductions
  88. 88. @fvcproductions
  89. 89. @fvcproductions
  90. 90. @fvcproductions Downsidesโ€ฆ ๐Ÿ˜“
  91. 91. @fvcproductions 1. No centralized hub
  92. 92. @fvcproductions No centralized hub @fvcproductions
  93. 93. @fvcproductions No centralized hub @fvcproductions
  94. 94. @fvcproductions Alex Russell "These apps aren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become โ€˜apps'."
  95. 95. @fvcproductions Ok, side rant
  96. 96. @fvcproductions@fvcproductions
  97. 97. @fvcproductions@fvcproductions
  98. 98. @fvcproductions@fvcproductions
  99. 99. @fvcproductions Same name! โ€ข Different Frances - they're married lol
  100. 100. @fvcproductions Alex Russell "These apps aren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become โ€˜apps'."
  101. 101. @fvcproductions@fvcproductions
  102. 102. @fvcproductions 2. Adoption Rate
  103. 103. @fvcproductions @fvcproductions
  104. 104. @fvcproductions@fvcproductions
  105. 105. @fvcproductions@fvcproductions
  106. 106. @fvcproductions
  107. 107. @fvcproductions 3. More support from Apple lol
  108. 108. @fvcproductions
  109. 109. @fvcproductions
  110. 110. @fvcproductions Ok but let me rant about Apple for a sec
  111. 111. @fvcproductions ๏ฃฟ
  112. 112. @fvcproductions V @fvcproductions
  113. 113. @fvcproductions W @fvcproductions
  114. 114. @fvcproductions X @fvcproductions
  115. 115. @fvcproductions Y @fvcproductions
  116. 116. @fvcproductions Y @fvcproductions
  117. 117. @fvcproductions Z @fvcproductions
  118. 118. @fvcproductions [ @fvcproductions
  119. 119. @fvcproductions @fvcproductions
  120. 120. @fvcproductions ๐ŸŒŽ @fvcproductions
  121. 121. @fvcproductions How even? ๐Ÿ›  @fvcproductions
  122. 122. @fvcproductions Testing for PWA Readiness ๐Ÿ’ก
  123. 123. @fvcproductions Lighthouse
  124. 124. @fvcproductions
  125. 125. @fvcproductions@fvcproductions @fvcproductions
  126. 126. @fvcproductions Chrome DevTools @fvcproductions
  127. 127. @fvcproductions
  128. 128. @fvcproductions Chrome Extension @fvcproductions
  129. 129. @fvcproductions @fvcproductions
  130. 130. @fvcproductions Node Module @fvcproductions
  131. 131. @fvcproductions Command Line @fvcproductions
  132. 132. @fvcproductions Web UI (web.dev) @fvcproductions
  133. 133. @fvcproductions@fvcproductions
  134. 134. @fvcproductions@fvcproductions
  135. 135. @fvcproductions Shameless Plug ๐Ÿคซ
  136. 136. @fvcproductions@fvcproductions
  137. 137. @fvcproductions@fvcproductions
  138. 138. @fvcproductions The Transformation ๐Ÿฆ‹
  139. 139. @fvcproductions@fvcproductions
  140. 140. @fvcproductions @fvcproductions
  141. 141. @fvcproductions@fvcproductions
  142. 142. @fvcproductions Static generators are cool tho
  143. 143. @fvcproductions@fvcproductions
  144. 144. @fvcproductions@fvcproductions
  145. 145. @fvcproductions@fvcproductions
  146. 146. @fvcproductions@fvcproductions
  147. 147. @fvcproductions @fvcproductions
  148. 148. @fvcproductions@fvcproductions
  149. 149. @fvcproductions @fvcproductions
  150. 150. @fvcproductions@fvcproductions
  151. 151. @fvcproductions @fvcproductions
  152. 152. @fvcproductions sw.js ๐ŸŒ index.html ๐Ÿ˜Œ manifest.json ๐Ÿ“ HTTPs ๐Ÿ”’ @fvcproductions
  153. 153. @fvcproductions
  154. 154. @fvcproductions@fvcproductions
  155. 155. @fvcproductions@fvcproductions
  156. 156. @fvcproductions 1. HTTPs ๐Ÿ”’ 2. index.html ๐Ÿ˜Œ 3. manifest.json ๐Ÿ“ 4. sw.js ๐ŸŒ
  157. 157. @fvcproductions 1. HTTPs ๐Ÿ”’
  158. 158. @fvcproductions@fvcproductions
  159. 159. @fvcproductions@fvcproductions
  160. 160. @fvcproductions@fvcproductions
  161. 161. @fvcproductions@fvcproductions
  162. 162. @fvcproductions
  163. 163. @fvcproductions
  164. 164. @fvcproductions 2. index.html ๐Ÿ˜Œ
  165. 165. @fvcproductions index.html <head></head> @fvcproductions
  166. 166. @fvcproductions @fvcproductions
  167. 167. @fvcproductions@fvcproductions
  168. 168. @fvcproductions @fvcproductions index.html <body></body>
  169. 169. @fvcproductions 3. manifest.json ๐Ÿ“
  170. 170. @fvcproductions 3. /manifest.json @fvcproductions
  171. 171. @fvcproductions@fvcproductions
  172. 172. @fvcproductions 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
  173. 173. @fvcproductions@fvcproductions
  174. 174. @fvcproductions@fvcproductions
  175. 175. @fvcproductions@fvcproductions
  176. 176. @fvcproductions@fvcproductions
  177. 177. @fvcproductions
  178. 178. @fvcproductions 4. sw.js ๐ŸŒ
  179. 179. @fvcproductions Offline-first
  180. 180. @fvcproductions @fvcproductions
  181. 181. @fvcproductions
  182. 182. @fvcproductions webpack.config.js @fvcproductions
  183. 183. @fvcproductions webpack.config.js
  184. 184. @fvcproductions GenerateSW()
  185. 185. @fvcproductions generated sw.js
  186. 186. @fvcproductions sw.js file manifest @fvcproductions
  187. 187. @fvcproductions @fvcproductions
  188. 188. @fvcproductions Remember ๐Ÿ”ฅ ? โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications
  189. 189. @fvcproductions ๐Ÿ”ฅ Checklist โ€ข Integrated โ€ข manifest.json โ€ข HTML enhancements โ€ข Reliable โ€ข sw.js โ€ข HTTPs
  190. 190. @fvcproductions@fvcproductions @fvcproductions@fvcproductions @fvcproductions
  191. 191. @fvcproductions@fvcproductions
  192. 192. @fvcproductions Lighthouse Scores
  193. 193. @fvcproductions manifest.json index.html sw.js Only 3 files needed! ๐Ÿฆ„
  194. 194. @fvcproductions
  195. 195. @fvcproductions Web push notifications? ๐Ÿ””
  196. 196. Engaging? @fvcproductions
  197. 197. @fvcproductions@fvcproductions
  198. 198. @fvcproductions
  199. 199. @fvcproductions
  200. 200. @fvcproductions
  201. 201. @fvcproductions
  202. 202. @fvcproductions TLDR;
  203. 203. @fvcproductions@fvcproductions
  204. 204. @fvcproductions Takeaways Why even? ๐Ÿค” To deliver a native experience with the broad reach of the modern web Where even? ๐Ÿ‘€ Everywhere! How even? ๐Ÿ›  A few vitamins
  205. 205. @fvcproductions FIN ๐ŸŽ‰ @fvcproductions
  206. 206. @fvcproductions Thanks for listening! ๐Ÿ’›
  207. 207. @fvcproductions 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/
  208. 208. @fvcproductions References 1. Hugo: https://gohugo.io/ 2. Go: https://golang.org/ 3. OneSignal: https://onesignal.com/ 4. Norfolk: https://www.wikiwand.com/ en/Naval_Station_Norfolk 5. Project Stream: https:// www.youtube.com/watch? time_continue=10&v=sE53eSbzxoU 6. Going Big: PWAs Come to Desktop and Chrome OS (Google I/O โ€™19): https:// www.youtube.com/watch? v=2KhRmFHLuhE 7. Verizon 5G: https://www.verizon.com/ about/our-company/5g 8. Microsoft & Google: https:// www.computerworld.com/article/ 3314746/mobile-apps/why-microsoft- and-google-love-progressive-web- apps.html 9. Google Fuschia: https:// www.wikiwand.com/en/Google_Fuchsia 10. Mobile OS Market Share: http:// gs.statcounter.com/os-market-share/ mobile/china 11. Manifest.json on MDN: https:// developer.mozilla.org/en-US/docs/ Mozilla/Add-ons/WebExtensions/ manifest.json 12. Microsoft - Progressive Web Overview: https://www.youtube.com/watch? v=ugAewC3308Y 13. Microsoft - Building Progressive Web Apps: https:// mybuild.techcommunity.microsoft.com/ sessions/77018? source=TechCommunity 14. Whatโ€™s New with Chrome and the Web (Google I/O โ€™19): https:// www.youtube.com/watch? v=rUUazNIZW7I 15. Techqueria: https://techqueria.org 16. Tech Queens: https:// techqueenspod.com 17. Jukedeck: https://jukedeck.com 18. AARRR Pirate Metrics for Startups - How to Grow Revenue - Boardview: https://boardview.io/blog/startup- metrics-two-jackpot-moments-make- pirates-go-aarrr/
  209. 209. @fvcproductions Questions, comments or concerns? ๐Ÿ’ญ Letโ€™s chat after. g
  210. 210. @fvcproductions These slides will be shared ASAP! ๐ŸŽ‰ https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  211. 211. @fvcproductions Kudos โ€ข Music from Jukedeck - create your own at http://jukedeck.com
  212. 212. @fvcproductions Tech Queens โ€ข 6 episodes so far โ€ข If you're interested or know someone, head over to the website and fill out the contact form at the bottom โ€ข https://techqueenspod.com

ร—