Web Push Notifications

Talk at Stahlstadt.js on March 27, 2017
https://github.com/Lorti/web-push-notifications
https://manu.ninja/web-push-notifications

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?
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
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