巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

Html5中的桌面告诉Notification的完成

0
一佰互联网站扶植(www.taishanly.com) 宣布时辰:2020-04-20 08:57:16 阅读数: 115

媒介:对一个前段开辟者,逛网页总会寄望一些别致的功效,对下班总会用到Teambition的我,老是能收到Notification...以是明天就来研讨下这个H5功效...

1. 实例一个Notification

let n = new Notification(  "这是一个告诉动静", //这是必选Title 必然会显现的告诉标题  {    icon: "xxx.png", // 这个icon是用来显现告诉中的左侧图片    body: "你好啊,我是xxx",   // 告诉中的内容字符    dir: auto,             // 笔墨的标的目的 值包罗: auto(自动), ltr(从左到右), rtl(从右向左)    tag: "gxlself"          // 授与这个告诉动静一个ID, 用来对这个告诉动静遏制 革新.移除.替代 等操纵    // long: "en-US"               //lang字段 须要参考http://tools.ietf.org/html/bcp47 并不是必须 没看出啥感化...    // ...            // 其他可选属性见下实例属性  })

拜候对应的实例属性:n.actions // 一个只读的NotificationAction工具数组。每个工具描写用户能够在一个告诉中挑选的单个操纵。n.image // 告诉的一局部显现的图象的URLn.badge // 当不充足的空间显现告诉自身时,用于表现告诉的图象的URL。n.permission // 有三个值 granted, denied, 或default 当状况值为granted时能够发送告诉动静 default默许用户没处置 denied 用户谢绝 n.renotify // 布尔值。新告诉呈现的时辰是不是替代之前的。若是设为true,则表现替代,表现以后标记的告诉只会呈现一个。注重这里的“以后标记”没?没错,true参数要想起感化,tag必须须要设置属性值。n.requireInteraction // 布尔值, 指的是告诉是不是坚持勾当直到用户点击或打消告诉 而不是自动封闭..n.silent // 布尔值。告诉呈现的时辰,是不是要有声响。默许false, 表现无声。n.timestamp //告诉成立或能够操纵的时辰。n.data // 肆意范例和告诉相干联的数据。n.vibrate // 告诉显现时辰,装备震撼硬件须要的震撼形式。所谓振动形式,指的是一个描写瓜代时辰的数组,别离表现振动和不振动的毫秒数,一向瓜代下去。比方[200, 100, 200]表现装备振动200毫秒,而后遏制100毫秒,再振动200毫秒。 (挪动端)n.sound // 字符串。音频地点。表现告诉呈现要播放的声响资本。n.sticky // 告诉吸附不轻易被断根... (挪动端)n.noscreen // 布尔值。是不是不再屏幕上显现告诉信息。默许false, 表现要在屏幕上显现告诉内容。(挪动端)

此时实例 n 有四个事务处置: 1> onclick 用户对告诉信息的点击事务2> onshow 告诉动静展现以后触发的事务 3> onerror 碰到毛病会触发的事务4> onclose close事务的处置

2. Notification工具会有甚么属性/体例呢?操纵节制台中的window工具输出点开检查就能够够看到:

值得注重的是: requestPermission()体例仅在Notification工具有用,实例工具有用!!!这个体例是用来向用户请求显现告诉的权限,只能被用户自动去挪用(在页面onload中能够挪用,能够向用户请求,以后再去发送...)

实例工具具有的体例有:

    (1). close() 用于封闭告诉动静 --> 也能够在onshow体例加提早挪用,进步用户休会感...

    (2). addEventListener() 监听事务(这个通用体例)

    (3). removeEventListener 卸载监听事务(通用,同上)

    (4). dispatchEvent 分拨事务(同上)

接上去,写一个js测试, 若是操纵的是谷歌阅读器,倡议在设置中显现告诉将本地办事地点插手许可告诉

可是,http的域名在谷歌阅读器被默许封闭,还不许可变动,检查谷歌阅读器节制台有正告信息--->

index.js:78 [Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See http://goo.gl/rStTGz for more details.

嗯,好吧,让加https证书,真的是有毒...固然在自身的主页中增加该功效也只能在火狐阅读器爽一爽....

(腾讯云有收费一年的ssl证书,可自身遏制装置...)

// index.jswindow.onload = function(){  let gxlself = new Gxlself()  gxlself.requestPermission()  setTimeout(()=>{    gxlself.showNotification()  },3000)}class Gxlself{   constructor(){    this.isNotificationSupported = "Notification" in window;   }    isPermissionGranted(){        return Notification.permission === "granted";    }    requestPermission(){        if(!this.isNotificationSupported){            return;        }        Notification.requestPermission(status=>{            let permission = Notification.permission;        })    }    showNotification(){        if (!this.isNotificationSupported) {            return;        }        if (!this.isPermissionGranted()) {            return;        }        var n = new Notification("gxlself对您发来问候", {            icon : "gxlself.png",            body : "接待来访,鄙人万分感谢感动! 点击便可跳转至我的博客页面~"        });        n.onshow = function () {            console.log("gxlself已发送告诉信息");            setTimeout(function() {                n.close();            }, 5000);        }        n.onclick = function () {            location.href = "http://gxlself.com/blog"            n.close()        }        n.onerror = function (err) {            console.log(err)        }        n.onclose = function () {            console.log("gxlself动静窗口封闭")        }    }  }

这是火狐阅读器履行后的结果展现:

再来看看谷歌本地跑的结果:(域名已被默许阻挡封闭,下面已申明,不再反复)

谷歌的结果实在挺都雅的,嗯...只是一个https把我给屏障了 哎...

------- 桌面版操纵 -----------

当你要在开放 web 操纵中操纵告诉时,请确保将 desktop-notification 权限增加到你的 manifest 文件中。告诉能够被用于任何权限级别,hosted 或更高。

  "permissions": {      "desktop-notification":{}  }

这个Notification比拟好玩,也是将来发送动静的一个主要的一块,留此记实...但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:HTML5新控件之日期和时辰挑选输出的完成代码
下一篇: 详解canvas drawImage()体例绘制图片不显现的题目
[前往消息列表]

相干消息more

01
04月
织梦鼎新前沿 南溪以招商促成长致敬鼎新开放4

简介:鸟瞰南溪。(罗平 摄)宜宾消息网12月24日讯(俞南 温孝娥)十仲春的广东汕头,有别于隆冬凛凛的巴蜀大地,仍然暖意融融。作为天下最早设... >>概况

29
07月
若何成立公司网站?

分享 成立公司网站何其的主要,想必不必跟大师说都应... >>概况

16
04月
专业网站扶植-老手网站设想的注重事变

一:你为甚么做网站?若是你只是想点窜淘宝的宝贝描写,或点窜一些cms的模板,那你说话上只需学学html,开辟软件上学学DW就能够够了,不必... >>概况

23
11月
想专业做网站要怎样选公司

在此刻,企业想要做一个自身的网站自身是很泛泛的事。只需上彀去搜刮一下就能够找这方面的公司,根基上也不必斟酌太多,按照他们的体例去做就行。但是想... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站