web push notifications for your webapp

Push notifications for your webapp!

Facebook desktop notifications

Web push notifications

Web push notifications

• Chrome 49+ ? (55+)• Firefox 52+• Opera 42+

» Safari 10+

Web push notifications support

• Chrome 49+ ? (55+)• Firefox 52+• Opera 42+

» Safari 10+

Web push notification support

Implements Push API

Two protocols

• Push API, which is the W3C standard for web push notifications

» Safari Push Notifications, which is an Apple-exclusive technology

Push API

Push API

Custom APIPush API

if (isNonSafari()) if ('serviceWorker' in navigator && 'PushManager' in

window)

navigator.serviceWorker.register('serviceWorker.js')

Notification.permission == ?

navigator.serviceWorker.register('serviceWorker.js') .then(function(swReg) {

console.log('Service Worker is registered');swRegistration = swReg;

});

// serviceWorker.js

// serviceWorker.js

self.addEventListener('push', function(event) {

console.log(`data: ${event.data.text()}`); });

// 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)

);});

swRegistration.pushManager .subscribe({ userVisibleOnly :true,

applicationServerKey :VAPID_PUBLIC_KEY })

swRegistration.pushManager .subscribe({ userVisibleOnly : true,

applicationServerKey : VAPID_PUBLIC_KEY } ).then(function(subscription) { updateSubscriptionOnServer(subscription);

});

PushService pushService = new PushService();

pushService.setSubject("mailto:[email protected]"); pushService.setPublicKey(VAPID_PUBLIC_KEY); pushService.setPrivateKey(VAPID_PRIVATE_KEY);

HttpResponse httpResponse = pushService.send(notification);

swRegistration.pushManager.getSubscription()

swRegistration.pushManager.getSubscription().then(function(subscription) {

subscription.unsubscribe(); });

Push API summary

ServiceWorker update()

unregister()

showNotification()

Push API summary

Notification

requestPermission()

permission

Push API summary

ServiceWorkerPush manager

update()

unregister()

subscribe()

getSubscription()

showNotification()

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

Safari web push notifications

Safari web push notifications

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

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

PushPackage.raw

icon.iconset/[email protected][email protected][email protected]

website.json

should be able to create a PushPackagePushPackage.zip


manifest.jsonsignaturewebsite.json

PushPackage.raw


website.json




PushPackage.raw


website.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" }

PushPackage.raw


website.json




PushPackage.raw


website.json




{ "website.json": "96838c4059…d7760fa404c728886b3a8",

"icon.iconset/icon_16x16.png": "8cbb85…e1c7986a63417e1", ...

}

PushPackage.raw


website.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);

PushPackage.raw


website.json




push notifications are supported?

if ('safari' in window && 'pushNotification' in window.safari) {

}

status of permission policy?


window.safari.pushNotification.permission('web.com.example');

}

ask user for permissions


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.

); }

send the device token





);

} else if (permissionData.permission === 'granted') { updateSubscriptionOnServer(permissionData.deviceToken);

}}

push notifications are supported?





);

} else if (permissionData.permission === 'granted') { updateSubscriptionOnServer(permissionData.deviceToken);

}}

lahiiru.github.io/browser-push

Complete guide is here

https://lahiiru.github.io/browser-push/

https://lahiiru.github.io/browser-push/

Software

web push notifications for your webapp