快速实现显示浏览器通知




JavaScript Web Notification API允许电脑和手机浏览器通过自定义内容显示通知。
虽然支持过程不一致,但API现在与大多数现代浏览器兼容,在广泛的网站智能得以使用

开始
首先引用Push.js文件
<script src="http://cdn.52qdw.cn/push/push.min.js"></script>
请求许可 需要授权才可以发送通知,浏览器会提示用户是否接受该网站的通知。


当用户第一次浏览网页Push.js会自动请求许可,需要事先手动询问用户:
Push.Permission.request();

#创建通知
要显示一个通知,我们调用Push.create方法
Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // 通知超时关闭时间
    vibrate: [100, 100, 100],    
    onClick: function() {
        // 单击通知返回参数
        console.log(this);
    }  
});

#选项
  • body: 正文.
  • data: 传递到 ServiceWorker 通知数据
  • icon: 图标URL(16x16和32x32)
  • link: 如果希望点击通知跳转到 http://xxxx.cn/page,那么URL就是page
  • onClick: 回调单击通知时执行
  • onClose:回调通知关闭时执行
  • onError: 如果通知引发错误,则执行回调
  • onShow: 回显在通知显示(过时)时执行
  • requireInteraction: 设置为true时,通知不会关闭,除非手动关闭或点击
  • tag: 用于标识通知的唯一标签。可用于以后手动关闭通知
  • timeout: 在通知自动关闭之前的时间(以毫秒为单位)。
  • vibrate: 接收通知振动的移动设备的持续时间数组。
  • silent: 指定通知是否静音 。仅支持Chrome 43.0或更高版本
#兼容性
大多数的浏览器都支持Notification API。点击演示查看是否支持你的浏览器。
经测Chrome,Firefox和Safari以及Chrome for Android中可以正常显示通知。




*打赏支持:支付宝/微信,请熊猫喝瓶肥宅快乐水吧!

声明:本博客除特殊说明外,皆为原创内容,转载请注明来源!

强烈推荐:HK虚机自带CDN,宕机无缝切换   Vultr注册就有10$,可开4个月服务器

标签: 无

发表评论: