With the recent advancements in modern browsers, more native app-like features are coming to the browser. Things like push notifications, background sync, offline capabilities and home screen app icons have been added to browsers allowing developers to continue building web apps, but now include features that users expect from native apps. In this session we'll take an existing web app and transform it into a progressive web app. We’ll learn how to make the web app installable, how to make it work offline and finally we’ll learn how to add push notifications to re-engage our users.

2. Building Progressive Web Apps
Kyle Buchanan

3. About Me
Kyle Buchanan
Senior Software Engineer at Red Hat
10+ Years of Front-End Development
Excited and frustrated at the same time

6. Why?

7. Progressive Web Apps

8. What is a Progressive Web App?
Progressive Web Applications take advantage of new
technologies to bring the best of mobile sites and native
applications to users. They're reliable, fast, and engaging.
Source: https://developers.google.com/web/progressive-web-apps/

9. Aren’t we already building
progressive web apps?

10. Principles of a Progressive Web App
• Fast
• Secure
• Responsive
Source: https://developers.google.com/web/progressive-web-apps/

11. Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/

12. Our Goal

13. You’re kidding, right?

14. Our Goal
• Installable!
• Works Offline!
• Receives Push Notifications!

15. Baby Steps

18. Add to Home Screen

19. manifest.json

23. We can do better than that.

24. Instant Loading

25. Service Worker
• Create offline experiences
• Intercept network requests
• Cache
• Push notifications
• Background sync
Source: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

26. Service Worker
• Create offline experiences
• Intercept network requests
• Cache
• Push notifications
• Background sync
Source: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

27. Registering a Service Worker

28. Installing a Service Worker

29. Intercept network requests

30. Responding to Fetch Events
• Cache only
• Network only
• Cache, falling back to network
• Cache and network race
• Network falling back to cache
• Cache then network

31. Cache then network

32. So what did that buy us?

33. From network

34. From cache

35. Offline!

36. I’d say that we did better.

38. Push Notifications

39. Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click

40. Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click

41. Subscribe to push notifications
Send that to your server

42. Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click

43. Listen for push events

44. Get the message and display notification

45. Handle notification click

47. Caching / offline strategy
Push notifications
Handle notification click

48. Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/

49. Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/

50. All we really did…
• manifest.json
• Service Worker

52. Tools

53. https://brucelawson.github.io/manifest/

54. https://github.com/GoogleChrome/lighthouse

55. https://developers.google.com/web/#progressive-web-apps

57. https://pwa.rocks
https://developers.google.com/web/progressive-web-apps

58. Links
Build your first progressive web app
https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/
Progressive Web Apps: Escaping Tabs Without Losing Our Soul
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
The Offline Cookbook
https://jakearchibald.com/2014/offline-cookbook/
Getting started with Progressive Web Apps
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

59. Let’s make the web better.

60. Thank you.
kylebuch8@gmail.com
https://github.com/kylebuch8
@KyleBuchanan8