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
62
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
62
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
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
7
1.5k
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
100
rails newと同時に型を書く
aki19035vc
6
750
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
270
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
500
functionalなアプローチで動的要素を排除する
ryopeko
1
950
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
390
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
790
HTML/CSS超絶浅い説明
yuki0329
0
210
Оптимизируем производительность блока Казначейство
lamodatech
0
990
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Designing for humans not robots
tammielis
250
25k
Side Projects
sachag
452
42k
Visualization
eitanlees
146
15k
Music & Morning Musume
bryan
46
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
299
50k
Faster Mobile Websites
deanohume
305
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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