html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍。系统的了解,站在更高的高度去思考问题,这样才能事半功倍。
一、先睹为快
我们先来尝试一个最简单的例子,打开 chrome 开发者工具,粘贴代码进去直接运行:
new Notification('Jartto\'s 消息通知', {
dir: 'rtl',
body: '这是一个消息,通过 Web Notification 发送,作为测试!',
icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})
并没有出现什么消息通知,怎么回事?不要着急,接着往下看。
二、用户授权
按照上面的示例,我们运行了,但是并没有成功调起消息推送框。这时候需要查看一下是否用户授权,控制台输入: > Notification.permission
很快我们就会发现,原来用户许可是 default ,因为不知道用户的选择,所以浏览器的行为与 denied 时相同,即为拒绝。
三、兼容性
看到这些 HTML5 的高级 API ,总是会有一些顾虑。例子虽好,用起来也很方便,但是到底兼容性如何,这是一个值得思考的问题。
可以看到,基本上所有浏览器都支持了,除了 iOS Safari 和 Opera Mini ,所以移动端应用需谨慎。
四、API 文档
我们先来系统性的梳理一下 API,很简单,花 5 分钟过一下。
用例:
let notification = new Notification(title, options)
参数:
title:一定会被显示的通知标题
options:一个被允许用来设置通知的对象。它包含以下属性:
dir : 文字的方向;它的值可以是 auto (自动), ltr (从左到右), or rtl (从右到左)
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body: 通知中额外显示的字符串
tag: 赋予通知一个 ID ,以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的 URL ,将被用于显示通知的图标。
属性:
Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:
denied (用户拒绝了通知的显示),
granted (用户允许了通知的显示),
default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)
方法:
Notification.onclick:处理 click 事件的处理,每当用户点击通知时被触发。
Notification.onshow:处理 show 事件的处理,当通知显示的时候被触发。
Notification.onerror:处理 error 事件的处理,每当通知遇到错误时被触发。
Notification.onclose:处理 close 事件的处理,当用户关闭通知时被触发。
Notification.requestPermission():用于当前页面想用户申请显示通知的权限。
Notification.close():用于关闭通知。
Notification.requestPermission 这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
五、完整示例
按照上面 API ,我们来写一个完整的示例:
function notifyMe(){
// 先检查浏览器是否支持
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 检查用户是否同意接受通知
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// 否则我们需要向用户获取权限
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission){
// 如果用户同意,就可以向他们发送通知
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
// 出于尊重,我们不应该再打扰他们了
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html在线消息,HTML5之消息通知的使用(Web Notification)相关推荐
- html 消息通知功能,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快 我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
- html5的消息通知
这里介绍一个HTML5的notification demo: <!DOCTYPE html> <html><head><meta charset=" ...
- html怎么直接给服务器发消息,HTML5教程之服务器发送事件
HTML5 服务器发送事件(Server-Sent Events)允许网页获得来自服务器的更新. Sever-Sent事件 -单项消息传递 Sever-Sent事件指的是网页自动获取来自服务器的更新 ...
- WPF的消息机制(三)- WPF内部的5个窗口之处理激活和关闭的消息窗口以及系统资源通知窗口...
目录 WPF的消息机制(一)-让应用程序动起来 WPF的消息机制(二)-WPF内部的5个窗口 (1)隐藏消息窗口 (2)处理激活和关闭的消息窗口和系统资源通知窗口 (3)用于用户交互的可见窗口 (4) ...
- 七种常见分布式事务详解(2PC、3PC、TCC、Saga、本地事务表、MQ事务消息、最大努力通知)
分布式事务:在分布式系统中一次操作需要由多个服务协同完成,这种由不同的服务之间通过网络协同完成的事务称为分布式事务 一.2PC: 2PC,两阶段提交,将事务的提交过程分为资源准备和资源提交两个阶段,并 ...
- 在线聊天室的消息单聊的实现——springboot整合WebSocket(二)
一.声明 项目的搭建请大家移步到:在线聊天室的消息群聊的实现--springboot整合WebSocket(一) 单聊的实现是在群聊项目上进行延申改造的. 二.引入依赖 <dependency& ...
- Python 关于网站更新消息并发送邮箱通知
Python 关于网站更新消息并发送邮箱通知: 1.目的:笔者由于需要及时收到教育厅官网推送的消息,又由于笔者需要准备应考,所以特写一个脚本来检测网站最新的发布. 2.语言:python3 开发编译器 ...
- FreeRTOS记录(七、FreeRTOS信号量、事件标志组、邮箱和消息队列、任务通知的关系)
我们在前面单独介绍过FreeRTOS的任务通知和消息队列, 但是在FreeRTOS中任务间的通讯还有信号量,邮箱,事件组标志等可以使用 这篇文章就这些成员与消息队列和任务通知的关系进行说明分析 ..增 ...
- 分布式事务(三)、柔性事务之 TCC、Saga、本地消息表、事务消息、最大努力通知
目录 [前言] TCC Saga [通知型事务] 本地消息表 MQ事务消息 最大努力通知 总结 分布式事务: 分布式事务(一).CAP,BASE理论 分布式事务(二).刚性事务之 2PC.3PC [前 ...
最新文章
- python 图片 转 pdf
- 建立与ftp服务器的连接——完成版(java)
- Nature新研究:猪脑死亡4小时后,科学家成功恢复脑细胞功能
- Linux内核的各个组成部分,Linux 内核的组成部分
- shell脚本游戏之:剪刀石头布
- 如何阻止SAP CRM订单创建好之后,自动被置为传输状态这一行为
- VMware vCloud® Suite 5.5功能介绍
- java启动线程时 extends与implements的一个差异
- java php mysql数据库_PHP脚本和JAVA连接mysql数据库
- Win 2003安装过后的一些配置技巧
- matlab三维矩阵的运算符,【求助】多维矩阵求和运算!!
- 二阶系统阶跃响应实验_二阶系统阶跃响应实验报告
- 学NTFS格式磁盘解析及atapi磁盘读写
- 车载android播放器,KX万能播放器
- 墨水染色之广度优先搜索(C语言实现)
- AHU-727 美妙音乐 【DP】
- 常用软件分享及下载地址
- 互联网快讯:华虹虹芯基金正式发起成立;极米高性能投影产品获用户青睐;中国电信联手钉钉研发“天翼钉”
- linux 动画软件,免费开源的 2D 动画软件
- 人脸识别门禁方案汇总和应用分析,解析指标背后的含义
热门文章
- 病毒周报(100301至100307)
- 信息学奥赛一本通 1080:余数相同问题 | OpenJudge NOI 小学奥数/2.1 7647:余数相同问题
- 信息学奥赛一本通(2047:【例5.16】过滤空格)
- 信息学奥赛一本通(2033:【例4.19】阶乘之和)
- 顺子(51Nod-2510)
- 概率论 —— 数学期望
- 爬楼梯(信息学奥赛一本通-T1204)
- 信息学奥赛C++语言: 区间内的真素数
- 信息学奥赛C++语言:数一数
- 信息学奥赛一本通C++语言——1022: 整型与布尔型的转换