Full course on Push Notifications from Denis Beketsky, Full stack developer at Binary Studio

1. Push Notifications
Make Web applications great again

2. Notifications

3. Push Notification flow

4. Cloud Services

5. Push Notification. What’s required?

6. Safary Support

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
});

10. Installation flow

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) {});

17. Notification receive
badge
Icon
Title
Description
Action Icon

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