The Notification API is a new desktop Notification API for HTML5 that displays notifications to users. The notification is browser-independent and will be displayed at the top of the page even if the user does not stay on the current TAB or even minimizes the browser.

User permissions

If you want to display notification messages to users, you need to obtain user permissions. However, you need to obtain user permissions only once for the same domain name. Notification can only play a role under the permission of users, so as to avoid the abuse of Notification by advertisements on some websites or other effects on users. So how do you know if the user is allowed or not?

Permission This property is used to indicate the authorization status displayed in the current Notification. Possible values include:

  • Default: indicates that the user’s selection is not known.
  • Granted: granted by the user.
  • Denied: denied by the user.
if(Notification.permission === 'granted') {console.log('User allowed notification');
}else if(Notification.permission === 'denied') {console.log('User Reject notification');
}else{
    console.log('The user hasn't chosen yet, go apply for permission from the user.');
}
Copy the code

Request permission to

When the user has not chosen, we need to request permission from the user. The Notification object provides the requestPermission() method to requestPermission from the user’s current source to display notifications. The previous callback-based syntax has been deprecated (although it still works in today’s browsers), and the latest specification has updated this method to a promise-based syntax:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted') {console.log('User allowed notification');
    }else if(permission === 'denied') {console.log('User Reject notification'); }});Copy the code

Push notification

After obtaining user authorization, push notifications are available. The parameters are as follows:

  • Title: The title of the notification
  • Options: notification Settings (optional).
  • Body: The content of the notification.
  • Tag: Indicates the identification tag of the notification. If the tag is the same, only the same notification window will be opened.
  • Icon: THE URL of the icon to display in the notification.
  • Image: URL of the image to display in the notification.
  • Data: Data for the type of task you want to associate with the notification.
  • RequireInteraction: Notifications remain valid and do not close automatically. Default is false.

There are some other parameters that I don’t need to say because they don’t work or they don’t work.

var n = new Notification('Status Update Alert', {body: 'You have a new message. Go check it out.'.tag: 'linxin'.icon: '/images/avatar.jpg'.requireInteraction: true
})
Copy the code

The notification message looks like this:

Close to inform

As you can see from the above parameters, there is no parameter to configure the display duration. If I want it to close automatically after 3s, I can call close() to turn off the notification.

var n = new Notification('Status Update Alert', {body: 'There are three new posts in your moments, check them out.'
})
setTimeout(function() {
    n.close();
}, 3000);
Copy the code

The event

The onclick property of the Notification interface specifies an event listener to receive click events. Clicking on the notification window triggers an event, such as opening a web address that leads the user back to their site.

var n = new Notification('Status Update Alert', {body: 'There are three new posts in your moments, check them out.'.data: {
        url: 'http://localhost:8080/kefu'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // Open the url
    n.close();                              // And turn off notifications
}
Copy the code

Application scenarios

Say so much in front, in fact is to use. So where exactly can you use it?

Now, most of the message reminders on the website are to show the number of messages in the message center, and then send an email to tell the user that there is nothing wrong with this process. However, as a user like me, I always need to send an email to remind me of others’ likes and favorites. I always want to delete emails (obsessive-compulsive disorder). I feel quite annoyed and even turn off the email reminder.

Of course, I’m not talking about Notification here, because it doesn’t function like email at all.

I think it’s better for news sites, chat rooms. When users browse news, they can push real-time news to users. Tencent Sports, for example, uses the Notification API. Notification2017_v0118.js has been introduced in the page. It is interesting to see how others have used it.

As soon as you enter the page, you will get authorization, and you will be prompted to allow authorization by a floating box on your page. If so, push notifications will be sent to you. However, notifications are also turned off when it closes the TAB card because it listens for the page-beforeUnload event.

function addOnBeforeUnload(e) {
	FERD_NavNotice.notification.close();
}
if(window.attachEvent){
	window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
	window.addEventListener('beforeunload', addOnBeforeUnload, false);
}
Copy the code

Compatible with

When it comes to compatibility, it’s a big deal, and browsers will behave a little differently. Mobile is almost all down, PC is fortunately mostly supported, except IE. Before you use it, check whether your browser supports Notification.

Thank you for reading, if you are helpful, welcome to pay attention to “CRMEB” nuggets. Code cloud has our open source mall project, knowledge payment project, are based on PHP+ Vue +mysql development, study welcome to use, pay attention to us to keep in touch!