Sending Push Notifications : Progressive Web Apps
Last Updated :
15 May, 2019
We need permissions to send push notifications.
Key Points :
- Notifications must be timely.
- Should be precise (contains all the information a user needs).
- Should be relevant to the user.
Basic Example : An airline app must send push notifications such as “Your flight will be boarding from…”
Browser that supports push notifications are :
- Chrome 44
- Firefox 44
- Opera 42
Types of Notifications :
- Persistent Notifications: It is associated with the Service Worker.
self.registration.showNotification( 'Title' , {
actions : [ {
action : 'View' ,
title : 'Action title' ,
icon : 'Path' }],
|
To Interact with them, there is different API :
self.addEventListener( 'notificationclick' , evt=>{
if (!evt.action)
{
Console.log( 'Notification Clicked' );
return ;
}
});
|
View :
self.addEventListener( 'notificationclick' , evt=>{
switch (evt.action) {
case 'view' : Console.log( 'View action clicked' );
break ;
default : Console.warn( '${evt.action}action clicked' );
break ;
}});
|
- Non-Persistent Notifications: It is not associated with the Service Worker. As a developer, we interact with this through the notification API.
Notification Static Member :
if (Notification.permission === 'granted' )
{
showNotification();
return ;
}
if (Notification.permission !== 'denied' )
{
Notification.request Permission().then (p=> {
if (p === 'granted' )
showNotification();
});
}
|
How to show Notification :
var n = new Notification( 'Title' ,
{
body : 'body text' ,
badge : 'path' ,
icon : 'path' ,
tag : 'tag name' ,
renotify : false ,
data : {
);
|
Different other Properties can also be written in the following format :
Action Related Properties –
var n = new Notification( 'Title' ,
{
requiredInteraction : false , close
actions : [ {
action : 'Id' ,
title : 'Action title' ,
icon : 'Path'
}],
});
|
Sound Properties –
silent : false ,
sound : 'path' ,
vibrate : [200 100 200],
|
Miscellaneous Properties –
dir : 'ltr' ,
lang : 'en-US' ,
timestamp : Date.now()
|
Notification Instance Member :
var n = new Notification(‘Title’, {//options });
- n.addEventListener(‘error’, evt=>{ Console.error(‘There was a problem’, evt);});
- n.addEventListener(‘click’, evt=>{ Console.log(‘Notification clicked’);});
n.close();
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...