I presented these slides at GDG DevFest in San Francisco, CA from 3 pm to 4 pm on Sunday - October 28, 2018. GDG DevFest is a one-day community-run event designed to facilitate the exchange of ideas between developers of all skill levels and backgrounds. 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://devfestsf.com

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

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

3. @fvcproductions

4. slack.com/careers@fvcproductions

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

6. Norfolk, VA @fvcproductions

7. @fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

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

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

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

11. @fvcproductions

12. Why even? 🤔 @fvcproductions

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

14. The mobile web.
🌐📱
@fvcproductions

15. @fvcproductions

16. @fvcproductions

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

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

19. Integrated
@fvcproductions

20. Reliable
@fvcproductions

21. Engaging
@fvcproductions

22. In Summary
@fvcproductions

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

24. PWAs
&
Privilege @fvcproductions

25. @fvcproductionsThe State of LTE (Nov 2017)

26. 4GB Availability Worldwide
@fvcproductions

27. 4GB Speed Worldwide
@fvcproductions

28. @fvcproductions

29. @fvcproductions

31. @fvcproductions

32. @fvcproductions

33. @fvcproductions

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

37. @fvcproductions
Emerging markets are
becoming more crucial

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

39. Size of Twitter Clients (May 2018)Size(MB)
0
50
100
150
200
Android iOS PWA
0.6
185
86
@fvcproductions
0.6

40. Write once,
deploy
everywhere!
@fvcproductions

41. @fvcproductions

42. @fvcproductions

43. @fvcproductions

44. Write once,
deploy
everywhere!
@fvcproductions

45. Where even? 👀 @fvcproductions

46. EVERYWHERE! 😳😮😯😲
@fvcproductions

47. @fvcproductions

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

49. @fvcproductions

50. @fvcproductions

51. @fvcproductions

52. Forbes@fvcproductions

53. Trivago@fvcproductions

54. @fvcproductions

55. Downsides… 😓
@fvcproductions

56. No centralized hub @fvcproductions

57. No centralized hub @fvcproductions

58. @fvcproductions

59. @fvcproductions

60. @fvcproductions

61. 
@fvcproductions

62. K
@fvcproductions

63. L
@fvcproductions

64. M
@fvcproductions

65. N
@fvcproductions

66. N
@fvcproductions

67. O
@fvcproductions

68. P
@fvcproductions

69. Q
@fvcproductions

70. 🌎
@fvcproductions

71. How even? 🛠 @fvcproductions

72. Testing for
PWA Readiness 💡
@fvcproductions

73. Lighthouse
@fvcproductions

74. @fvcproductions

75. @sf_gdg

77. Shameless Plug
🤫
@fvcproductions

78. @fvcproductions

79. @fvcproductions

80. The
Transformation
🦋

81. hugoma.fvcproductions.com
@fvcproductions
@fvcproductions

83. @fvcproductions

84. @fvcproductions

85. @fvcproductions

86. @fvcproductions

87. @fvcproductions

88. @fvcproductions

89. @fvcproductions

93. sw.js
index.html
manifest.json
HTTPs

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

95. 1. HTTPs
@fvcproductions

96. @fvcproductions

97. @fvcproductions

98. @fvcproductions

99. @fvcproductions

100. 2. index.html
@fvcproductions

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

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

103. 3. manifest.json

104. 3. /manifest.json
@fvcproductions

105. @fvcproductions

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

107. @fvcproductions

109. 4. sw.js
@fvcproductions

110. Offline-first
@fvcproductions

112. @fvcproductions

113. @fvcproductions
webpack.config.js

114. webpack.config.js
@fvcproductions

115. GenerateSW()
@fvcproductions

116. generated sw.js
@fvcproductions

117. sw.js
file manifest
@fvcproductions

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

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

120. @fvcproductions
@fvcproductions

121. @fvcproductions

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

124. Web push
notifications?

125. Engaging?
@fvcproductions

126. @fvcproductions

130. @fvcproductions

131. TLDR;
@fvcproductions

132. @fvcproductions

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

134. FIN
@fvcproductions

135. Thanks for listening! 💛
@fvcproductions

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

137. Questions, comments or concerns? 💭
@fvcproductions

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

139. slack.com/careers