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

Web Push Notifications

Olga
June 22, 2017

Web Push Notifications

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

Olga

June 22, 2017
Tweet

More Decks by Olga

Other Decks in Programming

Transcript

  1. What You Will Learn • Definition & Concept • Implementation

    • Framework API • State of Specifications & Browser support
  2. Web Push Notifications Gives web applications the ability to receive

    messages pushed to them from a server at any time
  3. Commercial Value • Increase user engagement • Increase web app

    value • Replace a native app with a web app
  4. 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
  5. 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
  6. Round 1: Service Worker Registration WebApp Service Worker Browser Push

    Server App Server Register ServiceWorkerRegistration Page Load
  7. 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
  8. Round 2: Subscription WebApp Service Worker Browser Push Server App

    Server Subscribe PushSubscription Subscribe push subscription save PushSubscription User is ready to subscribe
  9. 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
  10. 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
  11. Round 3: Push Message WebApp Service Worker Browser Push Server

    App Server push message push message push message Something urgent and relevant happened
  12. 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
  13. 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
  14. 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
  15. 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}
  16. Round 3: Voluntary Identification JWT = { "aud": "https://{push_server_url}", "exp":

    1453341205, "sub": "{application_server_email}" } AppServer
  17. 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
  18. 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
  19. 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
  20. Round 4: Unsubscription WebApp Service Worker Browser Push Server App

    Server unsubscribe OK unsubscribe OK remove PushSubscription User wants to unsubscribe
  21. 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
  22. Framework API • PushNotification singleton • Methods: • .subscribe(message, applicationServerKey):

    Promise • .unsubscribe(): Promise • Events: • beforeNotificationShow(notification, data) • beforeNotificationClose • afterNotificationClose • subscriptionExpired(oldSubscription, newSubscription)
  23. 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
  24. Browser Support Browser Desktop Mobile Chrome Yes Yes Firefox Yes

    Yes Edge Beta Beta Safari Yes No Opera Yes Yes IE No No
  25. 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