preface

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.

var notification = new Notification(title, options)Copy the code

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: 'There are three new posts in your moments, check them out.'.tag: 'linxin'.icon: 'http://blog.gdfengshuo.com/images/avatar.jpg'.requireInteraction: true
})Copy the code

The notification message looks like this:

image

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://blog.gdfengshuo.com'
    }
})
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 a better fit is a news website. 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.

More articles:Github.com/lin-xin/blo…

I heard that writing articles can get the book of asynchronous community, asynchronous community as the top IT professional book community in China, I really want its book, so I try my best to write this article, I want this book “High-performance Responsive Web Development Practice”.