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
   

   View Slide

2. Web Push Notifications
   1. What’s new?
   2. Technological Overview
   3. Demonstration
   4. Browser Support
   

   View Slide

3. What’s new?
   

   View Slide

4. View Slide

5. View Slide

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.
   

   View Slide

7. Technological Overview
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Formula
    • applicationServerKey
    • Service Worker
    • Subscription
    • Subscription Object
    • Push Message
    

    View Slide

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

    View Slide

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

    View Slide

18. Browser Support
    

    View Slide

19. Chrome
    • Service Workers ✅
    • Push API ✅
    • Notifications API ✅
    • Web Push Protocol ✅
    • Windows ✅
    • macOS ✅
    • Linux ✅
    • Android ✅
    

    View Slide

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

    View Slide

21. Edge
    • Service Workers
    • Push API
    • Notifications API ✅
    • Web Push Protocol ✅
    • Windows
    • Windows Mobile
    

    View Slide

22. View Slide

23. View Slide

24. Safari
    • Service Workers ❌
    • Push API ❌
    • Notifications API ✅
    • Web Push Protocol ❌
    • macOS ✅
    via Apple’s non-standard
    implementation
    • iOS ❌
    

    View Slide

25. LOL, NOPE!
    

    View Slide

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

    View Slide