HTML5中的Web Notification桌面通知;基于Web Notification的前端桌面弹窗;H5的Notification特性;Web的桌面通知功能;H5 notification浏览器桌面通知;HTML5 桌面通知:Notification API;html5新功能Notification;Notification桌面通知;windows桌面通知;浏览器桌面通知;
随着web的发展,功能越来越完善,今天聊一下h5的一个新特性--Notification。Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来,这样即使应用程序空闲或在后台也可以向用户发送信息。
问题背景
最近工作中客户反馈浏览器最小化后,不能及时收到消息,导致不能及时处理工作。经过调研发现可以使用web桌面通知来实现。即使用户最小化浏览器后,也可以通过通知及时的进行提。
引出
传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面,仅仅依附于浏览器。
一个桌面通知生成的正常流程,我们先来看看一个桌面通知是如何生成的:
检查浏览器是否支持Notification 检查浏览器的通知权限(是否允许通知) 若权限不够则获取浏览器的通知权限 创建消息通知 展示消息通知
在调研过程中下,做了一个小demo,我用的是谷歌浏览器进行的测试。大致是这样子:
应用场景
Notifications的诞生简化了网站或者应用与用户之间的沟通成本(时间成本和开发成本),增强用户黏性(减少了用户离开应用的可能)。传统的通知方式,大多是通过站内信(消息),邮件,短信等方式,它们通常需要刷新(跳转)页面、离开应用打开其他应用或终端来查看消息;而桌面通知功能大大的简化了这个过程,消息的传递基本不消耗时间(如果不设置setTimeout,用时基本不会超过1s),并且用户不需要离开应用,这都带来了极大的方便。可以预见,Notifications将会在很多网页或应用中被大量使用。当然Notifications也具有它的局限性:无法存档、即看即毁。有点类似我们使用智能机的时候,即使在后台运行,也能收到消息通知。 那么,这个功能到底能用在哪些场景呢?只能说能应用的场景很多:
电子商务网站
教育类网站
社交类网站
资讯类网站
网页版邮件服务
即时通讯软件(邮件、聊天室)
体育赛事结果彩票/抽奖结果
新闻网站重大新闻通知
网站的重大更新,重大新闻等。
...
举个例子,当你打开网站页面,你可能会看到(使用新版浏览器)如下图的通知:
特性
介绍及用法
Notification 对象用来为用户设置和显示桌面通知,Web Notifications API 可以将通知发送至页面之外的系统层级上,因此,即便应用处于空闲状态或是在后台,web 应用仍然可以通过这个 API 向用户发送信息。比如访问博客时,每当用户收到一条新的消息,就会有一条通知显示给用户
var notification = new Notification(title, [options])
参数
Param Type Description
title string 显示的通知标题
[options] object 显示通知的配置项,可选
[options.dir] string 文字方向, 取值为 auto、ltr、rtl 之一
[options.lang] string 通知的语言,这个字符串必须在 BCP 47 language tag 文档中是有效的。
[options.body] string 通知的内容
[options.tag] string 通知的 id,通过此 id 可以对通知进行刷新、替换或移除
[options.icon] string 通知的图标图片URL,将被用于显示通知的图标。
通知权限 - Notification.permission
Notification.permission是一个静态方法,可以获取用户当前的通知权限状态,返回一个String,可以根据返回值判断用户是否授予了通知权限。返回值有三种情况:
default 用户还未被询问是否授权,所以通知不会被显示。
granted 表示之前已经询问过用户,并且用户已经授予了显示通知的权限。
denied 用户已经明确的拒绝了显示通知的权限。
当值为default或者denied时都不会显示通知消息,只有明确的被设置成granted才会显示通知消息
const permission = Notification.permission; if(permission === 'granted'){ console.log('已经授权通知,可以进行你的通知啦!'); }else if (Notification.permission === 'default') { console.log('用户还未选择同意/拒绝'); // 下一步请求用户授权 } else { console.log('用户曾经拒绝授权,不能显示通知'); }
请求权限 - Notification.requestPermission(CALLBACK)
应用发送通知之前必须要取得发送通知的权限,才能成功进行通知。Notification.requestPermission(CALLBACK)是请求获取权限的方法(有点类似javascript的confirm弹窗窗),允许传入一个回调,回调会返回用户选择的何种权限,返回两个值,granted代表允许,denied代表拒绝。并且Notification.requestPermission()支持then方式的链式调用,也就意味着可以异步调用它。
当Notification.permission为default的时候,我们需要使用Notification.requestPermission()来请求用户权限。
Notification.requestPermission()基于promise语法,then的回调函数参数是用户权限的状态Notification.permission的值。
//方式一,老版是回调函数机制 Notification.requestPermission(function (permission) { if (permission === 'granted') { console.log('用户同意授权'); // 随时可以显示通知 } else if (permission === 'default') { console.log('用户关闭授权,可以再次请求授权'); } else { console.log('用户拒绝授权,不能显示通知'); } }); //方式二,通过then回调,两种方式是等价的 Notification.requestPermission().then(function (permission) { if (permission === 'granted') { console.log('用户同意授权'); // 随时可以显示通知 } else if (permission === 'default') { console.log('用户关闭授权,可以再次请求授权'); } else { console.log('用户拒绝授权,不能显示通知'); } });
创建通知 - new Notification(TITLE, OPTIONS)
当Notification.permission为granted时,请求到用户权限之后,不必立即发送通知,可以在任意时刻,以任意形式来发送通知。new Notification(TITLE, OPTIONS)方法创建可以创建一个通知实例,允许参入参数两个参数TITLE和OPTIONS。注意默认情况下(实际可以通过OPTIONS中的timestamp参数控制)一旦通知实例被创建出来,它会立即被显示出来
var options = {}; // 传空配置 var title = '消息标题'; var notification = new Notification(title, options) // 显示通知
TITLE参数
TITLE
表示通知的标题。必须参数,允许数字、字符串和空
OPTIONS参数
OPTIONS
是非必须参数,必须为一个对象,它包含: ps: 部分参数在某些浏览器可能会不生效,建议使用最新版的谷歌浏览器。以下某些内容从Notification-MDN-EN结合谷歌翻译得来,很有可能翻译不准确,如有,请提出。
{ //通知显示正文。非必须,默认为空 body: '你的好友XX上线了!', //通知显示正文的图片地址。非必须,默认为空 image: 'imgae url', //通知左侧图标。非必须,默认为空 icon: 'imgae url', //通知的分类标记(ID)。非必须,默认为空 tag: 'test', //通知相关联的数据,通常用于方法的回调,传参。非必须,默认为空 data: '可以是任意数据类型', //通知显示延迟的时间。非必须,默认通知实例创建完成就显示 timestamp: '', //通知主体内容的水平展示顺序,有点类似direction属性。非必须,默认值是auto, 可以是ltr或rtl dir: 'auto', //当没有足够的空间来显示通知本身时,用于表示通知的图像的URL。非必须,默认为空 badge: 'xxx', //通知的语言。非必须默认为空 lang: '', //通知显示时,设备的振动模式。非必须,默认为空 vibrate: [200, 100, 200], //新通知出现是否覆盖旧的通知,覆盖(true)则永远只显示一条通知,不覆盖(false)则会多条通知重叠。非必须,默认为true renotify: true, //通知是否静音。非必须,默认为false,表示无声 silent: false, //通知声源文件地址。非必须,默认为空 sound: 'mp3', //是否不在屏幕上显示通知信息。非必须,默认为false表示要显示 noscreen: false, //指定通知是否应该粘滞性,即不容易被用户清理。非必须,默认false表示不具粘滞性 sticky: false, //指定通知是否保持活性,直到用户点击或关闭。非必须,默认为false requireInteraction: false }
这种情况显然,只能默认操作最后一个通知,除非你把每个通知返回的实例都保存下来。
注意:如果没有触发叠加,很可能是因为你两次通知的tag配置项是相同的(相同tag只能出现一个弹窗)。
注意: safari下不支持该选项,默认自动关闭
renotify:相同
默认值为false,chorme下相同tag的通知不替换,还是老的通知
设置为true, 两个相同tag的通知,新通知替换之前旧的通知。
注意:使用renotify,必须要同时设置tag选项,否则将会报错。
PS: safari下不支持该选项,默认两个相同tag的通知,新通知替换之前旧的通知。
事件及事件钩子
生成通知,会返回一个实例,如下:
var instanceNotification = new Notification(title, options)
instanceNotification就是当前通知的实例,在该实例上,我们可以查询该通知的配置,监听事件,调用实例方法。下文都以instanceNotification指代通知返回的实例。
当通知被创建成功后:
1.通知实例具有一个静态方法可以用来关闭通知
2.读取相关的配置
3.通知实例具有四个事件钩子,来跟踪通知当前的状态。
关闭通知
instanceNotification.close()
没有设置不自动关闭的话,chrome通知将会在4.5秒左右自动关闭通知,safari则是5秒钟(无法设置不自动关闭)。
notification没有定时控制通知多久后消失的功能,当出现多个通知,也无法统一关闭。
通知的配置
在通知实例上可以读取到设置通知时的所有配置,比如:
通知标题:instanceNotification. title、通知内容:instanceNotification. body、通知图标:instanceNotification. icon等。
注意: 这些属性都是只读的,不能删除,不能修改,不能遍历。
事件处理
通知实例具有四个事件钩子,来跟踪通知当前的状态。这些事件可以通过事件处理跟踪onshow、onclick、onclose和onerror。因为Notification同样继承自EventTarget,因此可以对它调用addEventListener()方法。我们可以使用通知的实例来监听通知的事件:
onclick: 用户点击通知时被触发
onshow: 通知显示的时候被触发
onerror: 通知遇到错误时被触发
onclose: 用户关闭通知时被触发
注意:最好是一发出通知就立即监听事件,否则有些事件可能一开始没被触发或永远不会触发。
例如:用定时器5秒后才监听通知的点击和显示事件,则永远不会触发通知显示的回调,点击事件在5秒后才可以正常起作用但会错误五秒之前用户的点击。
var instanceNotification = new Notification("您有一条订单消息,请及时处理!", { "icon": "", "body": "快点击处理吧!","requireInteraction":true }); instanceNotification.onshow = function () { console.log("显示通知"); //控制10s后再关闭 setTimeout(function () { n.close() }, 10000); }; instanceNotification.onclick = function () { alert("打开相关视图"); window.open("/note"); instanceNotification.close(); }; instanceNotification.onclose = function () { console.log("通知关闭"); }; instanceNotification.onerror = function () { console.log('错误'); };
完整示例demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5的Notification-Web的桌面通知功能</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type='text/javascript'></script> </head> <body> <div> <div> <button id="showNoti">点击通知</button> </div> </div> <script> var instanceNotification = Notification || window.Notification; console.log(instanceNotification); if (instanceNotification) { var permissionNow = instanceNotification.permission; if (permissionNow === 'granted') {//允许通知 creatNotification(); } else if (permissionNow === 'default') { setPermission(); } else if (permissionNow === 'denied') { console.log('用户拒绝了你!!!'); } else { setPermission(); } } function setPermission() { //请求获取通知权限 instanceNotification.requestPermission(function (PERMISSION) { if (PERMISSION === 'granted') { console.log('用户允许通知了!!!'); creatNotification(); } else { console.log('用户拒绝了你!!!'); } }); } function creatNotification() { if (!window.Notification) { alert("浏览器不支持通知!"); return false; } console.log(window.Notification.permission); if (window.Notification.permission != 'granted') { console.log('用户未开启通知权限!!!'); return false; } var instanceNotification = new Notification("您有一条订单消息,请及时处理!", { "icon": "", "body": "快点击处理吧!","requireInteraction":true }); instanceNotification.onshow = function () { console.log("显示通知"); //3s后自动关闭通知 setTimeout(function () { instanceNotification.close() }, 3*1000); }; instanceNotification.onclick = function () { alert("打开页面"); window.open("/note"); instanceNotification.close(); }; instanceNotification.onclose = function () { console.log("通知关闭"); }; instanceNotification.onerror = function () { console.log('错误'); }; } $(function () { $("#showNoti").click(function () { creatNotification(); }) }); //设置一个定时器,每隔5分钟进行一次通知 setInterval("creatNotification()",5*60*1000); </script> </body> </html>
遇到的问题
需要部署到服务器,且必须支持https
浏览器的设置
关闭请求权限
icon不显示问题
tag
safari下面不能显示icon
连续触发
这个表现,通知没有icon、标题、内容,就显得没有意义了,浏览器以这种形式,限制开发者不要频繁打扰用户。
浏览器兼容性问题
本文由 admin 创作,采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为:2022-05-04 19:59:06