浏览器桌面通知

用于显示桌面通知。可以用来提示用户网站信息已更新（当用户长时间未关闭网页时），也可以提醒用户某些内容如：某个电视剧更新了两级等等

• 本地直接打开（非 http/https 开头是无法看到效果的）
• 演示地址
• 源码

Notification

let notification = new Notification(title, options)

• title:标题
• options: 配置项（可选）

属性	作用
dir	文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or
lang	指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body	通知中额外显示的字符串
tag	赋予通知一个 ID，以便在必要的时候对通知进行刷新、替换或移除。
icon	一个图片的 URL，将被用于显示通知的图标。

兼容性

image
image

完整代码

 const options = {
      dir: "auto",
      body: "剑来更新了一章",
      requireInteraction: true,
      icon: "https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D452/sign=bdba7c9fb3a1cd111ab673258b13c8b0/aec379310a55b319aea21ada4aa98226cefc17c1.jpg"
    };
    notifyMe('剑来', options);

    function notifyMe(title, options) {
      // 先检查浏览器是否支持
      if (!window.Notification) {
        alert('浏览器不支持通知');
      } else {
        // 检查用户曾经是否同意接受通知
        if (Notification.permission === 'granted') {
          const notification = new Notification(title, options); // 显示通知
        } else if (Notification.permission === 'default') {
          // 用户还未选择，可以询问用户是否同意发送通知
          Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
              console.log('用户同意授权');
              const notification = new Notification(title, options); // 显示通知
            } else if (permission === 'default') {
              console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
            } else {
              // denied
              console.log('用户拒绝授权 不能显示通知');
            }
          });
        } else {
          // denied 用户拒绝
          console.log('用户曾经拒绝显示通知');
        }
      }
    }

效果

image