Web Push Notifications @manuelwieser

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

What’s new?

No content

No content

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.

Technological Overview

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

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

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

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

Browser Support

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

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

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

No content

No content

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

LOL, NOPE!

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