requirements

Log into the system, regularly query the system added how many work order information, send a notice to the current login system.

implementation

Notification API: Allows web pages or applications to send notifications at the system level that are displayed outside the page; This allows the Web application to send information to the user even if the application is idle or in the background.

Notification properties and methods:

Permissions: Notification. Permission access permissions: Notification. RequestPermission ((status) = > {} the callback function) create inform: Let n = new Notification(title, options) click Notification: n.o.click () display Notification: n.o.show () Close Notification: n.o.close () error Notification: n.o.ror ()Copy the code

Setting Message Prompt

  • Dir: direction of text; Auto (automatic), LTR (left to right), RTL (right to left)
  • Lang: Specifies the language used in the notification. Must be valid in the BCP 47 Language Tag document
  • Body: Additional string to display 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

Add a notification (Note: Firefox and Safari automatically turn off notifications after a certain amount of time (about 4 seconds). This also happens at the operating system level.)

// Check whether the browser supports Notification if (! Window.notification) {console.log(' browsers don't support notifications '); } else {// Check whether the user has agreed to receive the notification // granted: granted If (notification. permission === 'granted') {var Notification = new Notification(' this is an automatic Notification '); } else if (Notification. Permission = = = 'default') {/ / access permissions Notification. RequestPermission (). Then (permission = > {the if (Permission === 'granted') {// display notification var notification = new notification (' this is an automatic notification message '); } else if (Permission === 'default') {console.warn(' user closes authorization '); } else {console.log(' user refuses to display notifications '); }}); } else {console.log(' user refuses to display notifications '); }}Copy the code

A new notification is added after 10 seconds, and the notification is automatically disabled after 11 seconds

Let timer = setInterval(() => { Window.notification) {console.log(' browsers don't support notifications '); } else {// Check whether the user has agreed to receive the notification // granted: granted If (notification. permission === 'granted') {var Notification = new Notification(' this is an automatic Notification '); notification.onshow = function () { setTimeout(notification.close.bind(notification), 11000); }} else if (Notification. Permission = = = 'default') {/ / access permissions Notification. RequestPermission (). Then (permission = > {the if (Permission === 'granted') {// display notification var notification = new notification (' this is an automatic notification message '); } else if (Permission === 'default') {console.warn(' user closes authorization '); } else {console.log(' user refuses to display notifications '); }}); } else {console.log(' user refuses to display notifications '); }}}, 10000).Copy the code

Duplicate notifications show the latest notifications (set a tag)

Let timer = setInterval(() => { Window.notification) {console.log(' browsers don't support notifications '); } else {// Check whether the user has agreed to receive the notification // granted: granted If (notification. permission === 'granted') {var Notification = new Notification(' this is an automatic Notification ', {tag: 'soManyNotification'}); } else if (Notification. Permission = = = 'default') {/ / access permissions Notification. RequestPermission (). Then (permission = > {the if (Permission === 'granted') {// display notification var notification = new notification (' this is an automatic notification ', {tag: 'soManyNotification'}); } else if (Permission === 'default') {console.warn(' user closes authorization '); } else {console.log(' user refuses to display notifications '); }}); } else {console.log(' user refuses to display notifications '); }}}, 1000).Copy the code

Summary (Reference documentation)

  • Using Web Notifications
  • If the MAC does not display notifications, go to System Preferences > Notifications > Allow Google Chrome