html消息提示,html5消息推送

　　我写过很多关于HTML5的文章，总觉得把相关的高级API都过了一遍。系统的认识，站在更高的高度去思考问题，才能事半功倍。

　　一、先睹为快

　　我们先来试试最简单的例子，打开chrome开发者工具，把代码粘贴进去，直接运行：

　　NewNotification(贾托的消息通知，{dir: rtl ，body:这是一条消息，通过Web通知发送，作为测试！icon: https://raw . githubusercontent . com/chenfengyanyu/my-we b-accumulation/master/images/logo . JPEG })并且没有消息通知。发生了什么事？别急，继续往下看。

　　二、用户授权

　　按照上面的例子，我们运行了，但是没有成功调出消息推送框。这时，你需要检查用户是否被授权。控制台输入：Notification.permission

　　很快我们就会发现，原来的用户权限是默认的，因为我们不知道用户的选择，所以浏览器的行为和denied是一样的，就是拒绝。

　　三、兼容性

　　看到HTML5的这些高级API，总会有些顾虑。虽然例子很好，也很好用，但是兼容性如何是一个值得考虑的问题。

　　如你所见，基本上所有浏览器都支持，除了iOS Safari和Opera Mini，所以移动应用要谨慎。

　　四。API文档

　　我们先系统梳理一下API。很简单。花5分钟浏览一遍。

　　使用案例：

　　Let=新通知(标题，选项)参数：

　　标题：将显示的通知的标题。

　　选项：允许用于设置通知的对象。它包含以下属性：

　　Dir:文本的方向；其值可以是auto(自动)、ltr(从左到右)或rtl(从右到左)语言：指定通知中使用的语言。该字符串在BCP 47语言标签文档中必须有效。Body:通知中额外显示的字符串标签:给通知一个ID，以便在必要时可以刷新、替换或删除它。图标：将用于显示通知图标的图像的URL。属性：

　　Notification.permission:用于指示当前通知显示的授权状态的字符串。可能的值包括：

　　Denied(用户拒绝显示通知)、granted(用户允许显示通知)和default(由于用户的选择未知，浏览器的行为与denied相同)方法：

　　notification . onclick:click事件的处理，每当用户单击通知时就会触发该事件。Notification.onshow:显示通知时触发show事件的处理。Notification.onerror:错误事件的处理，每当通知遇到错误时就会触发该事件。Notification.onclose:对close事件的处理，当用户关闭通知时触发该事件。Notification.requestPermission():用于当前页面向用户请求显示通知的权限。Notification.close():用于关闭通知。方法Notification.requestPermission只能被用户行为(比如onclick事件)调用，不能被其他方式调用。

　　五、完整示例

　　根据上面的API，我们来写一个完整的例子：

　　函数notifyMe(){ //检查浏览器是否支持if(！(“窗口中的‘通知’”)){ alert(‘此浏览器不支持桌面通知’)；}//检查用户是否同意接受通知else if(notification . permission=== granted ){//如果可以，我们创建一个通知var notification=new notification( hi there！);}//否则需要获取权限else if (Notification.permission！==拒绝){ notification . request permission(function(permission){//如果用户同意，他们可以发送通知If(permission== granted ){ var notification=new notification( hit here！);} });}//最后，如果执行到这里，说明用户已经拒绝授权相关通知。//出于尊重，我们不应该再打扰他们了。}以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。