Notification API:

MDN description: Allows web control to display system notifications to end users – these are outside the top-level browsing context viewport, so they can be displayed even if the user has switched tabs or moved to a different application. The API is designed to be compatible with existing notification systems on different platforms.

The Notification API is a new desktop Notification feature in HTML5 that allows developers to send notifications to the desktop without the browser being closed and the user agreeing to the Notification

Win10 系统) :

A constructor

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

parameter

title

The notification title must be displayed

Options (optional)

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

  • Dir: text direction; Its value can be auto, 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: An additional string to be displayed in the notification
  • Tag: Gives the notification an ID so that it can be refreshed, replaced, or removed if necessary.
  • Icon: The URL of an image that will be used to display the notification icon.

compatibility

PC compatibility is good (with the exception of IE), and mobile is hardly supported, so the Notification API is generally not used on mobile

Notification Indicates the encapsulation of desktop Notification

export default class AppNotificationHandler {
  isNotificationSupported: boolean;
  isPermissionGranted: boolean = false;

  constructor{// Does the browser support Notification API const isNotificationSupported ='Notification' inwindow; this.isNotificationSupported = isNotificationSupported; // Whether the user agrees to accept the notificationif (isNotificationSupported) {
        this.isPermissionGranted = Notification.permission === 'granted'; }} async requestPermission(): Promise<void> {const {isNotificationSupported} = this;if(! isNotificationSupported) { throw ('Current browser does not support Notification API');
    }
    const permission = await Notification.requestPermission();
    if (permission  === 'granted') {
      this.isPermissionGranted = true; }; } openNotification(title: string, options: NotificationOptions): Notification { const {isNotificationSupported, isPermissionGranted} = this;if(! isNotificationSupported) { throw ('Current browser does not support Notification API');
    }
    if(! isPermissionGranted) { throw ('Current page notification not open');
    }
    return new Notification(title, options)
  }
}
Copy the code

Practical use

1. Generate an AppNotificationHandler instance

    const appNotificationHandler = new AppNotificationHandler();
Copy the code

Request the user to enable the system notification function

    appNotificationHandler.requestPermission();
Copy the code

3. Send a notification

    const notice = appNotificationHandler.openNotification('Test notifications', {
         body: 'It's an announcement. Go check it out.',
         tag: 'linxin',
         icon: 'https://www.wangjie818.wang/upload/ WeChat picture _20190619140215. The JPG',})Copy the code

4. The popover contains events

Notice.onshow = is called when the message box is displayedfunction() {  
            console.log('notification is shows up'); }; Notice.onclick = is called when the message box is clickedfunction() {  
            console.log('notification is click'); }; // The onError function notice.onError = is also executed when an instance of a Notification object is created without authorizationfunction() {  
            console.log('notification is an error'); }; // The onclose function is called when a message box is closed in notice.onclose =function() {  
            console.log('notification is closed');  
        };  
Copy the code

conclusion

The Notification API is quite convenient for sending desktop notifications and can be used in conjunction with the internal management system. If the external user traffic is large or not recommended to use, after all, Webscoket can achieve real-time notification within the web page, and can be customized at will.

Personal blog address, interested can take a look

PC

Mobile terminal