Implementation of desktop notification Notification in Html5

Preface: For a front-end developer, I always pay attention to some novel functions when browsing the web. For me, who always uses Teambition at work, I always receive Notifications... So today I will study this H5 function...

 let n = new Notification( This is a notification message, //This is the required Title and the notification title that will be displayed { icon: xxx.png, // This icon is used to display the left image in the notification body: Hello , I am xxx, // The content characters in the notification dir: auto, // The direction value of the text includes: auto (automatic), ltr (left to right), rtl (right to left) tag: gxlself // Give with an ID for this notification message, Used to refresh, remove, replace and other operations on this notification message // long: en-US //The lang field needs to refer to https://tools.ietf.org/html/bcp47. It is not necessary and has no effect. .. // ... // See instance properties below for other optional properties})

n.actions // A read-only array of NotificationAction objects. Each object describes a single action that the user can select in a notification.

n.image // URL of the image displayed as part of the notification

n.badge // The URL of the image used to represent the notification when there is not enough space to display the notification itself.

n.permission // There are three values: granted , denied , or default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝

n.renotify // Boolean value. Whether to replace the previous notification when a new one appears. If set to true, it means replacement, which means that only one notification of the current mark will appear. Notice the current markup here? That's right, for the true parameter to work, tag必须set the attribute value.

n.requireInteraction // Boolean value, refers to whether the notification remains active until the user clicks or cancels the notification instead of automatically closing..

n.silent // Boolean value. Whether there should be a sound when notification appears. The default false , which means silent.

n.timestamp //The time when the notification is created or can be used.

n.data // Any type of data associated with the notification.

n.vibrate // When the notification is displayed, the vibration mode required by the device vibration hardware. The so-called vibration mode refers to an array describing the alternation time, which represents the number of milliseconds of vibration and non-vibration respectively, and continues to alternate. For example, [200, 100, 200] means that the device vibrates for 200 milliseconds, then stops for 100 milliseconds, and then vibrates for 200 milliseconds. (mobile version)

n.sound // String. Audio address. Indicates the notification of the presence of a sound resource to be played.

n.sticky // Notification adsorption is not easy to clear... (mobile version)

n.noscreen // Boolean value. Whether to stop displaying notification information on the screen. The default is false , which means the notification content should be displayed on the screen. (mobile version)

1> onclick user’s click event on notification information

2> onshow event triggered after the notification message is displayed

3> onerror is an event that will be triggered when an error is encountered.

4> Handling of onclose close event

It is worth noting that the requestPermission() method is only valid in the Notification object, not the instance object!!! This method is used to apply to the user for permission to display notifications, and can only be called actively by the user (it can be called in the page onload, and Apply to the user and send it later...)

The methods possessed by instance objects are:

(1). close() is used to close notification messages --> You can also add a delayed call to the onshow method to improve the user experience...

(2). addEventListener() listens for events (this general method)

(3). removeEventListener uninstalls listening events (general, same as above)

(4). dispatchEvent dispatch event (same as above)

Next, write a js test. If you are using Google Chrome, it is recommended to display notifications in the settings and add the local service address to allow notifications.

However, the http domain name is closed by default in Google Chrome and is not allowed to be changed. Check the Google Chrome console for a warning message --->

index.js:78 [Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Well, okay, adding an https certificate is really poisonous... Although adding this function to your homepage can only be a pleasure in Firefox...

(Tencent Cloud has a free one-year SSL certificate, you can install it yourself...)

 // index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructor(){ this. isNotificationSupported = Notification in window; } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ let permission = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return; } if (!this.isPermissionGranted()) { return; } var n = new Notification(gxlself sends greetings to you, { icon : 'gxlself.png', body : 'Welcome to visit, I am very grateful! Click to jump to my blog page~' }); n.onshow = function () { console.log('gxlself has sent notification information'); setTimeout(function() { n.close(); }, 5000); } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' gxlself message window closed') } } }

This is the display of the effect after the Firefox browser is executed:

Let’s take a look at the effect of running Google locally: (The domain name has been intercepted and turned off by default. It has been explained above and will not be repeated)

Google's effect is actually pretty good, well... it's just that https blocked me...

------- Desktop App -----------

When you want to use notifications in an open web application, make sure to add the desktop-notification permission to your manifest file. Notifications can be used at any permission level, hosted or higher.

 permissions: { desktop-notification:{} }

This Notification is more fun, and it is also an important part of sending messages in the future. Leave this record... I hope it will be helpful to everyone's study, and I also hope everyone will support VeVb Wulin Network.