PhoneGap中文网

 找回密码
 立即注册
查看: 20207|回复: 0

HTML5特性——Notification

[复制链接]

87

主题

87

帖子

327

积分

中级会员

Rank: 3Rank: 3

积分
327
发表于 2017-8-24 11:10:50 | 显示全部楼层 |阅读模式

本文和大家分享的主要是html5的特性Notification相关内容,一起来看看吧,希望对大家学习html5有所帮助。
  Notification简介
  在传统的网页体验中,当用户不在浏览网页时,无法由浏览器主动告知用户有新信息,必须等到用户重新开始浏览网页才知道有新消息,这对一些时效性要求比较强的网页应用来说是个很大的问题。
  Notification是HTML5实现的一个消息通知机制,用来为用户设置和显示桌面通知,即会在桌面的右下角弹出一个长方形带消息的窗口,无论用户是否在浏览你的网页。
  但是因为各种浏览器对Notification特性的支持不一,所以会出现Notification、webkitNotification和mozNotification的三种实现,而且在不同类型和版本的浏览器下提供的参数和API不一致,这对开发很不友好
因此在这里推荐使用 HTML5-Desktop-Notifications 这个polyfill,它对Notification进行了实现,使开发者不必考虑浏览器兼容性,可以方便地使用Notification特性
注意!必须在服务器中运行才会有桌面通知效果!
  Notification的简单实例
  下面我们来看具体的Notification实例
  检测特性可用性
  在正式演示Notification之前,我们需要先验证Notification是否被支持:
  验证能否使用Notification
  var validate_notification-btn = document.getElementById("validate-notification-btn");
  validate_notification-btn.onclick = function (e){
  if (Notification != null) {
  alert("notification可用!");
  } else {
  alert("notification不可用!");
  }
  }
  使用上面这段代码,可以验证Notification垫片是否已经发挥了作用
  发送一个简单的Notification
  使用
  如何使用Notification
  function notify(){
  var notification = new Notification("嗨(⊙▽⊙)", {
  body: "这里是一个提醒的正文哦⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
  icon: '/images/head.jpg'
  });
  }var test1_notification_btn = document.getElementById("test1-notification-btn");
  test_notification_btn1.onclick = function(e){
  if (Notification.permission === "granted") {
  notify();
  } else {
  Notification.requestPermission(function(permission){
  if (permission === "granted") {
  notify();
  }
  });
  }
  }
  Notification的内容介绍
  静态属性
  Notification的静态属性: permission —— 表明通知授权状态的字符串,它的值有三个:
  1. denied 表示用户拒绝了通知的显示
  2. granted 表示用户允许了通知的显示
  3. default 表示默认状态,因为不知道用户的选择,所以浏览器的行为与denied时相同
  4. notsupported 在使用了HTML5-Desktop-Notifications垫片之后,会有第四个值,表示浏览器不支持(未实现)Notification特性
  静态方法
  Notification的静态方法: requestPermission([callback]) —— 向用户请求允许使用Notification,但是这个方法只能通过用户行为调用(例如点击),其他方式无法调用。
  使用这个方法时可以传入一个回调函数,这个回调函数有一个参数,参数的值为请求之后的通知授权的状态
  requestPermission方法
  Notification.requestPermission(function (status){
  console.log(status);
  })
  你也可以用then的异步方法完成操作:
  requestPermission方法
  Notification.requestPermission().then(function(status){
  console.log(status);
  })
  构造函数(初始化方法)
  Notification的初始化方法为:
  requestPermission方法
  1var notification = new Notification(title,options);
  title是一个字符串,表示这个通知的标题
  options是一个对象,是一个可选参数,根据options包含的属性对Notification进行设定
  实例属性
  构造方法会返回一个notification实例,可以直接访问这个实例下的各种实例属性
  · title :通知内所显示的文本标题,用构造方法的第一个参数初始化
  · body :通知内所显示的文本内容
  · icon :通知左侧显示的图片,一个字符串,表示图片的URL地址
  · dir :通知文本的显示方向,有三个参数:”auto”,”ltr”,”rtl”(但是好像没有什么区别)
  · lang :通知使用的语言(不常用)
  · tag :通知的ID,是一个字符串,用于区分不同的Notification。如果有一条新通知和一条旧通知具有一个相同的标记,并且还没有被显示,那么这条新通知将会替换旧通知。如果旧通知已经显示出来了,那么旧通知将会被关闭,新通知将会被显示出来。
  实例方法
  notification实例有一个实例方法 —— close() ,调用这个方法可以关闭对应的notification
  事件处理
  notification实例有四个可以设置的触发事件: show (提醒显示时), click (提醒被点击时),error (提醒出错时), close (提醒关闭时),通过设置 on+事件名 的属性来设置触发事件
  requestPermission方法
  var notification = new Notification("嗨(⊙▽⊙)", {
  body: "这里是一个提醒的正文哦⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄",
  icon: '/images/head.jpg'
  });
  notification.onshow = function(){
  console.log("notification已被打开");
  }
  notification.onclick = function(){
  this.close();
  console.log("notification已被点击");
  }
  notification.onclose = function(){
  console.log("notification已被关闭");
  }
  notification.onerror = function(){
  console.log("notification出错");
  }

来源:KainStar
it营
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-5-21 00:33 , Processed in 0.043800 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表