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.

Pluralsight LIVE 2019 | Progressive Web Apps 101

145 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.

Pluralsight LIVE
August 27, 2019, from 1:00 pm to 1:45 pm

Grand America Hotel
Salt Lake City, Utah
Little America Ballroom A/B

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pluralsight LIVE 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@fvcproductions
  4. 4. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  5. 5. @fvcproductions Curriculum Why even? ๐Ÿค” (25%) Embracing the web Where even? ๐Ÿ‘€ (15%) Examples in real life How even? ๐Ÿ›  (50%) The transformation process
  6. 6. @fvcproductions Expectations โ€ข You have intermediate experience in both 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
  7. 7. @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 โ€ข Also, don't complain to me about Slack ๐Ÿ˜‚ โ€ข I'm not a developer advocate trying to sell you on PWAs- I'm just a FE dev who likes to talk about FE stuff
  8. 8. @fvcproductions Why even? ๐Ÿค” @fvcproductions
  9. 9. @fvcproductions Most accessible platform across the world? ๐Ÿ“ป ๐ŸŒ๐Ÿ“ฑ๐Ÿ’ป ๐Ÿ–ฅ ๐Ÿค– ๐Ÿ•ถ ๐Ÿš— ๐Ÿฅ
  10. 10. @fvcproductions The mobile web. ๐ŸŒ๐Ÿ“ฑ
  11. 11. @fvcproductions
  12. 12. @fvcproductions
  13. 13. @fvcproductions PWA Checklist โ€ข Fast โ€ข Integrated โ€ข Reliable โ€ข Engaging
  14. 14. @fvcproductions Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive
  15. 15. @fvcproductions Integrated @fvcproductions
  16. 16. @fvcproductions Reliable
  17. 17. Engaging @fvcproductions
  18. 18. @fvcproductions In Summary
  19. 19. @fvcproductions But I need an easy way to remember all this stuff
  20. 20. @fvcproductions ๐Ÿ”ฅ !!! โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications
  21. 21. @fvcproductions PWAs & Privilege ๐Ÿ’ฐ
  22. 22. @fvcproductionsThe State of LTE (Nov 2017)
  23. 23. @fvcproductions 4GB Availability Worldwide
  24. 24. @fvcproductions 4GB Speed Worldwide @fvcproductions
  25. 25. @fvcproductions@fvcproductions
  26. 26. @fvcproductions@fvcproductions
  27. 27. @fvcproductions
  28. 28. @fvcproductions@fvcproductions
  29. 29. @fvcproductions @fvcproductions @fvcproductions
  30. 30. @fvcproductions@fvcproductions@fvcproductions
  31. 31. @fvcproductions@fvcproductions
  32. 32. @fvcproductions
  33. 33. @fvcproductions But what about the rest of the world... ๐ŸŒ
  34. 34. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
  35. 35. @fvcproductions Emerging markets are becoming more crucial @fvcproductions
  36. 36. @fvcproductions ~53% of the world has access to the Internet now @fvcproductions
  37. 37. @fvcproductions Size of Twitter Clients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 1.3
  38. 38. @fvcproductions Shifting mindsets ๐Ÿค” @fvcproductions
  39. 39. @fvcproductions @fvcproductions Write once, deploy everywhere! ๐Ÿฅ‡
  40. 40. @fvcproductions
  41. 41. @fvcproductions
  42. 42. @fvcproductions
  43. 43. @fvcproductions@fvcproductions
  44. 44. @fvcproductions@fvcproductions The Future?
  45. 45. @fvcproductions Where even? ๐Ÿ‘€ @fvcproductions
  46. 46. @fvcproductions EVERYWHERE! ๐Ÿ˜ณ๐Ÿ˜ฎ๐Ÿ˜ฏ๐Ÿ˜ฒ
  47. 47. @fvcproductions@fvcproductions
  48. 48. @fvcproductions@fvcproductions
  49. 49. @fvcproductions ๐Ÿ”ฅ๐Ÿคฃ @fvcproductions
  50. 50. @fvcproductions@fvcproductions ๐Ÿคฃ@fvcproductions
  51. 51. @fvcproductions Do the big companies support this though? ๐Ÿค”
  52. 52. @fvcproductions@fvcproductionsFacebook
  53. 53. @fvcproductions@fvcproductionsAmazon
  54. 54. @fvcproductions@fvcproductionsApple
  55. 55. @fvcproductions@fvcproductionsNetflix
  56. 56. @fvcproductions @fvcproductions Netflix
  57. 57. @fvcproductionsGoogle
  58. 58. @fvcproductions @fvcproductions Google
  59. 59. @fvcproductions Other encouraging signs...
  60. 60. @fvcproductions@fvcproductionsAdobe
  61. 61. @fvcproductions@fvcproductionsMozilla
  62. 62. @fvcproductions@fvcproductionsMicrosoft
  63. 63. @fvcproductions@fvcproductionsForrester
  64. 64. @fvcproductions Exploring 6 Examples Starbucks ๐Ÿด๐Ÿ”๐Ÿ•๐Ÿ—๐ŸŒฎ Forbes ๐Ÿ“ฐ๐Ÿ—ž Trivago โœˆ๐ŸŒŽ๐ŸŒ๐ŸŒ Flipkart ๐Ÿ‘œ๐Ÿ‘•๐Ÿ’ธ๐Ÿ‘š๐Ÿ› Hulu ๐ŸŽฅ๐Ÿฟ๐ŸŽฌ๐ŸŽž๐Ÿ“บ Slack ๐Ÿ’ฌ๐Ÿ’ผ๐Ÿ’ก๐Ÿง 
  65. 65. @fvcproductions Exploring Examples Starbucks ๐Ÿด๐Ÿ”๐Ÿ•๐Ÿ—๐ŸŒฎ Forbes ๐Ÿ“ฐ๐Ÿ—ž Trivago โœˆ๐ŸŒŽ๐ŸŒ๐ŸŒ Flipkart ๐Ÿ‘œ๐Ÿ‘•๐Ÿ’ธ๐Ÿ‘š๐Ÿ› Hulu ๐ŸŽฅ๐Ÿฟ๐ŸŽฌ๐ŸŽž๐Ÿ“บ Slack ๐Ÿ’ฌ๐Ÿ’ผ๐Ÿ’ก๐Ÿง 
  66. 66. @fvcproductions@fvcproductions
  67. 67. @fvcproductions
  68. 68. @fvcproductionsForbes@fvcproductions
  69. 69. @fvcproductionsTrivago@fvcproductions
  70. 70. @fvcproductions@fvcproductions
  71. 71. @fvcproductions
  72. 72. @fvcproductions
  73. 73. @fvcproductions
  74. 74. @fvcproductions Downsidesโ€ฆ ๐Ÿ˜“
  75. 75. @fvcproductions 1. No centralized hub
  76. 76. @fvcproductions No centralized hub @fvcproductions
  77. 77. @fvcproductions No centralized hub @fvcproductions
  78. 78. @fvcproductions@fvcproductions
  79. 79. @fvcproductions 2. Adoption Rate
  80. 80. @fvcproductions @fvcproductions
  81. 81. @fvcproductions@fvcproductions
  82. 82. @fvcproductions@fvcproductions
  83. 83. @fvcproductions
  84. 84. @fvcproductions 3. More support from Apple lol
  85. 85. @fvcproductions
  86. 86. @fvcproductions
  87. 87. @fvcproductions How even? ๐Ÿ›  @fvcproductions
  88. 88. @fvcproductions Testing for PWA Readiness ๐Ÿ’ก
  89. 89. @fvcproductions Lighthouse
  90. 90. @fvcproductions
  91. 91. @fvcproductions@fvcproductions @fvcproductions
  92. 92. @fvcproductions Chrome DevTools @fvcproductions
  93. 93. @fvcproductions
  94. 94. @fvcproductions Chrome Extension @fvcproductions
  95. 95. @fvcproductions @fvcproductions
  96. 96. @fvcproductions Node Module @fvcproductions
  97. 97. @fvcproductions Command Line @fvcproductions
  98. 98. @fvcproductions Web UI (web.dev) @fvcproductions
  99. 99. @fvcproductions A Quick Example ๐Ÿ”Ž
  100. 100. @fvcproductions@fvcproductions
  101. 101. @fvcproductions@fvcproductions
  102. 102. @fvcproductions Shameless Plug ๐Ÿคซ
  103. 103. @fvcproductions@fvcproductions
  104. 104. @fvcproductions@fvcproductions
  105. 105. @fvcproductions The Transformation ๐Ÿฆ‹
  106. 106. @fvcproductions@fvcproductions
  107. 107. @fvcproductions @fvcproductions
  108. 108. @fvcproductions@fvcproductions
  109. 109. @fvcproductions@fvcproductions
  110. 110. @fvcproductions@fvcproductions
  111. 111. @fvcproductions@fvcproductions
  112. 112. @fvcproductions@fvcproductions
  113. 113. @fvcproductions @fvcproductions
  114. 114. @fvcproductions@fvcproductions
  115. 115. @fvcproductions @fvcproductions
  116. 116. @fvcproductions@fvcproductions
  117. 117. @fvcproductions @fvcproductions
  118. 118. @fvcproductions sw.js ๐ŸŒ index.html ๐Ÿ˜Œ manifest.json ๐Ÿ“ HTTPs ๐Ÿ”’ @fvcproductions
  119. 119. @fvcproductions HTTPs ๐Ÿ”’ Web App Manifest ๐Ÿ“ Service Worker ๐ŸŒ โœจ MVPWA โœจ
  120. 120. @fvcproductions 1. HTTPs ๐Ÿ”’ 2. index.html ๐Ÿ˜Œ 3. manifest.json ๐Ÿ“ 4. sw.js ๐ŸŒ
  121. 121. @fvcproductions 1. HTTPs ๐Ÿ”’
  122. 122. @fvcproductions@fvcproductions
  123. 123. @fvcproductions@fvcproductions
  124. 124. @fvcproductions@fvcproductions
  125. 125. @fvcproductions@fvcproductions
  126. 126. @fvcproductions
  127. 127. @fvcproductions
  128. 128. @fvcproductions 2. index.html ๐Ÿ˜Œ
  129. 129. @fvcproductions index.html <head></head> Adding manifest, viewport, icons @fvcproductions
  130. 130. @fvcproductions @fvcproductions
  131. 131. @fvcproductions@fvcproductions
  132. 132. @fvcproductions @fvcproductions index.html <body></body> Register service worker
  133. 133. @fvcproductions 3. manifest.json ๐Ÿ“
  134. 134. @fvcproductions 3. /manifest.json @fvcproductions
  135. 135. @fvcproductions@fvcproductions
  136. 136. @fvcproductions 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
  137. 137. @fvcproductions@fvcproductions
  138. 138. @fvcproductions@fvcproductions
  139. 139. @fvcproductions@fvcproductions
  140. 140. @fvcproductions@fvcproductions
  141. 141. @fvcproductions
  142. 142. @fvcproductions 4. sw.js ๐ŸŒ
  143. 143. @fvcproductions Offline-first
  144. 144. @fvcproductions @fvcproductions
  145. 145. @fvcproductions
  146. 146. @fvcproductions webpack.config.js @fvcproductions
  147. 147. @fvcproductions webpack.config.js
  148. 148. @fvcproductions GenerateSW()
  149. 149. @fvcproductions generated sw.js
  150. 150. @fvcproductions generated sw.js
  151. 151. @fvcproductions @fvcproductions ๐Ÿคฏ
  152. 152. @fvcproductions Remember ๐Ÿ”ฅ ? โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications
  153. 153. @fvcproductions ๐Ÿ”ฅ Checklist โ€ข Integrated โ€ข manifest.json โ€ข HTML enhancements โ€ข Reliable โ€ข sw.js โ€ข HTTPs
  154. 154. @fvcproductions@fvcproductions @fvcproductions@fvcproductions @fvcproductions
  155. 155. @fvcproductions@fvcproductions
  156. 156. @fvcproductions Lighthouse Scores
  157. 157. @fvcproductions manifest.json index.html sw.js Only 3 files needed! ๐Ÿฆ„
  158. 158. @fvcproductions
  159. 159. @fvcproductions Web push notifications? ๐Ÿ””
  160. 160. Engaging? @fvcproductions
  161. 161. @fvcproductions@fvcproductions
  162. 162. @fvcproductions
  163. 163. @fvcproductions
  164. 164. @fvcproductions
  165. 165. @fvcproductions
  166. 166. @fvcproductions TLDR;
  167. 167. @fvcproductions@fvcproductions
  168. 168. @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
  169. 169. @fvcproductions FIN ๐ŸŽ‰ @fvcproductions
  170. 170. @fvcproductions Thanks for listening! ๐Ÿ’›
  171. 171. @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/
  172. 172. @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.co m/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/
  173. 173. @fvcproductions Questions, comments or concerns? ๐Ÿ’ญ Letโ€™s chat after. ^
  174. 174. @fvcproductions These slides will be shared ASAP! ๐ŸŽ‰ https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  175. 175. @fvcproductions

ร—