I presented these slides to the Telegraph Track at Hack Reactor in San Francisco, CA from 7:45 pm to 9:00 pm on Thursday - March 7th, 2019. Talk: This class walks you through the steps of transforming an existing website into a Progressive Web App from the bottom up. Together we’ll also explore the vast array of companies that have already benefited from the many enhancements PWAs offer and why they’re so successful in emerging markets. https://www.hackreactor.com/

1. Progressive Web Apps 101
Prerequisites: HTML 101 & JavaScript 101
@fvcproductions

2. Hi, I’m Frances (your professor)! !
Software Engineer, Customer Acquisition @SlackHQ
@fvcproductions

3. @fvcproductions

4. @fvcproductions

5. @fvcproductions

6. @fvcproductions

7. @fvcproductions

8. slack.com/careers@fvcproductions

9. Hi, I’m Frances (your professor)! !
Software Engineer @SlackHQ
@fvcproductions

10. Norfolk, VA @fvcproductions

11. @fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

12. Curriculum
Why even? 🤔 (25%)
Embracing the web
Where even? 👀 (15%)
Examples in real life
How even? 🛠 (50%)
The transformation process
@fvcproductions

13. 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
@fvcproductions

14. Disclaimers
• I don't work for Google but I will be
mentioning lots of Googly stuff
• Not gonna be talking about Slack work
• I'm not a developer advocate - I'm just a
front end developer who likes to talk
about front end stuff
@fvcproductions

15. Why even? 🤔 @fvcproductions

16. Most accessible platform
across the world?
📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥
@fvcproductions

17. The mobile web.
🌐📱
@fvcproductions

18. @fvcproductions

19. @fvcproductions

20. PWA Checklist
• Fast
• Integrated
• Reliable
• Engaging
@fvcproductions

21. Fast
First Paint First Contentful Paint
First Meaningful Paint
Time to Interactive
@fvcproductions

22. Integrated
@fvcproductions

23. Reliable
@fvcproductions

24. Engaging
@fvcproductions

25. In Summary
@fvcproductions

26. @fvcproductions
🔥 !!!
• Fast
• Even on
slow
networks
• Integrated
• Add to home
screen
• Reliable
• Offline-first
• Engaging
• Web push
notifications

27. PWAs
&
Privilege @fvcproductions

28. @fvcproductionsThe State of LTE (Nov 2017)

29. 4GB Availability Worldwide
@fvcproductions

30. 4GB Speed Worldwide
@fvcproductions

31. @fvcproductions

32. @fvcproductions

33. @fvcproductions

34. @fvcproductions

35. @fvcproductions

36. @fvcproductions

37. @fvcproductions
@fvcproductions

38. @fvcproductions

39. @fvcproductions

40. But what about the rest of the world... 🌍
@fvcproductions

41. @fvcproductions
~70% of people in
emerging markets
consider app size before
downloading due to data
costs and storage space

42. @fvcproductions
Emerging markets are
becoming more crucial

43. @fvcproductions
~53% of the world has
access to the Internet now

44. Size of Twitter Clients (March 2019)Size(MB)
0
50
100
150
200
Android iOS PWA
1.3
186.4
86
@fvcproductions
1.3

45. Write once,
deploy
everywhere!
@fvcproductions

46. Write once,
deploy
everywhere!
@fvcproductions

47. @fvcproductions
@fvcproductions

48. @fvcproductions

49. @fvcproductions

50. @fvcproductions

51. @fvcproductions

52. @fvcproductions

53. @fvcproductions

55. Where even? 👀 @fvcproductions

56. EVERYWHERE! 😳😮😯😲
@fvcproductions

57. @fvcproductions

58. @fvcproductions

59. 🤣
@fvcproductions

60. Do the big companies support this though? 🤔
@fvcproductions

61. @fvcproductions

62. @fvcproductions

63. @fvcproductions
@fvcproductions

64. @fvcproductions

65. @fvcproductions

66. @fvcproductions

67. @fvcproductions

68. @fvcproductions

69. @fvcproductions

70. @fvcproductions

71. @fvcproductions

72. @fvcproductions

73. @fvcproductions

74. @fvcproductions

75. @fvcproductions

76. Exploring Examples
• Starbucks 🍴🍔😋🍕🍗🌮
• Instagram 📷🎥📸🎬
• Forbes 📰🗞
• Trivago ✈🌎🌍🌏
• Flipkart 👜👕💸👔👚🛍
🤯
@fvcproductions

77. @fvcproductions

78. @fvcproductions

79. @fvcproductions

80. Forbes@fvcproductions

81. Trivago@fvcproductions

82. @fvcproductions

83. Downsides… 😓
@fvcproductions

84. 1. No centralized hub
@fvcproductions

85. No centralized hub @fvcproductions

86. No centralized hub @fvcproductions

87. 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'."
@fvcproductions

88. Ok, side rant
@fvcproductions

89. @fvcproductions

90. @fvcproductions

91. @fvcproductions

92. Lol jk
• Different Frances - they're
married lol
@fvcproductions

93. 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'."
@fvcproductions

94. @fvcproductions

95. 2. Browser Support
@fvcproductions

96. @fvcproductions

97. 3. More support from Apple lol
@fvcproductions

98. @fvcproductions

99. @fvcproductions

100. Ok but let me rant about Apple for a sec
@fvcproductions

101. 
@fvcproductions

102. L
@fvcproductions

103. M
@fvcproductions

104. N
@fvcproductions

105. O
@fvcproductions

106. O
@fvcproductions

107. P
@fvcproductions

108. Q
@fvcproductions

109. R
@fvcproductions

110. 🌎
@fvcproductions

111. How even? 🛠 @fvcproductions

112. Testing for
PWA Readiness 💡
@fvcproductions

113. Lighthouse
@fvcproductions

114. @fvcproductions
@fvcproductions

115. @fvcproductions

116. @fvcproductions

117. Shameless Plug 🤫
@fvcproductions

118. @fvcproductions

119. @fvcproductions

120. The
Transformation
🦋
@fvcproductions

121. @fvcproductions

122. @fvcproductions

123. @fvcproductions

124. Static generators are cool tho
@fvcproductions

125. @fvcproductions

126. @fvcproductions

127. @fvcproductions

128. @fvcproductions

129. @fvcproductions

130. @fvcproductions

131. @fvcproductions

132. @fvcproductions

133. @fvcproductions

134. sw.js
index.html
manifest.json
HTTPs
@fvcproductions

135. 1. HTTPs
2. index.html
3. manifest.json
4. sw.js
@fvcproductions

136. 1. HTTPs
@fvcproductions

137. @fvcproductions

138. @fvcproductions

139. @fvcproductions

140. @fvcproductions

141. 2. index.html
@fvcproductions

142. index.html
<head></head>
@fvcproductions

143. @fvcproductions
index.html
<body></body>

144. 3. manifest.json
@fvcproductions

145. 3. /manifest.json
@fvcproductions

146. @fvcproductions

147. 48x48, 72x72, 96x96, 144x144,
192x192, 256x256, 384x384, 512x512
many icons much wow
@fvcproductions

148. @fvcproductions

149. @fvcproductions

150. @fvcproductions

151. 4. sw.js
@fvcproductions

152. Offline-first
@fvcproductions

153. @fvcproductions

154. @fvcproductions

155. webpack.config.js
@fvcproductions

156. webpack.config.js
@fvcproductions

157. GenerateSW()
@fvcproductions

158. generated sw.js
@fvcproductions

159. sw.js
file manifest
@fvcproductions

160. Remember 🔥 ?
• Fast
• Even on
slow
networks
• Integrated
• Add to home
screen
• Reliable
• Offline-first
• Engaging
• Web push
notifications
@fvcproductions

161. 🔥 Checklist
• Integrated
• manifest.json
• HTML enhancements
• Reliable
• sw.js
• HTTPs
@fvcproductions

162. @fvcproductions
@fvcproductions@fvcproductions

163. @fvcproductions

164. @fvcproductions

165. manifest.json
index.html
sw.js
@fvcproductions
Only
3 files
needed!
🦄

166. @fvcproductions

167. Web push
notifications?
@fvcproductions

168. Engaging?
@fvcproductions

169. @fvcproductions

173. @fvcproductions

174. TLDR;
@fvcproductions

175. @fvcproductions

176. Takeaways
Why even? 🤔
To deliver a native experience with
the broad reach of the modern
web
Where even? 👀
Everywhere!
How even? 🛠
A few vitamins @fvcproductions

177. FIN
@fvcproductions

178. Thanks for listening! 💛
@fvcproductions

179. 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
30.Project Stream: https://www.youtube.com/watch?
time_continue=10&v=sE53eSbzxoU
31. Verizon 5G: https://www.verizon.com/about/our-
company/5g
32.Microsoft & Google: https://www.computerworld.com/
article/3314746/mobile-apps/why-microsoft-and-
google-love-progressive-web-apps.html
33.Google Fuschia: https://www.wikiwand.com/en/
Google_Fuchsia
34.Mobile OS Market Share: http://gs.statcounter.com/os-
market-share/mobile/china
@fvcproductions

180. References
At least 30 more links need to be
added here - please refer to the
slide notes in the meantime 😂 😅
@fvcproductions

181. Questions, comments or concerns? 💭
@fvcproductions

182. These slides will be shared ASAP! 🎉
https://slideshare.net/fvcproductions
@fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

183. slack.com/careers@fvcproductions

184. Tech Queens
• First episode releasing tomorrow
for International Women's Day
• If you're interested or know
someone, head over to the
website and fill out the contact
form at the bottom
• https://techqueenspod.com
@fvcproductions

185. Kudos
• Music from Jukedeck - create
your own at http://jukedeck.com
@fvcproductions