Pro Yearly is on sale from $80 to $50! »

Web Push Notifications

Web Push Notifications

9b509a6ebaf600e9198dcc3a9a075aa8?s=128

Manuel Wieser

March 27, 2017
Tweet

Transcript

  1. Web Push Notifications @manuelwieser

  2. Web Push Notifications 1. What’s new? 2. Technological Overview 3.

    Demonstration 4. Browser Support
  3. What’s new?

  4. None
  5. None
  6. Web Push Protocol • RFC 8030 – Generic Event Delivery

    Using HTTP Push
 https://tools.ietf.org/html/rfc8030 • You can use the same code for Chrome and Firefox since mid 2016. • You no longer need a Firebase project, a gcm_sender_id, or an Authorization header. You no longer need a manifest.json. • Microsoft is co-authoring the RFC, so they will follow the standard.
  7. Technological Overview

  8. 1 2 3 4 5

  9. 1 2 3 4 5

  10. 1 2 3 4 5

  11. 1 2 3 4 5

  12. 1 2 3 4 5

  13. 1 2 3 4 5

  14. 1 2 3 4 5

  15. Formula • applicationServerKey • Service Worker • Subscription • Subscription

    Object • Push Message
  16. Formula • webpush.generateVAPIDKeys() • navigator.serviceWorker.register() • serviceWorkerRegistration.pushManager.subscribe() • subscription.toJSON() •

    webpush.sendNotification()
  17. STOP IT’S DEMO TIME! github.com/Lorti/web-push-notifications

  18. Browser Support

  19. Chrome • Service Workers ✅ • Push API ✅ •

    Notifications API ✅ • Web Push Protocol ✅ • Windows ✅ • macOS ✅ • Linux ✅ • Android ✅
  20. Firefox • Service Workers ✅ • Push API ✅ •

    Notifications API ✅ • Web Push Protocol ✅ • Windows ✅ • macOS ✅ • Linux ✅ • Android ✅
  21. Edge • Service Workers • Push API • Notifications API

    ✅ • Web Push Protocol ✅ • Windows • Windows Mobile
  22. None
  23. None
  24. Safari • Service Workers ❌ • Push API ❌ •

    Notifications API ✅ • Web Push Protocol ❌ • macOS ✅ via Apple’s non-standard implementation • iOS ❌
  25. LOL, NOPE!

  26. ありがとう ございます Demo https://github.com/Lorti/web-push-notifications Slides https://manu.ninja/ @manuelwieser