HTML5之信息通告的应用(Web Notification)

日期:2021-01-19 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

有关 HTML5 ,写了很多文章内容,总感觉有关的高級 API 都得过1遍。系统软件的掌握,站在更高的高宽比去思索难题,这样才可以事倍功半。

1、先睹为快

大家先来尝试1个最简易的事例,开启 chrome 开发设计者专用工具,粘贴编码进去立即运作:

new Notification('Jartto\'s 信息通告', {
  dir: 'rtl',
  body: '这是1个信息,根据 Web Notification 推送,做为检测!',
  icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})

并沒有出現甚么信息通告,如何回事?不必心急,接着往下看。

2、客户受权

依照上面的示例,大家运作了,可是并沒有取得成功调起信息消息推送框。这时候候必须查询1下是不是客户受权,操纵台键入: > Notification.permission

很快大家就会发现,原先客户批准是 default ,由于不知道道客户的挑选,因此访问器的个人行为与 denied 时同样,即为回绝。

3、适配性

看到这些 HTML5 的高級 API ,一直会有1些顾忌。事例虽好,用起来也很便捷,可是究竟适配性怎样,这是1个值得思索的难题。

能够看到,基础上全部访问器都适用了,除 iOS SafariOpera Mini ,因此挪动端运用需慎重。

4、API 文本文档

大家先来系统软件性的整理1下 API,很简易,花 5 分钟过1下。

测试用例:

let notification = new Notification(title, options)

主要参数:

title:1定会被显示信息的通告题目

options:1个被容许用来设定通告的目标。它包括下列特性:

  • dir : 文本的方位;它的值能够是 auto (全自动), ltr (从左到右), or rtl (从右到左)
  • lang: 特定通告中所应用的語言。这个标识符串务必在 BCP 47 language tag 文本文档中是合理的。
  • body: 通告中附加显示信息的标识符串
  • tag: 授予通告1个 ID ,便于在必要的情况下对通告开展更新、更换或移除。
  • icon: 1个照片的 URL ,将被用于显示信息通告的标志。

特性:

Notification.permission: 1个用于说明当今通告显示信息受权情况的标识符串。将会的值包含:

  • denied (客户回绝了通告的显示信息),
  • granted (客户容许了通告的显示信息),
  • default (由于不知道道客户的挑选,因此访问器的个人行为与 denied 时同样)

方式:

  • Notification.onclick:解决 click 恶性事件的解决,每当客户点一下通告时被开启。
  • Notification.onshow:解决 show 恶性事件的解决,当通告显示信息的情况下被开启。
  • Notification.onerror:解决 error 恶性事件的解决,每当通告遇到不正确时被开启。
  • Notification.onclose:解决 close 恶性事件的解决,当客户关掉通告时被开启。
  • Notification.requestPermission():用于当今网页页面想客户申请办理显示信息通告的管理权限。
  • Notification.close():用于关掉通告。

Notification.requestPermission 这个方式只能被客户个人行为启用(例如:onclick 恶性事件),而且不可以被别的的方法启用。

5、详细示例

依照上面 API ,大家来写1个详细的示例:

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!");
      }
    });
  }


  // 最终,假如实行到这里,表明客户早已回绝对有关通告开展受权
  // 出于重视,大家不可该再打扰她们了
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。