This document provides an overview of progressive web apps (PWAs) through a presentation given by Frances. The presentation covers why PWAs are useful, examples of PWAs in practice, and how to build a PWA. It explains that PWAs are fast, work on any network, can be installed like native apps, and use newer web capabilities like push notifications. The bulk of the presentation focuses on the technical aspects of developing PWAs, including using a service worker, manifest file, and other techniques to make web apps more app-like.

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

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

3. Norfolk, VA

4. @fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

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

6. Why even? 🤔 @fvcproductions

7. @fvcproductions

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

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

10. Integrated
@fvcproductions

11. Reliable
@fvcproductions

12. Engaging
@fvcproductions

13. In Summary
@fvcproductions

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

15. @fvcproductionsThe State of LTE (Nov 2017)

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

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

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

21. Write once,
deploy
everywhere!
@fvcproductions

22. Where even? 👀 @fvcproductions

23. EVERYWHERE! 😮😁
@fvcproductions

26. Downsides… 😓
@fvcproductions

27. No centralized hub @fvcproductions

28. No centralized hub @fvcproductions

30. How even? 🛠 @fvcproductions

31. Lighthouse
@fvcproductions

37. 3. sw.js
2. index.html
1. manifest.json
HTTPs

38. hugoma.fvcproductions.com

39. @fvcproductions

42. 3. sw.js
2. index.html
1. manifest.json
HTTPs

43. @fvcproductions

44. @fvcproductions

45. 1. manifest.json

46. 48x48, 72x72, 96x96, 144x144,
192x192, 256x256, 384x384, 512x512
manifest.json icons

48. 2. index.html
@fvcproductions

49. 3. sw.js
@fvcproductions

51. @fvcproductions

52. 3. sw.js
@fvcproductions

53. 3. sw.js
file manifest
@fvcproductions

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

55. 🔥 Checklist
• Integrated
• 1. manifest.json
• 2. HTML enhancements
• Reliable
• 3. sw.js
• 4. HTTPs
@fvcproductions

56. @fvcproductions

57. sw.js
HTML enhancements
HTTPs
manifest.json

58. Engaging?
@fvcproductions

59. @fvcproductions

60. @fvcproductions

61. FIN

62. Thanks for listening! 💛
@fvcproductions

63. References
• NationJS website: http://nationjs.com/
• Progressive Web Apps Checklist: https://developers.google.com/web/
progressive-web-apps/checklist
• US Design System Standards: https://designsystem.digital.gov/
components/typography/
• PWAs: building bridges to mobile, desktop, and native (Google I/O ’18) :
https://www.youtube.com/watch?v=NITk4kXMQDw
• Tooling for Progressive Web Apps: https://www.youtube.com/watch?
v=_CO3XZj00no
• OneSignal: The State of LTE: https://opensignal.com/reports/2017/11/state-
of-lte
• Syntax Highlighting: https://carbon.now.sh
• Workbox: https://developers.google.com/web/tools/workbox/
• Comscore 2017 US Mobile App Report: https://www.comscore.com/
Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-
Report
• Music from Jukedeck - create your own at http://jukedeck.com
• Speedtest 2017 US Market Report by Ookla: http://www.speedtest.net/
reports/united-states
• Jopwell Stock Photos: https://www.jopwell.com
• Service workers explained: https://www.netlify.com/blog/2017/10/31/
service-workers-explained/
• 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
• Shrinking APKs, growing installs: https://medium.com/googleplaydev/
shrinking-apks-growing-installs-5d3fcba23ce2
• We Are Social - Digital in 2018 Report: https://wearesocial.com/us/blog/
2018/01/global-digital-report-2018
• Hugoma Theme: https://github.com/fvcproductions/hugoma-theme
@fvcproductions

64. These slides will be shared ASAP! 🎉
bit.ly/frances-nationjs
@fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

65. Appendix

66. 4GB Availability Worldwide
@fvcproductions

67. 4GB Speed Worldwide
@fvcproductions

68. 26.5 Mbps download
12.1 Mbps upload
@fvcproductions

69. 4GB availability
86.94%
4GB speed
13.98 Mbps
@fvcproductions

70. @fvcproductions
Emerging markets are
becoming more crucial