web push notifications for your webapp
-
Upload
lahiru-jayakody -
Category
Software
-
view
250 -
download
0
Transcript of web push notifications for your webapp
![Page 1: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/1.jpg)
Push notifications for your webapp!
![Page 2: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/2.jpg)
Facebook desktop notifications
![Page 3: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/3.jpg)
Web push notifications
![Page 4: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/4.jpg)
![Page 5: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/5.jpg)
Web push notifications
![Page 6: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/6.jpg)
• Chrome 49+ ? (55+)• Firefox 52+• Opera 42+
» Safari 10+
Web push notifications support
![Page 7: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/7.jpg)
• Chrome 49+ ? (55+)• Firefox 52+• Opera 42+
» Safari 10+
Web push notification support
Implements Push API
![Page 8: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/8.jpg)
Two protocols
• Push API, which is the W3C standard for web push notifications
» Safari Push Notifications, which is an Apple-exclusive technology
![Page 9: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/9.jpg)
Push API
![Page 10: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/10.jpg)
Push API
![Page 11: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/11.jpg)
Custom APIPush API
![Page 12: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/12.jpg)
![Page 13: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/13.jpg)
if (isNonSafari()) if ('serviceWorker' in navigator && 'PushManager' in
window)
![Page 14: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/14.jpg)
navigator.serviceWorker.register('serviceWorker.js')
![Page 15: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/15.jpg)
Notification.permission == ?
![Page 16: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/16.jpg)
navigator.serviceWorker.register('serviceWorker.js') .then(function(swReg) {
console.log('Service Worker is registered');swRegistration = swReg;
});
![Page 17: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/17.jpg)
// serviceWorker.js
![Page 18: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/18.jpg)
// serviceWorker.js
self.addEventListener('push', function(event) {
console.log(`data: ${event.data.text()}`); });
![Page 19: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/19.jpg)
// serviceWorker.js
self.addEventListener('push', function(event) {
const title = event.data.json().title[0]; const options = { body : event.data.json().message[0],
icon : 'images/icon.png', badge: 'images/badge.png' };
event.waitUntil(self.registration.showNotification(title, options)
);});
![Page 20: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/20.jpg)
![Page 21: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/21.jpg)
swRegistration.pushManager .subscribe({ userVisibleOnly :true,
applicationServerKey :VAPID_PUBLIC_KEY })
![Page 22: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/22.jpg)
swRegistration.pushManager .subscribe({ userVisibleOnly : true,
applicationServerKey : VAPID_PUBLIC_KEY } ).then(function(subscription) { updateSubscriptionOnServer(subscription);
});
![Page 23: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/23.jpg)
PushService pushService = new PushService();
pushService.setSubject("mailto:[email protected]"); pushService.setPublicKey(VAPID_PUBLIC_KEY); pushService.setPrivateKey(VAPID_PRIVATE_KEY);
HttpResponse httpResponse = pushService.send(notification);
![Page 24: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/24.jpg)
![Page 25: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/25.jpg)
swRegistration.pushManager.getSubscription()
![Page 26: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/26.jpg)
swRegistration.pushManager.getSubscription().then(function(subscription) {
subscription.unsubscribe(); });
![Page 27: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/27.jpg)
Push API summary
ServiceWorker update()
unregister()
showNotification()
![Page 28: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/28.jpg)
Push API summary
Notification
requestPermission()
permission
![Page 29: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/29.jpg)
Push API summary
ServiceWorkerPush manager
update()
unregister()
subscribe()
getSubscription()
showNotification()
![Page 30: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/30.jpg)
Push API summary
ServiceWorkerPush manager
update()
unregister()
subscribe()
getSubscription()
Subscription
showNotification()
unsubscribe()
Service Worker Registration
Create Push Subscription
Distribute Subscription
Send Push Message
Remove Push Subscription
Notification
requestPermission()
permission
![Page 31: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/31.jpg)
Safari web push notifications
![Page 32: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/32.jpg)
Safari web push notifications
![Page 33: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/33.jpg)
![Page 34: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/34.jpg)
![Page 35: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/35.jpg)
![Page 36: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/36.jpg)
![Page 37: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/37.jpg)
1. POST webServiceURL/version/pushPackages/websitePushID2. POST webServiceURL/version/devices/deviceToken/registrations/websitePushID3. DELETE webServiceURL/version/devices/deviceToken/registrations/websitePushID4. POST webServiceURL/version/log
should support following REST calls
![Page 38: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/38.jpg)
![Page 39: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/39.jpg)
1. POST webServiceURL/version/pushPackages/websitePushID2. POST webServiceURL/version/devices/deviceToken/registrations/websitePushID3. DELETE webServiceURL/version/devices/deviceToken/registrations/websitePushID4. POST webServiceURL/version/log
should support following REST calls
![Page 40: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/40.jpg)
![Page 41: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/41.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
![Page 42: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/42.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
![Page 43: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/43.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
{ "websiteName": "Bay Airlines", "websitePushID": "web.com.example.domain", "allowedDomains": ["http://domain.example.com"], "urlFormatString": "http://domain.example.com/%@/?
flight=%@", "authenticationToken": "19f8d7a6e9fb8a7f6d9330dabe",
"webServiceURL": "https://example.com/push" }
![Page 44: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/44.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
![Page 45: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/45.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
{ "website.json": "96838c4059…d7760fa404c728886b3a8",
"icon.iconset/icon_16x16.png": "8cbb85…e1c7986a63417e1", ...
}
![Page 46: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/46.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
$certs[] = openssl_pkcs12_read($p12file);$cert_data = openssl_x509_read($certs['cert']);$private_key = openssl_pkey_get_private($certs['pkey'], $cert_password); $signature = openssl_pkcs7_sign("manifest.json", $cert_data, $private_key);
![Page 47: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/47.jpg)
PushPackage.raw
icon.iconset/[email protected][email protected][email protected]
website.json
should be able to create a PushPackagePushPackage.zip
icon.iconset/[email protected][email protected][email protected]
manifest.jsonsignaturewebsite.json
![Page 48: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/48.jpg)
push notifications are supported?
if ('safari' in window && 'pushNotification' in window.safari) {
}
![Page 49: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/49.jpg)
status of permission policy?
if ('safari' in window && 'pushNotification' in window.safari) {
window.safari.pushNotification.permission('web.com.example');
}
![Page 50: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/50.jpg)
ask user for permissions
if ('safari' in window && 'pushNotification' in window.safari) {
var permissionData = window.safari.pushNotification.permission('web.com.example');
if (permissionData.permission === 'default') {
window.safari.pushNotification.requestPermission( 'https://domain.example.com', // The web service URL. 'web.com.example.domain', // The Website Push ID. {}, // Data to send to your servercheckRemotePermission // The callback function.
); }
![Page 51: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/51.jpg)
send the device token
if ('safari' in window && 'pushNotification' in window.safari) {
var permissionData = window.safari.pushNotification.permission('web.com.example');
if (permissionData.permission === 'default') {
window.safari.pushNotification.requestPermission( 'https://domain.example.com', // The web service URL. 'web.com.example.domain', // The Website Push ID. {}, // Data to send to your servercheckRemotePermission // The callback function.
);
} else if (permissionData.permission === 'granted') { updateSubscriptionOnServer(permissionData.deviceToken);
}}
![Page 52: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/52.jpg)
push notifications are supported?
if ('safari' in window && 'pushNotification' in window.safari) {
var permissionData = window.safari.pushNotification.permission('web.com.example');
if (permissionData.permission === 'default') {
window.safari.pushNotification.requestPermission( 'https://domain.example.com', // The web service URL. 'web.com.example.domain', // The Website Push ID. {}, // Data to send to your servercheckRemotePermission // The callback function.
);
} else if (permissionData.permission === 'granted') { updateSubscriptionOnServer(permissionData.deviceToken);
}}
![Page 53: web push notifications for your webapp](https://reader035.fdocuments.in/reader035/viewer/2022062302/58ee78941a28ab4e588b45f3/html5/thumbnails/53.jpg)
lahiiru.github.io/browser-push
Complete guide is here