关于 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:一个被允许用来设置通知的对象。它包含以下属性:
属性:
Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:
denied
(用户拒绝了通知的显示),granted
(用户允许了通知的显示),default
(因为不知道用户的选择,所以浏览器的行为与 denied
时相同)方法:
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!"); } }); } // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权 // 出于尊重,我们不应该再打扰他们了 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...