专栏首页杰的记事本Html Notification通知的简单使用(转)

Html Notification通知的简单使用(转)

注意 最新的Chrome的Notification要想有效果需要https协议才行。

一、传统的通知实现

通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。

在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title的值。

例如:

setInterval(function() {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) {
            document.title = '【你有新消息】';    
        } else {
            document.title = '【     】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

结果标题就会这样:

窗体失焦的时候,标题就会闪。

这里有一个小的知识点,就是浏览器窗体获得焦点和失去焦点,Chrome和FireFox浏览器是windowonfocusonblur方法;而IE浏览器则是documentonfocusinonfocusout方法,因此有:

window.onfocus = function() { };
window.onblur = function() { };

// for IE
document.onfocusin = function() { };
document.onfocusout = function() { };

如果复杂场景,请使用addEventListenerattchEvent进行事件绑定。

然而,这种提示有个致命的缺陷,就是用户的浏览器要一直是张开的。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。

好了,新技术的出现不会是无缘无故的,总是为解决某一类问题或需求出现的。Web Notification就可以很好地解决上面的痛点。

二、HTML5 Web Notification桌面通知特点

HTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。

比方说,你私信女神说“同事放我鸽子,独立日的票多了一张,浪费了可惜,要不送你?”,然后浏览器爽快地关闭…………的话,你是收不到消息的(zxx: 此处有更新),只能最小化,或非当前窗口,然后你就可以安安心心地看《余罪》,没错,就安安心心地看。跟你讲,只要女神一回复,立马,桌面右下角就会出现:“女神说:好啊!”的通知提示,你就可以秒回!女神看到这秒回的速度,心里想的一定是:“这傻小子,一定是一直盯着屏幕等我消息……” 剧情就完全不一样了!

更新于2016-07-12 浏览器关闭是否可以接收到Web Notification通知,如果说“收不到”,肯定是不准确的,因为我自己时不时可以收到facebook的通知。但是,恕我愚钝,一直没想明白原理。难道Facebook和Chrome酱有合作,如果是这样那就是特例;如果不是,那通知是哪里发出的呢?

求达人解惑!

自己更新于2018-08-04

Facebook的通知是应该是使用的FCM,也就是Firebase云信息传递,是一种跨平台消息传递解决方案。

使用Service Worker注册对象,调这个对象的pushManager.subscribe的方法让浏览器弹一个框,询问用户是否允许接受消息通知。

如果点击允许的话,浏览器就会向FCM请求生成一个subscription(订阅)的标志信息,然后把这个subscription发给服务端存起来,用来发Push给当前用户。服务端使用这个subscription的信息调web push提供的API向FCM发送消息,FCM再下发给对应的浏览器。然后浏览器会触发Service Worker的push事件,让Service Worker调showNotification显示这个push的内容。操作系统就会显示这个Push。

然而,Firebase国内被墙,默认情况下,无法推送消息,大大影响了此功能的收益。要想有用,需要一个境外服务器中转,或用户自己已经架起来了。

兼容性 IE14以及其他桌面浏览器都支持Web Notification,目前移动端的支持情况并不好,Android部分支持,iOS Safari浏览器全军覆没(至9.3版本):

移动端要是支持的话,我猜,可能会跟原生app的提示效果类似,直接出现在屏幕上,感觉到时候应该蛮吊!

三、HTML5 Web Notification语法

window.Notification

如果浏览器支持Web Notification,不考虑私有前缀,则window.Notification就会是一个有很多静态属性和实例方法的函数。基本上,Web Notification所有的语法都是围绕Notification这个函数来进行的。

显然,通知这种事情是有可能扰民的,因此,必须经过用户同意才行。因此:

1. Notification.requestPermission()

这是一个静态方法,作用就是让浏览器出现是否允许通知的提示,window系统Chrome浏览器目前的UI效果是这样的:

语法目前有新旧两种,下面这个是最近规范上更新的基于promise的语法:

Notification.requestPermission().then(function(permission) { ... });

下面这个是基于简单的回调:

Notification.requestPermission(callback);

其中callback是可选参数,根据MDN的说法,Gecko 46开始舍弃了这种语法,但是,我自己使用FireFox 47测试,跑得很正常(有part4的截图为证)。难道FireFox的版本号不等同于Gecko的版本号?

无论是then中的还是直接callback函数的参数都是一样的,表示当前是否允许。只会是granteddenied, 或default.

其中granted表示用户允许通知,denied表示用户嫌弃你,default表示用户目前还没有管你。

Notification.requestPermission().then(function(result) {
  // result可能是是granted, denied, 或default.
});

2. Notification.permission[只读] 这是一个静态属性。表示是否允许通知,值就是上面的granteddenied, 或default.

默认情况下,Notification.permission的值是'default':

因此,Notification.requestPermission()的回调方法中,可以不使用result参数,直接使用Notification.permission获取当前的通知状态。

现在,用户允许出通知了,我们也知道可以出通知了,下面剩下的就是显示通知了。

3. new Notification(title, options) 通过new构造,显示通知。其中title是必须参数,表示通知小框框的标题内容,options是可选参数,对象,支持的参数以及释义见下表:

属性名

释义

dir

默认值是auto, 可以是ltr或rtl,有点类似direction属性。表示提示主体内容的水平书写顺序。

lang

提示的语言。没看出来有什么用。大家可以忽略之~

body

提示主体内容。字符串。会在标题的下面显示。比方说上面的“好啊!(害羞.gif)”。

tag

字符串。标记当前通知的标签。

icon

字符串。通知面板左侧那个图标地址。

data

任意类型和通知相关联的数据。

vibrate

通知显示时候,设备震动硬件需要的振动模式。所谓振动模式,指的是一个描述交替时间的数组,分别表示振动和不振动的毫秒数,一直交替下去。例如[200, 100, 200]表示设备振动200毫秒,然后停止100毫秒,再振动200毫秒。

renotify

布尔值。新通知出现的时候是否替换之前的。如果设为true,则表示替换,表示当前标记的通知只会出现一个。注意都这里“当前标记”没?没错,true参数要想其作用,必须tag需要设置属性值。然后,通知就会像这样覆盖:而不会是默认的叠高楼:

silent

布尔值。通知出现的时候,是否要有声音。默认false, 表示无声。

sound

字符串。音频地址。表示通知出现要播放的声音资源。

noscreen

布尔值。是否不再屏幕上显示通知信息。默认false, 表示要在屏幕上显示通知内容。

sticky

布尔值。是否通知具有粘性,这样用户不太容易清除通知。默认false, 表示没有粘性。根据我自己的猜测,应该和position的sticky属性值类似。

4. Notification.close() 通知显示了,如何关闭呢?可以通过调用Notification.close()实例方法,实际上,通知如果你放着不管,一段时间后就会自动隐藏,具体多久不详,我估摸着5秒有的。

5. 事件句柄 Notification.onclick 点击通知,然后……

Notification.onerror 通知显示异常,然后。例如,明明Notification.permissiondefault,你还让我显示。

下面这些呢有必要独立出来,虽然现在是支持挺好的,但是,由于目前规范并没有把它们列入其中,所以,未来有可能浏览器就不支持了。 Notification.onclose 通知关闭了,然后…… 无论是用户手动关闭,还是直接Notification.close()关闭都会触发该该事件。

Notification.onshow 通知显示的时候,该干嘛干嘛~~

6. 其他属性值 除了Notification.permission外,Notification还有很多其他只读属性值,但是,基本上和上面的options参数一致,返回的值也是options和默认值的合并值(如果浏览器支持的话)。

Notification.title[只读]

Notification.dir[只读]

Notification.lang[只读]

Notification.body[只读]

Notification.tag[只读]

Notification.icon[只读]

Notification.data[只读]

Notification.silent[只读]

Notification.title[只读]

Notification.timestamp[只读] 通知创建或者可以使用的时间。

Notification.noscreen[只读]

Notification.renotify[只读]

Notification.sound[只读]

Notification.sticky[只读]

Notification.vibrate[只读]

四、HTML5 Web Notification实例演示

知道了作用和API,下面就可以来个实例演示下,看看究竟真面目如何。

点击demo页面按钮:

如果你是第一次,会有如下提示:

通过后,就会出现妹子相关的通知信息了,例如,FireFox浏览器下(使用的是callback回调实现):

此时,你浏览器最小化,或者页面刷新,该通知都是纹风不动的。点击通知,可以和页面进行交互,例如,本demo显示了一段文字:

核心代码如下(显示和点击):

if (Notification.permission == "granted") {
    var notification = new Notification("Hi,帅哥:", {
        body: '可以加你为好友吗?',
        icon: 'mm1.jpg'
    });
    
    notification.onclick = function() {
        text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友!';
        notification.close();    
    };
}    

完整测试代码参见demo。

至此,一个可以应用于实际开发的Web Notification demo就跃然纸上了。好像facebook已经在使用Web Notification了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS height:100%无效以及替代方案

    可以考虑用 vh 或者padding-bottom来替代。。。 https://javascript.shop/height%e7%99%be%e5%88%86...

    javascript.shop
  • img标签不同设备加载不同尺寸的图片的几种方法

    一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。

    javascript.shop
  • vw, vh视窗宽高单位的使用

    不过“我看见你”和“我触碰你”是不一样的。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。...

    javascript.shop
  • [html5] (Notification) 桌面通知

    [html5] (Notification) 桌面通知 前几天要做一个桌面通知的功能,翻查以前做的笔记,发现webkitNotifications这个已经不能用...

    用户1631416
  • AI平台与开发者,造城者要收建筑设计师的进城费吗?

    最近两天,百度与科大讯飞的AI语音平台之争又成为了刷屏事件。这次争论的焦点在于,平台就AI技术面向开发者和合作者收费是不是一个好方案? 当然,科大讯飞方面已经回...

    企鹅号小编
  • 给AI产业一个建议:造城者不能收建筑设计师的进城费

    最近,百度一条新闻成为科技圈关注的焦点:百度宣布语音技术全系列永久免费,AI免费战再升级。关于AI平台与开发者之间关系的争论尘嚣直上。 12月8日百度DuerO...

    企鹅号小编
  • APK安装流程详解3——PackageManager与PackageManagerService

    上面一篇文章介绍了PackageManager,我们知道PackageManager是一个抽象类,它里面很重要的方法都是抽象的,所以在具体执行的时候,肯定是他的...

    隔壁老李头
  • Qt编写自定义控件44-天气仪表盘

    天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件,各种天气图标采用的矢量图,颜色变换采用动态载入svg的内容更改生成的,其实也可以采用图形字体来做,本...

    feiyangqingyun
  • ubuntu14/ubuntu16/centos7:解决可以ping ip却ping不通主机名

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • 懒人小技巧, Toad 常用偷懒方法

    FlyLolo

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动