Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Progressive Web Apps (Kyle Buchanan)

904 views

Published on

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.

Published in: Software
  • Be the first to comment

Building Progressive Web Apps (Kyle Buchanan)

  1. 1. Building Progressive Web Apps Kyle Buchanan
  2. 2. About Me Kyle Buchanan Senior Software Engineer at Red Hat 10+ Years of Front-End Development Excited and frustrated at the same time
  3. 3. Why?
  4. 4. Progressive Web Apps
  5. 5. 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/
  6. 6. Aren’t we already building progressive web apps?
  7. 7. Principles of a Progressive Web App • Fast • Secure • Responsive Source: https://developers.google.com/web/progressive-web-apps/
  8. 8. 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/
  9. 9. Our Goal
  10. 10. You’re kidding, right?
  11. 11. Our Goal • Installable! • Works Offline! • Receives Push Notifications!
  12. 12. Baby Steps
  13. 13. Add to Home Screen
  14. 14. manifest.json
  15. 15. We can do better than that.
  16. 16. Instant Loading
  17. 17. 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
  18. 18. 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
  19. 19. Registering a Service Worker
  20. 20. Installing a Service Worker
  21. 21. Intercept network requests
  22. 22. 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
  23. 23. Cache then network
  24. 24. So what did that buy us?
  25. 25. From network
  26. 26. From cache
  27. 27. Offline!
  28. 28. I’d say that we did better.
  29. 29. Push Notifications
  30. 30. 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
  31. 31. 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
  32. 32. Subscribe to push notifications Send that to your server
  33. 33. 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
  34. 34. Listen for push events
  35. 35. Get the message and display notification
  36. 36. Handle notification click
  37. 37. Caching / offline strategy Push notifications Handle notification click
  38. 38. 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/
  39. 39. 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/
  40. 40. All we really did… • manifest.json • Service Worker
  41. 41. Tools
  42. 42. https://brucelawson.github.io/manifest/
  43. 43. https://github.com/GoogleChrome/lighthouse
  44. 44. https://developers.google.com/web/#progressive-web-apps
  45. 45. https://pwa.rocks https://developers.google.com/web/progressive-web-apps
  46. 46. 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/
  47. 47. Let’s make the web better.
  48. 48. Thank you. kylebuch8@gmail.com https://github.com/kylebuch8 @KyleBuchanan8

×