Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Push Notifications
Search
Olga
June 22, 2017
Programming
1
290
Web Push Notifications
Slides for my talk at Fluent Conf, San Jose, June 22, 2017
Olga
June 22, 2017
Tweet
Share
More Decks by Olga
See All by Olga
Visual Feature Engineering for Machine Learning with React
olgapetrova
0
220
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
63
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
63
How to Re-Architect a JavaScript Class System
olgapetrova
0
120
How to add D3.js visualization to your Ext JS application
olgapetrova
1
540
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
90
ExtJS 6: one framework for all devices
olgapetrova
1
760
Other Decks in Programming
See All in Programming
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Open source software: how to live long and go far
gaelvaroquaux
0
620
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
技術を根付かせる / How to make technology take root
kubode
1
240
Unity Android XR入門
sakutama_11
0
140
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.3k
A Philosophy of Restraint
colly
203
16k
Navigating Team Friction
lara
183
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
15k
GitHub's CSS Performance
jonrohan
1030
460k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
How to Ace a Technical Interview
jacobian
276
23k
Embracing the Ebb and Flow
colly
84
4.6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Transcript
None
Web Push Notifications Olga Petrova Software Engineer @ Sencha
What You Will Learn • Definition & Concept • Implementation
• Framework API • State of Specifications & Browser support
Definition & Concept
Web Push Notifications Gives web applications the ability to receive
messages pushed to them from a server at any time
Target Engage users with urgent and relevant notifications and motivate
them to return to the application
Commercial Value • Increase user engagement • Increase web app
value • Replace a native app with a web app
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
Implementation
5 Players WebApp Service Worker Browser Push Server App Server
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
Round 1: Service Worker Registration WebApp Service Worker Browser Push
Server App Server Register ServiceWorkerRegistration Page Load
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
Round 2: Subscription WebApp Service Worker Browser Push Server App
Server Subscribe PushSubscription Subscribe push subscription save PushSubscription User is ready to subscribe
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
Round 2: Permission Request WebApp Notification.requestPermission().then(function(result) { if (result!== 'granted')
{ //handle permissions deny } });
Round 2: Subscription reg.pushManagerpushManager.subscribe({ userVisibleOnly: true, applicationServerKey: new Uint8Array([...]) });
WebApp
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
Round 3: Push Message WebApp Service Worker Browser Push Server
App Server push message push message push message Something urgent and relevant happened
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
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
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
Round 3: Encryption Library https://github.com/web-push-libs/web-push AppServer
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}
Round 3: Voluntary Identification JWT = { "aud": "https://{push_server_url}", "exp":
1453341205, "sub": "{application_server_email}" } AppServer
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
Round 3: Handle Notification self.addEventListener('notificationclick', function(event) { event.notification.close(); event.waitUntil(clients.openWindow('http://mywebsite.com')); });
ServiceWorker
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
Round 3: Notification Close self.addEventListener('notificationclose', function(event) { //do something });
ServiceWorker
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
Round 4: Unsubscription WebApp Service Worker Browser Push Server App
Server unsubscribe OK unsubscribe OK remove PushSubscription User wants to unsubscribe
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
Additional Round: Subscription Expiration WebApp Service Worker Browser Push Server
App Server Subscription is about to expire
Additional Round: Subscription Expiration self.addEventListener('pushsubscriptionchange', function(registration, newSubscription, oldSubscription) { removePushSubscription(oldSubscription);
savePushSubscription(newSubscription); }); ServiceWorker
Framework API
Framework API • PushNotification singleton • Methods: • .subscribe(message, applicationServerKey):
Promise • .unsubscribe(): Promise • Events: • beforeNotificationShow(notification, data) • beforeNotificationClose • afterNotificationClose • subscriptionExpired(oldSubscription, newSubscription)
State of Specifications & Browser Support
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
Browser Support Browser Desktop Mobile Chrome Yes Yes Firefox Yes
Yes Edge Beta Beta Safari Yes No Opera Yes Yes IE No No
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