Progressive Web Apps 101
Prerequisites: HTML 101 & JavaScript 101
@fvcproductions
Hi, I’m Frances (your professor)! !
Software Engineer @slackhq
@fvcproductions
🐳
@fvcproductions
Hi, I’m Frances (your professor)! !
@fvcproductions
Norfolk, VA @fvcproductions
@fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com
Expectations
• You have basic experience in HTML & JavaScript
• You don't really know much about Progressive
Web Apps (PWAs)
• Why they exist
• Where they are used
• How to build one
@fvcproductions
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
@fvcproductions
Curriculum
• Why even? 🤔 (25%)
• Embracing the web
• Where even? 👀 (15%)
• Examples in real life
• How even? 🛠 (50%)
• The transformation process
@fvcproductions
Why even? 🤔 @fvcproductions
Most accessible platform
across the world?
📻 🌐📱💻 🖥 🤖 🕶🚗
@fvcproductions
The mobile web.
🌐📱
@fvcproductions
@fvcproductions
PWA Checklist
• Fast
• Integrated
• Reliable
• Engaging
@fvcproductions
Fast
First Paint First Contentful Paint
First Meaningful Paint
Time to Interactive
@fvcproductions
Integrated
@fvcproductions
Reliable
@fvcproductions
Engaging
@fvcproductions
In Summary
@fvcproductions
@fvcproductions
🔥 !!!
• Fast
• Even on
slow
networks
• Integrated
• Add to
home
screen
• Reliable
• Offline-first
• Engaging
• Web push
notifications
@fvcproductionsThe State of LTE (Nov 2017)
@fvcproductions
@fvcproductions
4GB Availability Worldwide
@fvcproductions
4GB Speed Worldwide
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
~70% of people in
emerging markets
consider app size before
downloading due to data
costs and storage space
@fvcproductions
Emerging markets are
becoming more crucial
@fvcproductions
~53% of the world has
access to the Internet now
Size of Twitter Clients (May 2018)Size(MB)
0
50
100
150
200
Android iOS PWA
0.6
185
86
@fvcproductions
Write once,
deploy
everywhere!
@fvcproductions
Where even? 👀 @fvcproductions
EVERYWHERE! 😳😮😯😲
@fvcproductions
@fvcproductions
Exploring Examples
• Starbucks 🍴🍔😋🍕🍗🌮
• Instagram 📷🎥📸🎬
• Forbes 📰🗞
• Trivago ✈🌎🌍🌏
• Flipkart 👜👕💸👔👚🛍
🤯
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
Forbes@fvcproductions
Trivago@fvcproductions
@fvcproductions
Downsides… 😓
@fvcproductions
No centralized hub @fvcproductions
No centralized hub @fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
How even? 🛠 @fvcproductions
Lighthouse
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
hugoma.fvcproductions.com
@fvcproductions
@fvcproductions
@fvcproductions
The Transformation
🐛 🦋
The caterpillar 🐛
sw.js
index.html
manifest.json
HTTPs
1. HTTPs
2. index.html
3. manifest.json
4. sw.js
1. HTTPs
sw.js
index.html
manifest.json
HTTPs
@fvcproductions
@fvcproductions
2. index.html
sw.js
index.html
manifest.json
HTTPs
index.html
<head></head>
@fvcproductions
@fvcproductions
index.html
<body></body>
The Cocoon
3. manifest.json
sw.js
index.html
manifest.json
HTTPs
3. manifest.json
48x48, 72x72, 96x96, 144x144,
192x192, 256x256, 384x384, 512x512
many icons much wow
4. sw.js
sw.js
index.html
manifest.json
HTTPs
Offline-first
@fvcproductions
@fvcproductions
@fvcproductions
webpack.config.js
webpack.config.js
@fvcproductions
GenerateSW()
@fvcproductions
@fvcproductions
webpack.config.js
generated sw.js
@fvcproductions
sw.js
file manifest
@fvcproductions
Remember this
🔥 ?
• Fast
• Even on
slow
networks
• Integrated
• Add to
home
screen
• Reliable
• Offline-first
• Engaging
• Web push
notifications
@fvcproductions
🔥 Checklist
• Integrated
• manifest.json
• HTML enhancements
• Reliable
• sw.js
• HTTPs
@fvcproductions
The butterfly 🦋
@fvcproductions
manifest.json
index.html
sw.js
@fvcproductions
Only
3 files
needed!
🦋
Web push
notifications?
Engaging?
@fvcproductions
@fvcproductions
@fvcproductions
TLDR;
@fvcproductions
@fvcproductions
FIN 🦋
@fvcproductions
Thanks for listening! 💛
@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/
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
These slides will be shared ASAP! 🎉
https://slideshare.net/fvcproductions
@fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

Scenic City Summit 2018 - Progressive Web Apps 101