web push notifications for your webapp

Push notifications for your webapp!

Facebook desktop 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

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

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

navigator.serviceWorker.register('serviceWorker.js')
.then(function(swReg) {
console.log('Service Worker is registered');
swRegistration = swReg;
});

// 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:lahiiru@gmail.com");
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
ServiceWorker
Push manager
update()
unregister()
subscribe()
getSubscription()
showNotification()

Push API summary
ServiceWorker
Push 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

1. POST webServiceURL/version/pushPackages/websitePushID
2. POST webServiceURL/version/devices/deviceToken/registrations/websitePushID
3. DELETE webServiceURL/version/devices/deviceToken/registrations/websitePushID
4. POST webServiceURL/version/log
should support following REST calls

PushPackage.raw
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
website.json
should be able to create a PushPackage
PushPackage.zip
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
manifest.json
signature
website.json

PushPackage.raw
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
website.json
PushPackage.zip
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
manifest.json
signature
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
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
website.json
PushPackage.zip
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
manifest.json
signature
website.json
{
"website.json": "96838c4059…d7760fa404c728886b3a8",
"icon.iconset/icon_16x16.png": "8cbb85…e1c7986a63417e1",
...
}

PushPackage.raw
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
website.json
PushPackage.zip
icon.iconset/
icon_16x16.png
icon_16x16@2x.png
icon_32x32.png
icon_32x32@2x.png
icon_128x128.png
icon_128x128@2x.png
manifest.json
signature
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);

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 =
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 server
checkRemotePermission // 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

web push notifications for your webapp

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to web push notifications for your webapp (20)

Recently uploaded (20)

web push notifications for your webapp

Editor's Notes