html5 推送到桌面,Html5中的桌面通知Notification的实现
前言:对于一个前段开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下这个H5功能...
1. 实例一个Notification
let n = new Notification(
"这是一个通知消息", //这是必选Title 一定会显示的通知标题
{ icon: "xxx.png", // 这个icon是用来显示通知中的左边图片 body: "你好啊,我是xxx", // 通知中的内容字符
dir: auto, // 文字的方向 值包含: auto(自动), ltr(从左到右), rtl(从右向左)
tag: "gxlself" // 给与这个通知消息一个ID, 用来对这个通知消息进行 刷新.移除.替换 等操作
// long: "en-US" //lang字段 需要参考https://tools.ietf.org/html/bcp47 并不是必须 没看出啥作用...
// ... // 其余可选属性见下实例属性 }
)
访问对应的实例属性:
n.actions // 一个只读的NotificationAction对象数组。每一个对象描述用户可以在一个通知中选择的单个操作。
n.image // 通知的一部分显示的图像的URL
n.badge // 当没有足够的空间显示通知本身时,用于表示通知的图像的URL。
n.permission // 有三个值 granted, denied, 或default 当状态值为granted时可以发送通知消息 default默认用户没处理 denied 用户拒绝
n.renotify // 布尔值。新通知出现的时候是否替换之前的。如果设为true,则表示替换,表示当前标记的通知只会出现一个。注意这里的“当前标记”没?没错,true参数要想起作用,tag必须需要设置属性值。
n.requireInteraction // 布尔值, 指的是通知是否保持活动直到用户点击或取消通知 而不是自动关闭..
n.silent // 布尔值。通知出现的时候,是否要有声音。默认false, 表示无声。
n.timestamp //通知创建或者可以使用的时间。
n.data // 任意类型和通知相关联的数据。
n.vibrate // 通知显示时候,设备震动硬件需要的震动模式。所谓振动模式,指的是一个描述交替时间的数组,分别表示振动和不振动的毫秒数,一直交替下去。例如[200, 100, 200]表示设备振动200毫秒,然后停止100毫秒,再振动200毫秒。 (移动端)
n.sound // 字符串。音频地址。表示通知出现要播放的声音资源。
n.sticky // 通知吸附不容易被清除... (移动端)
n.noscreen // 布尔值。是否不再屏幕上显示通知信息。默认false, 表示要在屏幕上显示通知内容。(移动端)
此时实例 n 有四个事件处理:
1> onclick 用户对通知信息的点击事件
2> onshow 通知消息展示之后触发的事件
3> onerror 遇到错误会触发的事件
4> onclose close事件的处理
2. Notification对象会有什么属性/方法呢?利用控制台中的window对象输出点开查看就可以看到:
值得注意的是: requestPermission()方法仅在Notification对象有效,实例对象无效!!!这个方法是用来向用户申请显示通知的权限,只能被用户主动去调用(在页面onload中可以调用,可以向用户申请,之后再去发送...)
实例对象拥有的方法有:
(1). close() 用于关闭通知消息 --> 也可以在onshow方法加延迟调用,提高用户体验感...
(2). addEventListener() 监听事件(这个通用方法)
(3). removeEventListener 卸载监听事件(通用,同上)
(4). dispatchEvent 分派事件(同上)
接下来,写一个js测试, 如果使用的是谷歌浏览器,建议在设置中显示通知将本地服务地址加入允许通知
但是,http的域名在谷歌浏览器被默认关闭,还不允许更改,查看谷歌浏览器控制台有警告信息--->
index.js:78 [Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
嗯,好吧,让加https证书,真的是有毒...虽然在自己的主页中添加该功能也只能在火狐浏览器爽一爽....
(腾讯云有免费一年的ssl证书,可自己进行安装...)
// index.js
window.onload = function(){
let gxlself = new Gxlself()
gxlself.requestPermission()
setTimeout(()=>{
gxlself.showNotification()
},3000)
}
class Gxlself{
constructor(){
this.isNotificationSupported = "Notification" in window;
}
isPermissionGranted(){
return Notification.permission === 'granted';
}
requestPermission(){
if(!this.isNotificationSupported){
return;
}
Notification.requestPermission(status=>{
let permission = Notification.permission;
})
}
showNotification(){
if (!this.isNotificationSupported) {
return;
}
if (!this.isPermissionGranted()) {
return;
}
var n = new Notification("gxlself对您发来问候", {
icon : 'gxlself.png',
body : '欢迎来访,鄙人万分感激! 点击即可跳转至我的博客页面~'
});
n.onshow = function () {
console.log('gxlself已经发送通知信息');
setTimeout(function() {
n.close();
}, 5000);
}
n.onclick = function () {
location.href = 'http://gxlself.com/blog'
n.close()
}
n.onerror = function (err) {
console.log(err)
}
n.onclose = function () {
console.log('gxlself消息窗口关闭')
}
}
}
这是火狐浏览器执行后的效果展示:
再来看看谷歌本地跑的效果:(域名已经被默认拦截关闭,上面已经说明,不再重复)
谷歌的效果其实挺好看的,嗯...只是一个https把我给屏蔽了 哎...
------- 桌面版应用 -----------
当你要在开放 web 应用中使用通知时,请确保将 desktop-notification 权限添加到你的 manifest 文件中。通知可以被用于任何权限级别,hosted 或更高。
"permissions": {
"desktop-notification":{}
}
这个Notification比较好玩,也是未来发送消息的一个重要的一块,留此记录...希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5 推送到桌面,Html5中的桌面通知Notification的实现相关推荐
- 如何在推送后压缩git中的提交?
这给出了压缩多个提交的一个很好的解释: http://git-scm.com/book/en/Git-Branching-Rebasing 但它不适用于已被推送的提交. 如何在我的本地和远程回购中压缩 ...
- Git如何将本地分支推送到远程库中
需求 有一个项目,采用Git进行代码版本控制,如何将本地分支feature_A推送到远程分支feature_A,并建立关联关系. 具体实现 针对以上需求,需按以下情况分别处理: 情况一: 远程已有fe ...
- iOS极光推送和极光IM中的JCore冲突问题
问题:先集成JMessage,后集成JPush时发现,[JPUSHService registerForRemoteNotificationConfig:entity delegate:self]:报 ...
- 发送推送消息后手机接收不到通知
2019独角兽企业重金招聘Python工程师标准>>> EMUI OS(华为) 自启动管理:需要把应用加到[自启动管理]列表,否则杀进程或重新开机后进程不会开启,只能手动开启应用 后 ...
- 财路网每日原创推送:区块链中的“块”是什么?
** 区块链中的"块"是什么? ** 比特币是基于区块链的,这一点大家都知道.但是这个区块链是什么呢?更准确地说,区块链的各个组成部分是什么呢? 区块链是一个数据块.每个块可以看作 ...
- java定时器偶尔重复推送_在Java中创建重复的定时器提醒
使用timer.scheduleAtFixedRate()来安排它每两秒重复一次: Schedules the specified task for repeated fixed-rate execu ...
- HTML5数据推送SSE原理及应用开发
JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- 【FAQ】接入HMS Core推送服务过程中一些常见问题总结
HMS Core 推送服务(Push Kit)是华为提供的消息推送平台,建立了从云端到终端的消息推送通道.开发者通过集成推送服务,可以向客户端应用实时推送消息,构筑良好的用户关系,提升用户的感知度和活 ...
- 在ionic/cordova中使用极光推送插件(jpush)
Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容: Stpe3:创建极光 ...
最新文章
- MonkeyRunner实例及使用说明
- arch linux 下 安装搭建python机器学习环境
- 说好的100万美元奖金,雷军为何却给了200万?
- 在屏幕上将1234逐位打印出来1,2,3,4
- Visual Studio 选择相同变量高亮
- 将三个数按从大到小输出
- vue的介绍及基本使用(详细,好理解,示例代码)
- 稀疏编码: LASSO,近端梯度优化(PGD),迭代软阈值算法(ISTA),L-Lipschitz条件,软阈值
- python six库安装_Python 安装matplotlib,six,dateutil,pyparsing 完整过程
- 高并发架构系列:Redis并发竞争key的解决方案详解
- 鼠标不受控制一直向右移动的解决办法
- 苹果NFC功能以及Apple Pay的初探
- Zemax操作41--公差分析(一)
- oracle全库导入 imp,imp导入全数据库
- SSL 1203 书的复制
- SAP 金额等负号提前问题
- 手机应用游戏开发死机现场之一
- python 爬取财经新闻_如何用 100 行 Python 代码实现新闻爬虫?
- Java 基础 面试题
- Web —— 单页面和多页面模式
热门文章
- java实现123n_用Java编程 :输入一个正整数n,输出n!的值。 其中n!=1*2*3*…*n。 求高手指点...
- Python:colorlog的三个例子
- Python 通过all()判断列表(list)中所有元素是否都包含某个字符串(string)
- Python中 ‘==‘ 与‘is‘ 以及它们背后的故事
- python3中使用subprocess模块执行外部命令
- matlab交流电源并联,交流电路串联谐振和并联谐振的仿真分析
- mysql replication health is not ok_MySQL的高可用——MHA
- 计算机组成原理 位宽,数据总线宽度一般为存储单元位宽的整数倍 这怎么理解哦...
- 放置奇兵 新 粉石墨
- Docker如何正确开启 Hyper-V?