Notification API Learning notes in JavaScript

The Notification API is the browser's notification interface, which is used to display notification information on the user's desktop, both for desktop computers and for mobile phones. The specific implementation form is deployed by the browser itself, for the mobile phone, the general display at the top of the notice bar.

If the Web page code calls this API, the browser asks the user if it is acceptable. The notification information is displayed only if the user agrees.

Check if the browser supports the Notification API:

if (window. Notification) {
Support
} else {
does not support
}
Two. Application for notification's authority:

The Notification.requestpermission () method is used to let the user make a choice as to whether to receive notification. Its argument is a callback function that can receive the user authorization status as a parameter.

if (window. Notification && notification.permission!== "denied") {
Notification.requestpermission (function (status) {
Perform notification operations
});
} else {
does not support
}
Three. Notification's permission status:

The Notification.permission property, which is used to read the permissions given by the user, is a read-only property and has three states. As follows:

Default: The user has not made any license, so no pop-up notifications.
Granted: The user expressly agrees to receive notification.
Denied: User explicitly refuses to receive notification.
Four. Notification constructor

Notification object is used as a constructor to generate a notification.

var notification = new Notification (title, options);
Parameter description:

Title: "Required" To specify the caption of the notification, string type;
Options: "Optional" Configure various settings, type Object.
The properties of the options parameter object are as follows:

Dir: Text direction, the possible values are auto, ltr (left to right), and RTL (Right-to-left), typically inheriting browser settings;
Lang: Use of the language, such as en-us, ZH-CN;
Body: Notification content, formatted as a string, used to further explain the purpose of the notice;
Tag: The ID of the notification, formatted as a string. A group of the same tag notice, will not be displayed at the same time, only after the user closes the previous notice, in the original location display;
Icon: The URL of the chart to display on the notification.
These properties of the options parameter object are both read and write.

Example:

if (window. Notification && notification.permission!== "denied") {
Notification.requestpermission (function (status) {
var n = new Notification (' notification title ', {body: ' Here is the notification content! ' });
});
}
Five. Event of instance Object

Show: triggered when notification is displayed to the user.
Click: triggers when the user clicks on the notification.
Close: Triggered when a user closes a notification.
Error: triggered when a notification error occurs (most occur when the notification is not displayed correctly).
It cannot be judged from the close event of the notification whether it is manually closed by the user.

Example:

callback when a notification is displayed

Notification.onshow = function () {
Console.log (' Notification shown ');
};
The Close method of the notification instance is used to turn off notifications

var notification = new Notification ("hi!");

Notification.close (); Manual shutdown

Auto shutdown
Notification.onshow = function () {
settimeout (notification.close.bind (notification), 5000);
}