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

This article mainly explains "how to realize html5 message notification". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement html5 message notification.

First, take a peek at it.

Let's try the simplest example, open the chrome developer tool, paste the code into it 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'})

There is no news notice. What's going on? Don't worry, read on.

II. User authorization

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

We will soon find that the original user license is default, because the browser does not know the user's choice, so the behavior of the browser is the same as when denied, that is, refusal.

III. Compatibility

There are always some concerns when you see these advanced API of HTML5. Although the example is good and easy to use, it is worth thinking about how compatible it is.

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

IV. API documents

Let's first systematically comb through the API, it's very simple, take 5 minutes to pass.

Use case:

Let notification = new Notification (title, options)

Parameters:

Title: the notification title that is sure to be displayed

Options: an object that is allowed to set notifications. It contains the following properties:

Dir: the direction of the text; its values can be auto (automatic), ltr (left to right), or rtl (right to left)

Lang: specifies the language used in the notification. This string must be valid in the BCP 47 language tag document.

Body: extra string displayed in the notification

Tag: assign an ID to notifications to refresh, replace, or remove notifications if necessary.

Icon: the URL of a picture that will be used to display the icon of the notification.

Attributes:

Notification.permission: a string that indicates that the current notification displays the authorization status. Possible values include:

Denied (the user rejected the display of the notification)

Granted (the user allows the display of notifications)

Default (because you don't know the user's choice, the browser behaves the same as when you denied)

Methods:

Notification.onclick: handles the handling of the click event, which is triggered whenever the user clicks on the notification.

Notification.onshow: handles the handling of show events, which is triggered when the notification is displayed.

Notification.onerror: handles the handling of error events, triggered whenever a notification encounters an error.

Notification.onclose: handles the handling of close events, which is triggered when the user closes the notification.

Notification.requestPermission (): for the current page to request permission to display notifications to the user.

Notification.close (): used to turn off notifications.

The Notification.requestPermission method can only be called by user behavior (such as the onclick event) and cannot be called in any other way.

5. Complete example

Following the API above, 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 accept notification else if (Notification.permission = = "granted") {/ / If it's okay let's create a notification var notification = new Notification ("Hi there!") } / / otherwise we need to obtain permission from the user else if (Notification.permission! = = 'denied') {Notification.requestPermission (function (permission) {/ / if the user agrees, we can send them a notification if (permission = = "granted") {var notification = new Notification ("Hi there!");}}) } / / finally, if the execution ends here, it means that the user has refused to authorize the relevant notification / / out of respect, we should not disturb them any more. At this point, I believe you have a deeper understanding of "how to implement html5 message notification". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.