Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Push Notifications

Web Push Notifications

Manuel Wieser

March 27, 2017
Tweet

More Decks by Manuel Wieser

Other Decks in Programming

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. 1
    2
    3
    4
    5

    View Slide

  9. 1
    2
    3
    4
    5

    View Slide

  10. 1
    2
    3
    4
    5

    View Slide

  11. 1
    2
    3
    4
    5

    View Slide

  12. 1
    2
    3
    4
    5

    View Slide

  13. 1
    2
    3
    4
    5

    View Slide

  14. 1
    2
    3
    4
    5

    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