The use of HTML5 message notification (Web Notification)

I have written a lot of articles about HTML5, but I always feel that I have to go through the relevant high-level APIs. Only by understanding the system and thinking about problems from a higher level can we get twice the result with half the effort.

Let’s try the simplest example first. Open the chrome developer tools, paste the code in and run it directly:

 new Notification('Jartto/'s message notification', { dir: 'rtl', body: 'This is a message, sent through Web Notification, as a test!', icon: 'https://raw.githubusercontent.com/ chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

No message notification appears, what's going on? Don't worry, keep reading.

According to the above example, we ran it, but did not successfully activate the message push box. At this time, you need to check whether the user is authorized. Enter in the console: > Notification.permission

Soon we will find that the original user permission is default . Because the user's choice is not known, the browser's behavior is the same as denied , which is denial.

When seeing these high-level API of HTML5 , there are always some concerns. Although the example is good and easy to use, how compatibility is is a question worth thinking about.

As you can see, basically all browsers support it, except iOS Safari and Opera Mini , so mobile applications need to be cautious.

4. API documentation

Let's first sort out the API systematically. It's very simple. Just spend 5 minutes on it.

Use case:

 let notification = new Notification(title, options)

parameter:

title: the notification title that will definitely be displayed

options: An object that is allowed to set notifications. It contains the following properties:

• dir: The direction of the text; its value can be auto (automatic), ltr (left to right), or rtl (right to left)
• lang: Specifies the language used in notifications. This string must be valid in the BCP 47 language tag document.
• body: additional string displayed in the notification
• tag: Give the notification an ID so that the notification can be refreshed, replaced or removed when necessary.
• icon: The URL of an image that will be used to display the notification icon.

property:

Notification.permission: A string indicating the authorization status of the current notification display. Possible values ​​include:

• denied (the user denied the display of the notification),
• granted (the user allowed the notification to be displayed),
• default (because the user's choice is not known, the browser behaves the same as when denied )

method:

• Notification.onclick: handles the click event, which is triggered every time the user clicks on the notification.
• Notification.onshow: handles the show event, which is triggered when the notification is displayed.
• Notification.onerror: Handles the error event, which is triggered whenever the notification encounters an error.
• Notification.onclose: handles the close event, which is triggered when the user closes the notification.
• Notification.requestPermission(): Used for the current page to apply to the user for permission to display notifications.
• Notification.close(): used to close notifications.

Notification.requestPermission This method can only be called by user behavior (for example: onclick event) and cannot be called by other methods.

According to the above API, let's write a complete example:

 function notifyMe(){ // First check whether the browser supports if (!(Notification in window)) { alert(This browser does not support desktop notification); } // Check whether the user agrees to receive notifications else if (Notification.permission = == granted) { // If it's okay let's create a notification var notification = new Notification(Hi there!); } // Otherwise we need to get permission from the user else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission){ // If the user agrees, you can send them a notification if (permission === granted) { var notification = new Notification(Hi there!); } }); } // Finally, If the execution reaches this point, it means that the user has refused to authorize the relevant notifications // Out of respect, we should not disturb them anymore}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.