Notifications

image.png
这里的通知都很类似 alert()对话框： 都使用 JavaScript API 触发页面外部的浏览器行为，而且都允许页面处理用户与对话框或通知弹层的交 互。

不过，通知提供更灵活的自定义能力。

通知权限

Notifications API 有被滥用的可能，因此默认会开启两项安全措施：
1、通知只能在运行在安全上下文的代码中被触发；
2、通知必须按照每个源的原则明确得到用户允许。

除非用户没有明确给出允许或拒绝的答 复，否则这个权限请求对每个域只会出现一次。

浏览器会记住用户的选择，如果被拒绝则无法重来。

询问用户是否可以通知

页面可以使用全局对象 Notification 向用户请求通知权限。

这个对象有一个 requestPemission() 方法，该方法返回一个期约，用户在授权对话框上执行操作后这个期约会解决。

这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

  1. Notification.requestPermission() 
  2.  .then((permission) => { 
  3.    console.log('User responded to permission request:', permission); 
  4.  });

“granted”值意味着用户明确授权了显示通知的权限。

除此之外的其他值意味着显示通知会静默失 败。

如果用户拒绝授权，这个值就是”denied”。

一旦拒绝，就无法通过编程方式挽回，因为不可能再 触发授权提示。

创建通知

Notification 构造函数用于创建和显示通知。

最简单的通知形式是只显示一个标题，这个标题内 容可以作为第一个参数传给 Notification 构造函数。

  1. // 最简单，只修改标题
  2. new Notification('标题文本!');
  4. new Notification('标题文本!', {
  5.  body: '内容文本!', 
  6.  image: 'path/to/image.png', 
  7.  vibrate: true // 震动
  8. });

关闭通知 close()

  1. const n = new Notification('I will close in 1000ms'); 
  2. setTimeout(() => n.close(), 1000);

通知生命周期回调

  1. const n = new Notification('foo'); 
  2. n.onshow = () => console.log('Notification was shown!'); 
  3. n.onclick = () => console.log('Notification was clicked!'); 
  4. n.onclose = () => console.log('Notification was closed!'); 
  5. n.onerror = () => console.log('Notification experienced an error!');