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)相关推荐
- 服务开通语音通知功能怎样实现?
语音通知作为一种强提醒的信息通知方式,非常适合使用在服务开通通知场景中,可以有效避免用户错过重要信息.那服务开通语音通知怎么实现?这里互亿无线小编为大家做个详细介绍: 一.如何发送服务开通语音通知信息 ...
- android 微信浮窗实现_Android实现类似qq微信消息悬浮窗通知功能
实现方法:(需要开启悬浮窗通知权限.允许应用在其他应用上显示) 一.利用headsup 悬挂式Notification,他是5.0中新增的,也就是API中的Headsup的Notification,可 ...
- openfire消息通知推送_APP消息推送功能之前端后台设计
APP消息推送功能之前端后台设计 最近有不少小伙伴问APP消息推送功能,前端.后台如何设计的?消息系统的架构是什么样的?最近刚好做到后台消息推送这块,简单谈谈个人心得,欢迎拍砖. 消息推送是让自己的用 ...
- html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快 我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
- 企业微信实现消息通知功能
一:获取消息通知所需参数:appid,secret,agentid 登录企业微信:https://work.weixin.qq.com/ 企业微信消息通知文档:https://work.weixin. ...
- Laravel 论坛系统之消息通知功能
消息通知 这篇文章我们来开发消息通知功能,当话题有新回复时,我们将通知作者『你的话题有新回复,请查看』类似的信息. Laravel 的消息通知系统 Laravel 自带了一套极具扩展性的消息通知系统, ...
- 仿比心一对一直播软件源码开发,消息通知功能的实现
在仿比心一对一直播软件源码中,消息功能起着非常重要的作用,非实时性的社交都可以通过消息功能来实现,在即时消息模块有两个基本功能就是发送消息和接收消息.我们定义如下通信指令来实现这两个功能: Push ...
- Django使用Channels实现WebSocket消息通知功能
更多内容请点击 我的博客 查看,欢迎来访. Django Channels https://channels.readthedocs.io/en/latest/installation.html Ch ...
- android通过代码设置铃声_有打扰 漏消息?那是Android手机通知设置没弄好!
点击上方电脑爱好者关注我们 在Android系统手机的设置内容中,"通知"是最容易被我们忽略的选项.实际上,如果你每天休息时都会被各种推送提醒打扰,又或是经常错过微信.邮箱.闲鱼等 ...
最新文章
- 树莓派linux编译不了动态库,linux系统下的树莓派与Qt 5.12.3源码的交叉编译
- 什么是服务质量(QoS) ?—Vecloud微云
- 手动创建1个基于注解的springmvc项目
- 【HDU - 5977】Garden of Eden(树分治)
- 【C语言】在线OJ题 BC7-BC52-牛客网编程初学者入门训练
- postgresql设置postgres密码_django项目时配置postgresql数据库的方法
- 最大值、数据排序、九九乘法表、杨辉三角
- (转)金融“核武器”即将引爆整个行业
- 计算机原理考研题库,东北大学计算机组成原理题库(9)
- git生成key以及小乌龟git不需要密码
- python控制小爱同学_从企业微信机器人到小爱同学,用 Serverless 实现生活智能化!...
- Ubuntu好用的截图工具
- 有关Excel表格公式的方式进行前边数字排序,后边内容不变的方法。
- c语言开发ios应用程序,马上着手开发iOS应用程序:三、应用开发基础
- 面经 | 腾讯/阿里/京东/头条/旷视等20+企业计算机视觉算法岗面经吐血整理
- 程序员必读书单1.0
- 我的世界服务器背景音乐修改,我的世界修改音乐方法
- earth power oracle,平行世界 | 他「抛弃」绘画从事摄影,将绘画与摄影结合在一起,创造了电影般的震撼场景,邀请我们与他一起穿越黑暗世界的旅程...
- CSS的作用与各种样式
- 基于WTK6900H语音识别芯片在智能语音识别晾衣架的应用设计方案介绍