h5桌面提醒

最新推荐文章于 2022-12-30 17:11:04 发布

weixin_34146805

最新推荐文章于 2022-12-30 17:11:04 发布

阅读量152

点赞数

原文链接：https://juejin.im/post/5ac3324df265da2391484edd

版权

网页实时消息桌面提醒
可以用h5的Notification，类似于显示器右下角蹦出的QQ弹框
edge13版本以上支持，桌面端的火狐，safari，谷歌和欧朋浏览器都支持，但是移动端并不支持
先通过静态方法，语法：
1. 基于promise ： Notification.requestPermission().then(function(permission) { ... })
1. 也可以用回调函数： Notification.requestPermission(callback)
先是获取用户是否允许提醒，图片
通过 Notification.permission 的值判断用户是否允许，granted（允许）, denied（禁止）, 或default（不管）
再通过 new Notification(title, options) 生成一个实例

也可以加上声效，silent(bool)参数控制是否有加声效，sound(string)参数是音频地址
最后效果就是这样

以下几个常用的API

1. 利用构造函数来创建一个实例
var notification = new Notification(title, options)

title ：必填，被显示的通知标题
options ：可选，一个被允许用来设置通知的对象。它包含以下属性：
  dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
  body: 通知中额外显示的字符串
  tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
  icon: 一个图片的URL，将被用于显示通知的图标。

复制代码

转载于:https://juejin.im/post/5ac3324df265da2391484edd