Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Notification API in html5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

User permissions

If you want to display a notification message to the user, you need to obtain user permissions, while the same domain name only needs to obtain permissions once. Only under the permission of the user, Notification can play a role to avoid the abuse of Notification or other advertising on some websites to affect users. So how do you know if the user is allowed or not?

Notification.permission this attribute is used to indicate the authorization status displayed in the current notification, and possible values include:

Default: do not know the user's choice, default.

Granted: user allows.

Denied: the user refuses.

If (Notification.permission = = 'granted') {console.log (' user allow notification');} else if (Notification.permission = = 'denied') {console.log (' user refusal notification');} else {console.log ('user has not selected yet, go to apply for permission from user');} request permission

When the user does not have a choice, we need to ask the user for permission. The Notification object provides the requestPermission () method to request permission from the user's current source to display notifications.

The previous callback-based syntax has been deprecated (of course, it is still available 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 allows notification');} else if (permission = 'denied') {console.log (' user refuses notification'); push notification

After obtaining the user authorization, you can push the notification.

Var notification = new Notification (title, options)

The parameters are as follows:

Title: the title of the notification

Options: setting options for notifications (optional).

Body: the content of the notification.

Tag: represents an identification tag for notifications. The same tag only opens the same notification window.

Icon: the URL of the icon to display in the notification.

Image: the URL of the image to be displayed in the notification.

Data: data for the type of task you want to associate with the notification.

RequireInteraction: the notification remains valid and does not close automatically. The default is false.

There are some other parameters, because it is not useful or useless, so there is no need to talk about it here.

Var n = new Notification ('status update reminder', {body: 'there are 3 new statuses in your moments, check it out', tag: 'linxin', icon:' http://blog.gdfengshuo.com/images/avatar.jpg', requireInteraction: true})

The effect of the notification message is as follows:

Turn off notification

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

Var n = new Notification ('status update reminder', {body: 'there are 3 new statuses in your moments, go and check them'}) setTimeout (function () {n.close ();}, 3000); event

The onclick property of the Notification interface specifies an event listener to receive click events. Events are triggered when the notification window is clicked, such as opening a URL to guide the user back to his or her website.

Var n = new Notification ('status update reminder', {body: 'your moments have 3 new statuses, check them quickly', data: {url: 'http://blog.gdfengshuo.com'}}) n.onclick = function () {window.open (n.data.url,' _ blank'); / / Open the URL n.close () / / and close the notification} application scenario

So much has been said before, in fact, it is just for use. So where on earth can I use it?

Now the message reminder on the website is 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 the process. However, users like me feel that I have to send an email to remind me that I always have to delete emails when they are liked and collected. I find it annoying that I even turn off email alerts.

Of course, this is not to say to use Notification, after all, it is completely different from the function of email.

I think the news website is more suitable. When users browse the news, they can push the news to the user in real time. Take Tencent Sports as an example, it uses Notification API. A notification2017_v0118.js has been introduced into the page, and if you are interested, you can see how others are mature to use it.

As soon as you enter the page, you will get authorization, and there is a floating box on your own page that prompts you to allow authorization. If you allow it, I will start to send you a push notice. However, when it closes the tag card, the notification is also turned off 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);} these are all the contents of the article "how to use Notification API in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.