Academy PRO: Push notifications. Denis Beketsky
Download as PPTX, PDF•0 likes•143 views
Push notifications allow web applications to send messages to users even when the app is not active. The document discusses the service worker API which is required to implement push notifications and receive messages asynchronously. It also covers how to use Firebase Cloud Messaging to send push notifications from a server to specific devices, topics, or multiple targets at once.
![MessageEvent From SW
window.navigator.serviceWorker.onmessage = function (event) {};
self.clients
.matchAll({includeUncontrolled: true, type: 'window'})
.then(function(clientList) {
return clientList[0].focus().then(function (windowClient) {
var params = {
action: 'someAction',
data: 'someData'
};
windowClient.postMessage(params);
});
})](https://image.slidesharecdn.com/pushnotifications-170620104953/85/Academy-PRO-Push-notifications-Denis-Beketsky-11-320.jpg)
![Cache
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/gallery/bountyHunters.jpg',
'/gallery/myLittleVader.jpg',
'/gallery/snowTroopers.jpg'
]);
})
);
});](https://image.slidesharecdn.com/pushnotifications-170620104953/85/Academy-PRO-Push-notifications-Denis-Beketsky-13-320.jpg)
![Notification
registration.showNotification('Notification Sample', {
body: 'Buzz!nBuzz!',
icon: '/icon.png',
badge: '/badge.png',
actions: [{action: 'action', title: 'Title', icon: '/icon.png'}],
vibrate: [200, 100, 200],
tag: 'some-id',
data: {}
});
self.addEventListener('notificationclick', function (event) {});](https://image.slidesharecdn.com/pushnotifications-170620104953/85/Academy-PRO-Push-notifications-Denis-Beketsky-16-320.jpg)
![Send Push to multiple devices
https://fcm.googleapis.com/fcm/send
Content-Type:application/json
Authorization:key=...
{
"registration_ids" : ["registrationToken1","registrationToken2"...],
"notification" : {
"body" : "great match!",
"title" : "Portugal vs. Denmark"](https://image.slidesharecdn.com/pushnotifications-170620104953/85/Academy-PRO-Push-notifications-Denis-Beketsky-21-320.jpg)
Academy PRO: Push notifications. Denis Beketsky
- 1. Push Notifications Make Web applications great again
- 5. Push Notification. What’s required?
- 7. Service Worker Why I need this?
- 8. What Service Worker can ● Push Manager ● Notification ● Cache API ● Proxy ● Background Sync ● Periodic Background Sync (under development) ● Message API ● Tabs Management
- 9. Register Service Worker window.navigator.serviceWorker .register('/sw.js’ {scope: 'some-scope'}) .then(function (registration) { //do some stuff });
- 11. MessageEvent From SW window.navigator.serviceWorker.onmessage = function (event) {}; self.clients .matchAll({includeUncontrolled: true, type: 'window'}) .then(function(clientList) { return clientList[0].focus().then(function (windowClient) { var params = { action: 'someAction', data: 'someData' }; windowClient.postMessage(params); }); })
- 12. MessageEvent To SW self.addEventListener('message', function(event) {}) registration.active.postMessage({someKey: ‘someValue’});
- 13. Cache self.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/gallery/bountyHunters.jpg', '/gallery/myLittleVader.jpg', '/gallery/snowTroopers.jpg' ]); }) ); });
- 14. Cache with Proxy self.addEventListener('fetch', function(event) { event.respondWith(caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(response) { var response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/gallery/myLittleVader.jpg'); })); });
- 15. Background Sync registration.sync.register('someTag'); self.addEventListener('sync', function (event) { if (event.tag === 'someTag') { event.waitUntil(doSomeStuff()); } });
- 16. Notification registration.showNotification('Notification Sample', { body: 'Buzz!nBuzz!', icon: '/icon.png', badge: '/badge.png', actions: [{action: 'action', title: 'Title', icon: '/icon.png'}], vibrate: [200, 100, 200], tag: 'some-id', data: {} }); self.addEventListener('notificationclick', function (event) {});
- 18. Firebase Cloud Messages How to use it?
- 19. Push Notification Messages Message Priority: ● high ● low ● 1-10 (APNs) Message Type ● Notification ● Data ● Mixed
- 20. Send Push to specific device https://fcm.googleapis.com/fcm/send Content-Type:application/json Authorization:key=... { "to" : "registrationToken", "notification" : { "body" : "great match!", "title" : "Portugal vs. Denmark"
- 21. Send Push to multiple devices https://fcm.googleapis.com/fcm/send Content-Type:application/json Authorization:key=... { "registration_ids" : ["registrationToken1","registrationToken2"...], "notification" : { "body" : "great match!", "title" : "Portugal vs. Denmark"
- 22. Subscribe to Topic https://iid.googleapis.com/iid/v1/{registrationToken}/rel/topics/{topicName} Content-Type:application/json Content-Length: 0 Authorization:key=...
- 23. Send Push to Topic https://fcm.googleapis.com/fcm/send Content-Type:application/json Authorization:key=... { "to": "/topics/foo-bar", "notification" : { "body" : "great match!", "title" : "Portugal vs. Denmark"
- 24. Send Push to Multiple Topics https://fcm.googleapis.com/fcm/send Content-Type:application/json Authorization:key=... { "condition": "'dogs' in topics || 'cats' in topics", "notification" : { "body" : "great match!", "title" : "Portugal vs. Denmark"
- 25. Recommendations
- 26. Let’s Push it! or at least try