Progressive Web Apps

Progressive Web App talk given at Node School Cincy. Talk link: https://youtu.be/FXAOGZ3Gw4U Demo app: https://github.com/domfarolino/pwa-meetup

Transcript

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