web Notification 显示通知

原文链接: web Notification 显示通知

上一篇: es6 Set 实现集合运算

下一篇: PWA Notification API来进行消息提醒 前后台通信

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

比较详细的说明和使用方法

Notification API来进行消息提醒

移动端需要网站支持https, 否则无法显示

目前只有chrome支持的比较好

属性和方法

属性节
静态属性节
这些属性仅在 Notification 对象上有效。

Notification.permission 只读
一个用于表明当前通知显示授权状态的字符串。可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).
实例属性节
这些属性仅在 Notification 的实例中有效。

Notification.title 只读  (moz only)
在构造方法中指定的 title 参数。
Notification.dir 只读
通知的文本显示方向。在构造方法的 options 中指定。
Notification.lang 只读
通知的语言。在构造方法的 options 中指定。
Notification.body 只读
通知的文本内容。在构造方法的 options 中指定。
Notification.tag 只读
通知的 ID。在构造方法的 options 中指定。
Notification.icon 只读
通知的图标图片的 URL 地址。在构造方法的 options 中指定。
事件处理
Notification.onclick
处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow
处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror
处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose
处理 close 事件的处理。当用户关闭通知时被触发。
方法节
静态方法节
这些方法仅在 Notification 对象中有效。

Notification.requestPermission()
用于当前页面向用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。
实例方法节
这些方法仅在 Notification 实例或其 prototype 中有效。

Notification.close()
用于关闭通知。
Notification 对象继承自 EventTarget 接口。

EventTarget.addEventListener()
Registers an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
Dispatches an event to this EventTarget.

属性名	释义
dir	默认值是 auto , 可以是 ltr 或 rtl ，有点类似 direction属性 。表示提示主体内容的水平书写顺序。
lang	提示的语言。没看出来有什么用。大家可以忽略之~
body	提示主体内容。字符串。会在标题的下面显示。比方说上面的“好啊！(害羞.gif)”。
tag	字符串。标记当前通知的标签。
icon	字符串。通知面板左侧那个图标地址。
data	任意类型和通知相关联的数据。
vibrate	通知显示时候，设备震动硬件需要的 振动模式 。所谓振动模式，指的是一个描述交替时间的数组，分别表示振动和不振动的毫秒数，一直交替下去。例如[200, 100, 200]表示设备振动200毫秒，然后停止100毫秒，再振动200毫秒。
renotify	布尔值。新通知出现的时候是否替换之前的。如果设为 true ，则表示替换，表示当前标记的通知只会出现一个。注意都这里“当前标记”没？没错， true 参数要想其作用，必须 tag 需要设置属性值。然后，通知就会像这样覆盖： 而不会是默认的叠高楼：
silent	布尔值。通知出现的时候，是否要有声音。默认 false , 表示无声。
sound	字符串。音频地址。表示通知出现要播放的声音资源。
noscreen	布尔值。是否不再屏幕上显示通知信息。默认 false , 表示要在屏幕上显示通知内容。
sticky	布尔值。是否通知具有粘性，这样用户不太容易清除通知。默认 false , 表示没有粘性。根据我自己的猜测，应该和 position 的 sticky 属性值类似。

简单使用,先获取授权,再显示通知

  Notification.requestPermission().then(
    (permission) => {
      if (permission === 'grand') {
        new Notification("hello")
      }
    }
  )

添加点击事件,打开页面

  // Notification实例会触发以下三种事件：
  // show：通知显示给用户时触发。
  // click：用户点击通知时触发。
  // close：用户关闭通知时触发。
  // error：通知出错时触发（通知无法正确显示时出现） 可以使用close 方法手动关闭
  Notification.requestPermission().then(
    (permission) => {
      console.log(permission)
      // alert(permission)
      let notification = new Notification("hello")
      notification.addEventListener('click', () => {
          console.log('click')
          let url = "http://www.baidu.com"
          // 新打开tab页面
          window.open(url, "_blank");
          //在同当前窗口中打开窗口, 即触发改函数的页面会跳转,可能会丢失用户已经输入的信息
          // window.location.href = url

          // 保留当前页面，打开一个非tab页面,会新建一个浏览器窗口
          // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
        }
      )
    }
  )

显示带有图片和振动的,手机上也可以看到并触发振动

navigator.serviceWorker.ready.then(registration => {
  registration.showNotification("card", {
    body: "are you ok?",
    icon: "/github_page/qq.png",
    badge: "/github_page/微信.png",
    tag: "hello world",
    actions: [],
    // 震动模式
    vibrate: [200, 100, 200, 100, 200, 100, 200,200, 100, 200, 100, 200, 100, 200]
  });
});