• html
  • 基础
  • 流程
🀢

步骤

检查支持

✂️
js
if (window.Notification) { window.location.hash += '浏览器支持通知
    API'; } else { window.location.hash += '浏览器不支持通知 API';
  }

检查权限

✂️
js
window.Notification.requestPermission();

requestPermission() 只在用户显式触发事件，如单击按钮、点击鼠标或按下右键。

✂️
js
if (window.Notification) {
  if (window.Notification.permission == 'granted') {
    // 获取权限
  } else if (window.Notification.permission == 'default') {
    window.Notification.requestPermission();
  }
} else {
  window.location.hash += '浏览器不支持通知 API';
}

Notification 对象的 permission 属性包括 3 个值：

  • default : 用户处理结果未知，因此浏览器将视为用户拒绝弹出通知
  • denied ： 用户拒绝弹出消息
  • granted ： 用户允许弹出消息
✂️
js
if (window.Notification) { if
    (window.Notification.permission == 'granted') { // 获取权限
  } else if (window.Notification.permission == 'default') {
  window.Notification.requestPermission(); // 申请权限 }
  var notification = new Notification(title, option); } else {
  window.location.hash += '浏览器不支持通知 API';
  }

创建消息

✂️
js
var notification = new Notification(title, option);

该构造函数包括两个参数：第一个为通知的标题；第二个参数为一个对象，用于指定通知可以使用的各个选项，该对象可使用属性及属性值如下：

  • dir : 设置通知中的文字反向，包括 ltr （从左到右）或 rtl （从右到左），默认值为 ltr
  • lang ： 设置通知的语言，属性值必须是有效的 BCP 47 语言标识
  • body ： 设置通知中所显示的内容
  • tag ： 通知的 ID 。即唯一的标识符，以区别于其他的通知，开发者通过 tag 标识符，获取、修改或删除该通知
  • icon ： 设置通知图标，为图片的 URL 地址
✂️
js
setTimeout(() => {
  Notification.requestPermission(function (status) {
    if ('granted' != status) return;
    var notification = new Notification('好消息', {
      dir: 'rtl',
      lang: 'zh-CN',
      icon: 'image/eessml.jpg',
      body: '本站站长终于会 HTML 5 通知了',
    });
  });
}, 2000);

监测和管理

Notification 对象提供 4 个事件类型，用于检测通知。

  • show ：当通知被显示
  • close ： 当通知被关闭
  • click ： 当通知被点击
  • error ： 当通知出错
✂️
js
setTimeout(() => {
  Notification.requestPermission(function (status) {
    if ('granted' != status) return;
    var notification = new Notification('好消息', {
      dir: 'rtl',
      lang: 'zh-CN',
      icon: 'image/eessml.jpg',
      body: '本站站长终于会 HTML 5 通知了',
    });
    notification.onshow = function () {
      location.hash = '来新的消息了';
    };
    notification.onclose = function () {
      location.hash = '信息被关闭啦';
      setTimeout(() => {
        location.hash = '';
      }, 500);
    };
    notification.onclick = function () {
      location.hash = '你点消息啦';
      setTimeout(() => {
        window.open('https://lmssee.cn/image/lmssee.jpg', '_blank');
      }, 500);
    };
    notification.onerror = function () {
      location.hash = '消息出错了，站长有的忙了';
    };
  });
}, 2000);