编程技巧│浏览器 Notification 桌面推送通知

更新日期: 2022-06-19阅读量: 46标签: 浏览器

一、什么是 Notification

Notification是html5新增的api,用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。

Notification通知是脱离浏览器的,即使用户没有停留在当前的标签页,甚至最小化了浏览器,也会在主屏幕的右下角显示通知,然后过一段时间后消失。

Notification在操作中也可以监听通知的显示,点击,关闭等事件。


二、弹窗授权

授权当前页面允许通知,可以通过检查只读属性 Notification.permission 的值来查看你是否已经有权限。

default: 用户还未被询问是否授权,可以通过 Notification.requestPermission() 可以询问用户是否允许通知

granted: 用户点击允许后的状态

denied: 用户点击拒绝后的状态,通知框不可用

Notification.requestPermission()

三、弹窗使用

可以通过 new Notification($title, $options) 使用通知推送功能

title: 一定会被显示的通知标题

options: 可选,一个被允许用来设置通知的对象。它包含以下属性:

dir: 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)

lang: 指定通知中所使用的语言。

body: 通知中额外显示的字符串

tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。

icon: 一个图片的URL,将被用于显示通知的图标。

new Notification("温馨提醒", {
	body: "fly63前端网送你一份奖品待领取",
	icon: "https://fly63.com/favicon.ico",
	data: "https://fly63.com/"
});

注意:

  • 如果第一次在域名控制台中执行上述代码,会提示你是否开启通知。如果开启过,就会自动显示通知。
  • 如果之前在域名中禁止消息通知,可以自己手动在开启,Notification是不能在禁止状态下代码设计开启消息通知的。

用户拒绝显示通知:

一旦用户禁止网站显示通知,网站就不能再请求用户授权显示通知,需要用户去设置中更改。已谷歌为例,在浏览器设置中,开始添加或者开始网站的消息通知。不同的浏览器通知设置的地方不太一样。


四、浏览器支持检测

"Notification" in window
function notify() {
    // 先检查浏览器是否支持
    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().then(function (permission) {
            // 如果用户接受权限,我们就可以发起一条消息
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }
    // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
    // 出于尊重,我们不应该再打扰他们了
}


五、授权回调

该通知有四个回调方法

onshow: 在通知展示的时候调用

onclose: 在通知关闭的时候调用

onclick: 在通知点击的时候调用

onerror: 在通知出错的时候调用

var notification = new Notification("温馨提醒", {
    body: "fly63前端网送你一份奖品待领取",
    icon: "https://fly63.com/favicon.ico",
    data: "https://fly63.com/"
});

notification.onshow = function (event) {
    console.log("show : ", event);
};

notification.onclose = function (event) {
    console.log("close : ", event);
};

notification.onclick = function (event) {
    console.log("click : ", event);
    // 当点击事件触发,打开指定的url
    window.open(event.target.data)
    notification.close();
};

notification.onerror = function (event) {
    console.log("close : ", event);
};


六、3秒后关闭弹窗

实现3秒后关闭弹窗的功能

var notification = new Notification('标题');
notification.onshow = function () {
    setTimeout(function () {
        notification.close();
    }, 3000);
}

链接: https://www.fly63.com/article/detial/11757

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

Puppeteer浏览器控制器_介绍Puppeteer的一些用法

Puppeteer是Chrome团队开源的Node库,其提供基于DevTools协议的高阶API让开发人员能够控制Headless Chrome、Chromium、Chrome等浏览器,通过Puppeteer能够将平时手动使用浏览器的操作通过代码的方式自动化执行

css重设样式_清除浏览器的默认样式

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

一个新式的基于文本的浏览器 Browsh

Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

精打细算浏览器空闲时间

有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!