Web Push Notifications

Slides for my talk at Fluent Conf, San Jose, June 22, 2017

Transcript

2. Web Push Notifications Olga Petrova Software Engineer @ Sencha
3. What You Will Learn • Definition & Concept • Implementation • Framework API • State of Specifications & Browser support
4. Definition & Concept
5. Web Push Notifications Gives web applications the ability to receive messages pushed to them from a server at any time
6. Target Engage users with urgent and relevant notifications and motivate them to return to the application
7. Commercial Value • Increase user engagement • Increase web app value • Replace a native app with a web app
8. Web Push + page/browser is inactive/closed - encryption - message size/count limit - requires display of a notification - active web page + no encryption + no message size/count limit + no notification display required Web Sockets + real-time communication vs
9. Implementation
10. 5 Players WebApp Service Worker Browser Push Server App Server
11. Web Push Message Encryption for Web Push Voluntary Application Server Identification for Web Push Push API Specifications Notification API WebApp Service Worker Browser Push Server App Server
12. Round 1: Service Worker Registration WebApp Service Worker Browser Push Server App Server Register ServiceWorkerRegistration Page Load
13. Round 1: ServiceWorker Registration if ('serviceWorker' in navigator) { if ('PushManager' in window) { navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) { //state initializing }); .catch(function() { //error handling }); } else { //error handling } } else { //error handling } WebApp
14. Round 2: Subscription WebApp Service Worker Browser Push Server App Server Subscribe PushSubscription Subscribe push subscription save PushSubscription User is ready to subscribe
15. Round 2: Subscription navigator.serviceWorker.ready.then(function(registration) { registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array('...') }) .then(function(subscription) { // The subscription was successful savePushSubscription(subscription); }) .catch(function(e) { //error handling }); }); WebApp
16. Round 2: Permission Request WebApp Notification.requestPermission().then(function(result) { if (result!== 'granted') { //handle permissions deny } });
17. Round 2: Subscription reg.pushManagerpushManager.subscribe({ userVisibleOnly: true, applicationServerKey: new Uint8Array([...]) }); WebApp
18. Round 2: Subscription Object interface PushSubscription { readonly attribute endpoint; // "https://{push_server_url}/{user_identifier}", function getKey(); //auth - authentication secret //p256dh - key for encrypting messages }; WebApp
19. Round 3: Push Message WebApp Service Worker Browser Push Server App Server push message push message push message Something urgent and relevant happened
20. Round 3: Push Message POST /{user_identifier} HTTP/1.1 Host: {push_server_url} TTL: 15 Content-Type: text/plain;charset=utf8 Content-Length: 36 {encrypted_message} AppServer
21. Round 3: Additional Headers POST /{user_identifier} HTTP/1.1 Host: {push_server_url} Content-Type: text/plain;charset=utf8 Content-Length: 36 Prefer: respond-async TTL: 15 Urgency: high Topic: upd {encrypted_message} AppServer
22. Round 3: Message Encryption POST /{user_identifier} HTTP/1.1 Host: {push_server_url} Content-Type: text/plain;charset=utf8 Content-Length: 36 Prefer: respond-async TTL: 15 Urgency: high Topic: upd {encrypted_message} AppServer
23. Round 3: Encryption Library https://github.com/web-push-libs/web-push AppServer
24. Round 3: Voluntary Identification AppServer POST /{user_identifier} HTTP/1.1 Host: {push_server_url} TTL: 15 Content-Length: 136 Authorization: Bearer eyJ0eXAi... Crypto-Key: p256ecdsa=BA1Hxzy... {encrypted_message}
25. Round 3: Voluntary Identification JWT = { "aud": "https://{push_server_url}", "exp": 1453341205, "sub": "{application_server_email}" } AppServer
26. Round 3: Push Message self.addEventListener('push', function(event) { var data = event.data.json(); event.waitUntil(self.registration.showNotification(data.title, { body: data.body, icon: data.icon, tag: data.tag })); }); ServiceWorker
27. Round 3: Handle Notification self.addEventListener('notificationclick', function(event) { event.notification.close(); event.waitUntil(clients.openWindow('http://mywebsite.com')); }); ServiceWorker
28. Round 3: Notifications with Actions self.registration.showNotification(data.title, { body: data.body, actions: [ { action: 'ok', title: 'Yes' }, { action: 'decline', title: 'No' } ] }); … self.addEventListener('notificationclick', function(event) { if (event.action == 'ok') { // do something } }); ServiceWorker
29. Round 3: Notification Close self.addEventListener('notificationclose', function(event) { //do something }); ServiceWorker
30. Round 3: Handle Notification if (focused) { clients.forEach(function(client){ client.postMessage({ message: data.message }); }); } else { return self.registration.showNotification(data.title, { body: data.message }); } ServiceWorker
31. Round 4: Unsubscription WebApp Service Worker Browser Push Server App Server unsubscribe OK unsubscribe OK remove PushSubscription User wants to unsubscribe
32. Round 4: Unsubscription registration.pushManager.getSubscription().then(function(subscription) { if (subscription) { return subscription.unsubscribe().then(function(successful) { removePushSubscription(subscription); }).catch(function(e) { //error handling }); } }) .catch(function(error) { //error handling }) WebApp
33. Additional Round: Subscription Expiration WebApp Service Worker Browser Push Server App Server Subscription is about to expire
34. Additional Round: Subscription Expiration self.addEventListener('pushsubscriptionchange', function(registration, newSubscription, oldSubscription) { removePushSubscription(oldSubscription); savePushSubscription(newSubscription); }); ServiceWorker
35. Framework API
36. Framework API • PushNotification singleton • Methods: • .subscribe(message, applicationServerKey): Promise • .unsubscribe(): Promise • Events: • beforeNotificationShow(notification, data) • beforeNotificationClose • afterNotificationClose • subscriptionExpired(oldSubscription, newSubscription)
37. State of Specifications & Browser Support
38. State of Specifications Specification State Push API Working draft Notification API Living standard HTTP Web Push Proposed standard Push Message Encryption protocol Internet-draft VAPID protocol Internet-draft
39. Browser Support Browser Desktop Mobile Chrome Yes Yes Firefox Yes Yes Edge Beta Beta Safari Yes No Opera Yes Yes IE No No
40. Next Steps Using Web Push Notifications will push browser vendors to implement this feature. Try it in your apps. Ask me questions: I’ll be at the Sencha Booth #913 Contact me: @tyoushe