HTML5 desktop notification api: Notification

When packaging the pure beauty picture station into an android app, you need to use the desktop notification Notification API. Now record this for backup.

Notification API is a desktop notification API added to HTML5 for displaying notification information to users. The notification is out of the browser, even if the user does not stay in the current tab, or even minimizes the browser, the notification information will also be displayed on top.

User rights

To display notification messages to users, you need to obtain user permissions, and the same domain name only needs to obtain permissions once. Notification can only work with the permission of the user, to avoid advertisements on some websites from abusing Notification or other influences on users. So how do you know if the user is allowed or not?

Notification.permission This property is used to indicate the authorization status displayed by the current notification. Possible values ​​include:

• default : Don't know the user's choice, the default.
• granted : Allowed by the user.
• denied : User denied.

1. if(Notification.permission === 'granted'){ 
2.     console.log( 'User allows notifications' ); 
3. }else if(Notification.permission === 'denied'){ 
4.     console.log( 'User refused notification' ); 
5. }else{ 
6.     console.log( 'The user hasn't chosen yet, go and apply for permission from the user' ); 
7. } 

request permission

When the user has not selected, we need to ask the user for permission. The Notification object provides the requestPermission() method to request permission from the user's current source to display notifications.

The previous callback-based syntax has been deprecated (of course it still works in modern browsers), and the latest specification has updated this method to a promise-based syntax:

1. Notification.requestPermission().then(function(permission) { 
2.     if(permission === 'granted'){ 
3.         console.log( 'User allows notifications' ); 
4.     }else if(permission === 'denied'){ 
5.         console.log( 'User refused notification' ); 
6.     } 
7. }); 

push notification

After obtaining user authorization, you can push notifications.

1. var notification = new Notification(title, options) 

The parameters are as follows:

title: the title of the notification

options: Settings options for the notification (optional).

• body: The content of the notification.
• tag: An identification tag representing the notification. Only the same notification window will be opened when the same tag is used.
• icon: The URL of the icon to display in the notification.
• image：要在通知中显示的图像的URL。
• data：想要和通知关联的任务类型的数据。

requireInteraction：通知保持有效不自动关闭，默认为false。

还有一些其他的参数，因为用不了或者没什么用这里就没必要说了。

1. var n = new Notification('状态更新提醒',{ 
2.     body: '你的朋友圈有3条新状态，快去查看吧', 
3.     tag: 'linxin', 
4.     icon: 'http://blog.gdfengshuo.com/images/avatar.jpg', 
5.     requireInteraction: true 
6. }) 

通知消息的效果图如下：

关闭通知

从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话，这时可以调用 close() 方法来关闭通知。

1. var n = new Notification('状态更新提醒',{ 
2.     body: '你的朋友圈有3条新状态，快去查看吧' 
3. }) 
4. setTimeout(function() { 
5.     n.close(); 
6. }, 3000); 

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件，比如打开一个网址，引导用户回到自己的网站去。

1. var n = new Notification('状态更新提醒',{ 
2.     body: '你的朋友圈有3条新状态，快去查看吧', 
3.     data: { 
4.         url: 'http://blog.gdfengshuo.com' 
5.     } 
6. }) 
7. n.onclick = function(){ 
8.     window.open(n.data.url, '_blank');      // 打开网址 
9.     n.close();                              // 并且关闭通知 
10. } 

应用场景

前面说那么多，其实就是为了用。那么到底哪些地方可以用到呢?

现在网站的消息提醒，大多数都是在消息中心显示个消息数量，然后发邮件告诉用户，这流程完全没有错。不过像我这种用户，觉得别人点个赞，收藏一下都要发个邮件提醒我，老是要去删邮件(强迫症)，我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification，毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时，可以推送给用户实时新闻。以腾讯体育为例，它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js，有兴趣可以看看别人是怎么成熟的使用的。

一进入页面，就获取授权，同时自己页面有个浮动框提示你允许授权。如果允许之后，就开始给你推送通知了。不过它在关闭标签卡的时候，通知也会被关闭，那是因为监听了页面 beforeunload 事件。

1. function addOnBeforeUnload(e) { 
2.     FERD_NavNotice.notification.close(); 
3. } 
4. if(window.attachEvent){ 
5.     window.attachEvent('onbeforeunload', addOnBeforeUnload); 
6. } else { 
7.     window.addEventListener('beforeunload', addOnBeforeUnload, false); 
8. } 

兼容

说到兼容，自然是倒下一大片，而且各浏览器的表现也会有点差异。移动端的几乎全倒，PC端的还好大多都能支持，除了IE。所以使用前，需要先检查一下浏览器是否支持 Notification。