search

imuncle / imuncle.github.io

大叔的个人小站
https://imuncle.github.io/
78 stars 17 forks source link

H5桌面通知/Web Notification #75

Open imuncle opened 4 years ago

imuncle commented 4 years ago

在使用浏览器插件登录微信的时候，发现一个有趣的现象：在浏览器最小化的情况下，桌面右下角依然可以实现消息弹窗提示

image

当时就眼睛一亮，觉得这个功能非常有趣也非常实用。经过进一步摸索我发现网页版微博也有这个功能。

这其实是使用了H5的新属性Web Notification，目前还只有Firefox和Chrome支持良好。

获取用户权限

像下图所示的这种其实就是在获取消息提示的权限。我记得之前有段时间，很多网站包括QQ空间，微博，简书等等都出现了这种弹窗，不过现在好像有的就没有了。

image （别想了，我就看看，买不起）

总之，想展示弹窗要先拿到用户的允许。获取权限使用方法Notification.requestPermission(callback)，这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

Notification.requestPermission(function (permission) {
    console.log('用户是否允许通知： ',permission === 'granted' ? '允许' : '拒绝');
});

Notification.permission是一个静态属性，可以获取用户当前的通知权限状态，返回一个String，可以根据返回值判断用户是否授予了通知权限。返回值有三种情况：

创建通知

new Notification(title, options)方法创建可以创建一个通知实例，允许参入参数两个参数title和options。一旦通知实例被创建出来，它会立即被显示出来。

title顾名思义，就是通知的标题，必须参数，允许数字、字符串和空。

options是非必须参数，必须为一个对象，它包含：

{
    //通知显示正文。非必须，默认为空
    body: '你的好友XX上线了！',

    //通知显示正文的图片地址。非必须，默认为空
    image: 'imgae url',

    //通知左侧图标。非必须，默认为空
    icon: 'imgae url',

    //通知的分类标记（ID）。非必须，默认为空
    tag: 'test',

    //通知相关联的数据，通常用于方法的回调，传参。非必须，默认为空
    data: '可以是任意数据类型',

    //通知显示延迟的时间。非必须，默认通知实例创建完成就显示
    timestamp: '',

    //通知主体内容的水平展示顺序，有点类似direction属性。非必须，默认值是auto, 可以是ltr或rtl
    dir: 'auto',

    //当没有足够的空间来显示通知本身时，用于表示通知的图像的URL。非必须，默认为空
    badge: 'xxx',

    //通知的语言。非必须默认为空
    lang: '',

    //通知显示时，设备的振动模式。非必须，默认为空
    vibrate: [200, 100, 200],

    //新通知出现是否覆盖旧的通知，覆盖（true）则永远只显示一条通知，不覆盖（false）则会多条通知重叠。非必须，默认为true
    renotify: true,

    //通知是否静音。非必须，默认为false，表示无声
    silent: false,

    //通知声源文件地址。非必须，默认为空
    sound: 'mp3',

    //是否不在屏幕上显示通知信息。非必须，默认为false表示要显示
    noscreen: false,

    //指定通知是否应该粘滞性，即不容易被用户清理。非必须，默认false表示不具粘滞性
    sticky: false,

    //指定通知是否保持活性，知道用户点击或关闭。非必须，默认为false
    requireInteraction: false
}

事件及事件回调函数

var notification = new Notification('你有一条新信息', {
    body: "你好，很高兴认识你",
    icon: "https://imuncle.github.io/images/avatar.jpg"
});

notification.onshow = function () {
    console.log('通知显示了！');
}

notification.onclick = function (e) {
    //可以直接通过实例的方式获取data内自定义的数据
    //也可以通过访问回调参数e来获取data的数据
    window.open(notification.data.url, '_blank');
    notification.close();
}

notification.onclose = function () {
    console.log('通知关闭');
}

notification.onerror = function (err) {
    console.log('出错了');
    throw err;
}

简单示例

function CreateNotify() {
    var notification = new Notification('你有一条新信息', {
        body: "你好，很高兴认识你",
        icon: "https://imuncle.github.io/images/avatar.jpg"
    });
    setTimeout(function() { notification.close(); }, 5000);
}

function notifyMe() {
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // 如果没问题，就创建通知
    CreateNotify();
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 如果用户同意，就可以向他们发送通知
      if (permission === "granted") {
        CreateNotify();
      }
    });
  }
  // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
  // 出于尊重，我们不应该再打扰他们了
}

参考