博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何让你的WEB项目有类似APP推送功能_已迁移
阅读量:5901 次
发布时间:2019-06-19

本文共 1646 字,大约阅读时间需要 5 分钟。

  hot3.png

直接上个例子  

function showNotice() {       Notification.requestPermission(function (perm) {          if (perm == "granted") {              var notification = new Notification("这是一个通知撒:", {                  dir: "auto",                  lang: "hi",                  tag: "testTag",                  icon: "https://static.cnblogs.com/images/adminlogo.gif",                  body: "通知content"              });          }      })  }

先说下websocket吧,WebSocket 规范是 HTML 5 中的一个重要组成部分,已经被很多主流浏览器所支持,也有不少基于 WebSocket 开发的应用。正如名称所表示的一样,WebSocket 使用的是套接字连接,基于 TCP 协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持,主要用于s/c的数据通信,但以上的例子不是双向通信,而是单项消息推送,客户端只接收消息提示并查看就行了,接下来我在浏览器里找了下,发现了这个:

  内容设置-通知-例外管理,发现了消息通知的的来源,是各大网站的设定的端口号,可知其工作原理是服务器端设置好通知服务,在特定时间向客户端推送相关内容,并且此时用户不一定在浏览当前推送网址的来源网页,只要开着浏览器并且没用禁止网站消息通知就可以接收通知,所以相对于以前网页右下方弹出div的提醒方式,这种方式显得比较高大上;

  后来在查阅相关资料的时候发现了浏览器桌面通知这个功能,也就是Desktop Notification这个啦,基本的回调方式是这样的

  

1

Notification.requestPermission(callback);

  比如运行这个浏览器就会提示:

  其工作流程大致是检测用户是否同意执行,这个方法用于向用户请求获得消息提醒的权限,调用这个方法将产生如下效果,分别对应着3中状态:“granted”(状态值:0)表示用户同意消息提醒;“default”(状态值:1)表示默认状态,用户既未拒绝,也未同意;“denied”(状态值:1)表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒,这个值保存在一个内部变量中,并且是只读的,通过checkPermission()方法可以提取到这个状态值:

  然后如果用户同意执行有权限推送通知了,就可以配置推送消息给浏览器了,看起来很高端的样子。通过new构造,显示通知。

  推送方法:new Notification(title, options),其中title是必须参数,表示通知小框框的标题内容,options是可选参数,下面是一些参数的简单说明(实际内容有很长,有兴趣的小伙伴可以看下html5api说明)

  lang:提示的语言,这个没啥用吧

  bady:提示消息的主体内容。会在标题的下面显示

  tag:标记当前通知的标签

  icon:就是提示的时候显示的图标啦

  renotify:是否替换之前的通知项

===================== 无情的分隔线 ===============

H5两大重要的功能: websocket、canvas

 

转载于:https://my.oschina.net/Majw/blog/841765

你可能感兴趣的文章
Android Xutils 框架
查看>>
C#基础知识整理 基础知识(21) 委托(二)
查看>>
Android应用程序键盘(Keyboard)消息处理机制分析(16)
查看>>
Sysbench 0.5版安装配置
查看>>
统一沟通-技巧-11-Lync-联盟-无法-音频-远程桌面-传文件
查看>>
书摘—你不可不知的心理策略
查看>>
【博客话题】毕业——开始人生的艰苦历程
查看>>
2014.7.30-8.3日广大网友的提问解答(答问题的第2个工作周)
查看>>
Powershell管理系列(二十五)PowerShell操作之获取AD账号及邮箱信息
查看>>
Linux安装telnet
查看>>
【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
查看>>
openstack nova修改实例路径,虚拟磁盘路径
查看>>
java.sql.SQLException: Lock wait timeout exceeded --转
查看>>
使用C#进行图像处理的几种方法(转)
查看>>
Ajax原理学习
查看>>
sap scriptfom 多语言翻译
查看>>
实现超级简单的bug管理系统
查看>>
[LeetCode] Find Anagram Mappings 寻找异构映射
查看>>
--Too small initial heap for new size specified
查看>>
黄聪:3分钟学会sessionStorage用法
查看>>