Notification 对象, 存在于 Windows 上, 可以生成一个通知对象以推送推送浏览器消息通知.
这玩意兼容性不咋地, 实不实用看场景. 对外用户的应用, 自然是鸡肋功能, 因为你无法知道用户使用的是哪家哪版本的浏览器; 对内部系统的帮助则是很大, 内部员工使用的浏览器是可控的, 为了实现更大的工作效率, 该功能可用于比如站内消息, 跟踪事务状态变化等的通知, 并且, 这玩意只要不关闭通知所在的网页, 即使浏览器活动标签不是这个网页, 依然可以弹出通知, 这样就可以在做其他工作的同时及时收到需要的消息了.
实现效果如图 (在 Windows 系统下, 是在桌面右下侧图标栏上方弹出):
对的, 就是这个. 但是你听我解释.. 我真的没有下过这个单...
进入正文.
Notification 是个构造函数, 它上面有三个静态成员: maxActions,permission,requestPermission.
1. maxActions, 这个属性值为 2, 表示支持的最大的 actions 数量 (actions 见下文).
2. permission, 这个属性有三个值:"granted","denied","default",default 和 denied 效果一样, 表示用户不允许该网站显示通知, granted 表示用户允许该网站显示通知.
3. requestPermission, 通过调用这个方法, 浏览器会弹出框来让用户确认是否允许消息通知, 该方法传入一个回调函数作为参数, 用户授权结果作为回调函数的参数给到开发者; 该方法返回一个 Promise.
代码如下:
- // 打开 Chrome 浏览器, 打开 www.baidu.com, 打开控制台, 然后...
- Notification.requestPermission(res =>{ console.log(res); });
- /*
- * 返回值
- * Promise {<pending>}
- * __proto__: Promise
- * [[PromiseStatus]]: "resolved"
- * [[PromiseValue]]: "granted"
- *
- * 输出值: granted 因为我点击了允许.
- */
- Notification.permission
- // 输出: "granted"
Notification 构造函数需要 2 个参数: title,options.
1. title 是消息的标题
2. options 消息的配置信息, 含有值:
2.1. body, 通知消息的内容, 只有 Windows 系统下 Firefox 可以显示多行数据, 其余环境下只显示单行.
2.2. icon, 通知的图标图片地址.
2.3. lang, 消息通知的语言, 值参考 ISO 2 letter language codes
2.4. dir, 文字排列方向, 三个值: auto,ltr,rtl. 只有 Windows 系统下 Firefox 浏览器支持...
2.5. image, 当没有足够的空间显示通知本身时, 用于表示通知的图像的 URL. 只有 Windows 系统下 Chrome 支持...
2.6. tag, 在构造函数的选项参数中指定的通知 ID(如果有的话), 暂未研究出怎么使用, 也没找到详细的使用文档...
2.7. data, 返回克隆后的消息格式, 暂未研究出怎么使用, 也没找到详细的使用文档...
2.8. actions, 用户操作行为的数组, 暂未研究出怎么使用, 也没找到详细的使用文档...
2.9. badge, 当没有足够的空间显示通知本身时, 用于表示通知的图像的 URL. 然而测试过支持的浏览器, 也没有一个对于这个属性做出反应...
2.10. vibrate, 指定具有振动功能的设备发出振动模式, 然而在 iPhone 手机上下载了几个浏览器, 都未成功弹出通知, 所以该值结果还是未知...
2.11. requireInteraction, 表示是否需要用户手动关闭通知, 默认 false, 然而即使设置为 true, 通知也有系统来控制, 并不会一直处于活动状态...
2.12. 还有几个还在试验阶段的配置...
综上所述, 通过浏览器测试后 (Firefox 含 Mac 和 Windows,Chrome 含 Mac 和 Windows,Safari), 通用的有效配置仅有 3 个: title,body,icon.
使用代码如下:
- function createNotify(title,options) {
- var PERMISSON_GRANTED = 'granted';
- var PERMISSON_DENIED = 'denied';
- var PERMISSON_DEFAULT = 'default';
- if (Notification.permission === PERMISSON_GRANTED) {
- notify(title,options);
- } else {
- Notification.requestPermission(function (res) {
- if (res === PERMISSON_GRANTED) {
- notify(title,options);
- }
- });
- }
- function notify($title,$options) {
- var notification = new Notification($title, $options);
- }
- }
- createNotify('测试通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'});
Notification 实例上有一些事件: onclick,onerror,onclose(文档表示是要删除的方法),onshow(文档表示是要删除的方法); 一个方法: close; 属性: timestamp 消息的时间戳.
代码如下:
- function createNotify(title,options) {
- var PERMISSON_GRANTED = 'granted';
- var PERMISSON_DENIED = 'denied';
- var PERMISSON_DEFAULT = 'default';
- if (Notification.permission === PERMISSON_GRANTED) {
- notify(title,options);
- } else {
- Notification.requestPermission(function (res) {
- if (res === PERMISSON_GRANTED) {
- notify(title,options);
- }
- });
- }
- function notify($title,$options) {
- var notification = new Notification($title, $options);
- console.log(notification);
- notification.onshow = function(event){ console.log('show :',event); }
- notification.onclose = function(event){ console.log('close :',event); }
- notification.onclick = function(event){
- console.log('click :',event);
- notification.close();
- }
- }
- }
- createNotify('测试通知',{body:'啊啊啊啊啊啊啊啊啊啊啊啊'});
- /* 依次打印
- * show: Event Object(事件对象), 事件的 type 为 "show"
- * click: Event Object(事件对象), 事件的 type 为 "click". 点击消息后消息被关闭, 跳到 close 事件.
- * close: Event Object(事件对象), 事件的 type 为 "close"
- */
最后, 它的兼容性是这样的...
最后, 本地测试这玩意需要起个服务来访问 (可以用 java 或者 Node.JS 随便起个简单的), 直接打开 html 是无效的, 估摸着是浏览器处理通知地址的时候所需依赖导致.
就这么多, 将就着用.
来源: https://www.cnblogs.com/ys-ys/p/10072877.html