Expert Silicon Valley technologists deliver keynotes that help fullstack developers prepare for the next decade of programming. I was invited to speak about Progressive Web Apps on July 28th, 2018 at Infosys in Palo Alto for ~30 minutes at 4 pm. I believe PWAs represent the next big wave of modern web standards. More event details: https://www.eventbrite.co.uk/e/a-full-stack-future-registration-47706682973#

1. Progressive Web Apps
@fvcproductions

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

3. @fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

4. Curriculum
• Why even? 🤔 (50%)
• Embracing the web
• Where even? 👀 (50%)
• Examples in real life
@fvcproductions

5. Why even? 🤔 @fvcproductions

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

7. The mobile web.
🌐📱
@fvcproductions

8. @fvcproductions

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

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

11. Integrated
@fvcproductions

12. Reliable
@fvcproductions

13. Engaging
@fvcproductions

14. In Summary
@fvcproductions

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

16. @fvcproductionsThe State of LTE (Nov 2017)

17. @fvcproductions

18. @fvcproductions

19. 4GB Availability Worldwide
@fvcproductions @fvcproductions

20. 4GB Speed Worldwide
@fvcproductions

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

24. @fvcproductions
Emerging markets are
becoming more crucial

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

26. @fvcproductions

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

28. Write once,
deploy
everywhere!
@fvcproductions

29. Where even? 👀 @fvcproductions

30. EVERYWHERE! 😮😁
@fvcproductions

31. @fvcproductions

32. Exploring Examples
• Starbucks (Food)
• Instagram (Photos)
• Forbes (News)
• Trivago (Travel)
• Flipkart (Ecommerce)
😲
@fvcproductions

33. @fvcproductions

36. Forbes

37. Trivago

38. Flipkart

39. Downsides… 😓
@fvcproductions

40. No centralized hub @fvcproductions

41. No centralized hub @fvcproductions

42. @fvcproductions

43. @fvcproductions

44. @fvcproductions

45. TLDR;
@fvcproductions

46. @fvcproductions

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

48. FIN

49. Thanks for listening! 💛
@fvcproductions

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

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