【JS系列】03——浏览器通知

• npm插件

---

Notification API

概述

Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息，当用户没有停留在当前标签页，甚至最小化了浏览器，也会将通知信息置顶显示出来。

接口及相关参数

• Notification.permission——权限状态

  1. default: 不知道用户的选择，默认；
  2. granted： 用户允许；
  3. denied： 用户拒绝；

• Notification.requestPermission()——请求权限

  Notification.requestPermission().then(function(permission) {
      if(permission === 'granted'){
          // 用户允许
      }else if(permission === 'denied'){
          // 用户拒绝
      }
  });

• new Notification(title, options)——推送通知

  1. title：通知的标题；

  2. options：通知的设置选项（可选）；

     • body：通知的内容。
     • tag：代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
     • icon：要在通知中显示的图标的URL。
     • image：要在通知中显示的图像的URL。
     • data：想要和通知关联的任务类型的数据。
     • requireInteraction：通知保持有效不自动关闭，默认为false。

     if (Notification.permission === 'default' || Notification.permission === 'undefined') {
         Notification.requestPermission(function (permission) {
             if (permission === 'granted') { 
             var notification = new Notification("Notify From IM State!", {
                                             tag: location.href,
                                             lang: "zh-CN",
                                             body: messageStr,
                                             icon: [
                                                 "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjI5IDMuODZMMS44MiAxOGEyIDIgMCAwIDAgMS43MSAzaDE2Ljk0YTIgMiAwIDAgMCAxLjcxLTNMMTMuNzEgMy44NmEyIDIgMCAwIDAtMy40MiAweiIvPjxsaW5lIHgxPSIxMiIgeDI9IjEyIiB5MT0iOSIgeTI9IjEzIi8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIxNyIgeTI9IjE3Ii8+PC9zdmc+"].join(""),
                                 });
             }
         });
     
     }

Note

1. 目前Chrome 62版本以后非Https链接地址不允许获取通知权限；Firefox允许获取通知权限。
2. requireInteraction: 保持通知不自动关闭，默认值为false，通知会在三四秒之后自动关闭。在firefox中设置为true的情况下，通知依然会自动关闭，未解决。
https://stackoverflow.com/questions/46518180/desktop-notification-requireinteraction-true-not-working

参考链接：
https://www.chromestatus.com/feature/5759967025954816
https://juejin.im/post/59ed37f5f265da431e15eaac