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.

GDG SF Meetup - Progressive Web Apps 101

115 views

Published on

Presented August 15th, 2018 at 6:30 pm till 7:30 pm at Google in SF as part of a Google Developers Group SF Meetup.

Talk: Progressive Web Apps 101

Description: Iโ€™ll walk you through the steps of transforming an existing website into a Progressive Web App from the bottom up. Together weโ€™ll also explore the wide array of companies that have already benefited from the many enhancements PWAs offer.

More event details: https://www.meetup.com/google-developer-group-san-francisco/events/251833049/

Published in: Technology
  • Be the first to comment

GDG SF Meetup - 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)! ! Software Engineer @slackhq @fvcproductions
  5. 5. Norfolk, VA
  6. 6. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  7. 7. Curriculum โ€ข Why even? ๐Ÿค” (25%) โ€ข Embracing the web โ€ข Where even? ๐Ÿ‘€ (15%) โ€ข Examples in real life โ€ข How even? ๐Ÿ›  (50%) โ€ข The transformation process @fvcproductions
  8. 8. 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 build one
  9. 9. 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
  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. PWAs & Privilege
  22. 22. @fvcproductionsThe State of LTE (Nov 2017)
  23. 23. 4GB Availability Worldwide @fvcproductions
  24. 24. 4GB Speed Worldwide @fvcproductions
  25. 25. @fvcproductions
  26. 26. @fvcproductions
  27. 27. @fvcproductions
  28. 28. @fvcproductions
  29. 29. @fvcproductions
  30. 30. @fvcproductions
  31. 31. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  32. 32. @fvcproductions Emerging markets are becoming more crucial
  33. 33. @fvcproductions ~53% of the world has access to the Internet now
  34. 34. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
  35. 35. Write once, deploy everywhere! @fvcproductions
  36. 36. Where even? ๐Ÿ‘€ @fvcproductions
  37. 37. EVERYWHERE! ๐Ÿ˜ณ๐Ÿ˜ฎ๐Ÿ˜ฏ๐Ÿ˜ฒ @fvcproductions
  38. 38. @fvcproductions
  39. 39. Exploring Examples โ€ข Starbucks ๐Ÿด๐Ÿ”๐Ÿ˜‹๐Ÿ•๐Ÿ—๐ŸŒฎ โ€ข Instagram ๐Ÿ“ท๐ŸŽฅ๐Ÿ“ธ๐ŸŽฌ โ€ข Forbes ๐Ÿ“ฐ๐Ÿ—ž โ€ข Trivago โœˆ๐ŸŒŽ๐ŸŒ๐ŸŒ โ€ข Flipkart ๐Ÿ‘œ๐Ÿ‘•๐Ÿ’ธ๐Ÿ‘”๐Ÿ‘š๐Ÿ› ๐Ÿคฏ @fvcproductions
  40. 40. @fvcproductions
  41. 41. @fvcproductions
  42. 42. @fvcproductions
  43. 43. Forbes@fvcproductions
  44. 44. Trivago@fvcproductions
  45. 45. @fvcproductions
  46. 46. Downsidesโ€ฆ ๐Ÿ˜“ @fvcproductions
  47. 47. No centralized hub @fvcproductions
  48. 48. No centralized hub @fvcproductions
  49. 49. @fvcproductions
  50. 50. @fvcproductions
  51. 51. @fvcproductions
  52. 52. How even? ๐Ÿ›  @fvcproductions
  53. 53. Testing for PWA Readiness ๐Ÿ’ก
  54. 54. Lighthouse @fvcproductions
  55. 55. @fvcproductions
  56. 56. @fvcproductions
  57. 57. @fvcproductions
  58. 58. Shameless Plug ๐Ÿคซ
  59. 59. @fvcproductions
  60. 60. The Transformation ๐Ÿฆ‹
  61. 61. hugoma.fvcproductions.com @fvcproductions
  62. 62. @fvcproductions @fvcproductions
  63. 63. sw.js index.html manifest.json HTTPs
  64. 64. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js
  65. 65. 1. HTTPs
  66. 66. 3. sw.js 2. index.html 1. manifest.json 4. HTTPs
  67. 67. @fvcproductions
  68. 68. @fvcproductions
  69. 69. 2. index.html
  70. 70. index.html <head></head> @fvcproductions
  71. 71. @fvcproductions index.html <body></body>
  72. 72. 3. manifest.json
  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. O๏ฌ„ine-๏ฌrst @fvcproductions
  77. 77. @fvcproductions
  78. 78. @fvcproductions webpack.config.js
  79. 79. webpack.config.js @fvcproductions
  80. 80. GenerateSW() @fvcproductions
  81. 81. @fvcproductions webpack.config.js
  82. 82. generated sw.js @fvcproductions
  83. 83. sw.js file manifest @fvcproductions
  84. 84. Remember this ๐Ÿ”ฅ ? โ€ข Fast โ€ข Even on slow networks โ€ข Integrated โ€ข Add to home screen โ€ข Reliable โ€ข Offline-first โ€ข Engaging โ€ข Web push notifications @fvcproductions
  85. 85. ๐Ÿ”ฅ Checklist โ€ข Integrated โ€ข manifest.json โ€ข HTML enhancements โ€ข Reliable โ€ข sw.js โ€ข HTTPs @fvcproductions
  86. 86. @fvcproductions
  87. 87. manifest.json index.html sw.js @fvcproductions Only 3 ๏ฌles needed! ๐Ÿฆ„
  88. 88. Web push notifications?
  89. 89. Engaging? @fvcproductions
  90. 90. @fvcproductions
  91. 91. @fvcproductions
  92. 92. TLDR; @fvcproductions
  93. 93. @fvcproductions
  94. 94. FIN @fvcproductions
  95. 95. Thanks for listening! ๐Ÿ’› @fvcproductions
  96. 96. Shout out to Paul H., Armon A. & Rafa for letting me know what they wanted to hear about! ๐Ÿ‘Œ @fvcproductions
  97. 97. 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
  98. 98. These slides will be shared ASAP to Meetup! ๐ŸŽ‰ https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com

ร—