Progressive Web Apps are a culmination of new technology bridging the gap between traditional web applications and native applications. This presentation aims at discussing and utilizing the technology behind them, such as Service Workers.

1. Progressive Web Apps
@ domfarolino

2. Dom Farolino
•https://github.com/domfarolino
•https://twitter.com/domfarolino
•ACM@UC Exec

3. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

4. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

5. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

6. Why do people choose native?
1 Native vs. Web

7. • Access to native hardware
• Work & load offline
• Push Notifications
• Home Screen
1 Native vs. Web

8. Native Hardware
• Bluetooth
• GPS/Location
• Camera
• Storage

9. Offline
Provides user with a
functional app shell

10. Offline
Usable content with no
network connection

11. Push Notifications
Easy re-engagement

12. Push Notifications
App interactions

13. Home Screen
Prime real estate

14. 1 Wrapping Up
Features Native Web
Bluetooth x
Camera/Mic x
Location x
Storage x
Offline x
Push Notifications x
Home Screen x

15. Web wasn’t built for apps
no application model

16. No app model
• No downloadable bundle (shell)
• Text parsing/display (HTML)
• Basic styles (CSS)
• Basic interactive content (JS)

17. Current Solutions
• Iconic
• React Native
• Phonegap
• Electron
• …trend of web tooling

18. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

19. Feature Parity
Through the power of web APIs

20. Browser is Boss
Sits between JavaScript and native OS APIs

21. • Just JavaScript! (typical)
• Utilize browser’s OS integrations
• User gets a progressively richer experience
• Feature detection
2 Progressive Enhancement

22. 2 Progressive Enhancement

23. Features Native Web
Bluetooth x x
Camera/Mic x x
Location x x
Storage x x/2
Offline x
Push Notifications x
Home Screen x
2 Progressive Enhancement

24. Take a tip from native
Explain ourselves

25. Info.plist
XML key value pair

26. App Manifest
XML key value pair

27. Web equivalent?

28. Web App Manifest
manifest.json
index.html

29. Manifest Detection

30. Manifest Detection

31. Close to installable

32. Common Points
among offline, push notifications, and home screen

34. Service Worker API

35. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

36. Manifest + SW = Installable Web App

37. Service Worker
• Event driven client side proxy
• Intercepts network requests
• Persistent request/response cache

38. Service Worker

39. Service Worker

40. Progressive Enhancement
app.js
sw.js

41. SW Events

42. Roadmap
1 Native vs. Web
3 Role of the Service Worker
4 Build!
2 Progressive Web Apps

43. Build What?
https://github.com/domfarolino/pwa-meetup