浏览器使用Notification桌面通知消息推送

news2024/11/24 14:46:18

什么是 Notification?

  • Notification 是浏览器最小化后在桌面显示消息的一种方法
  • 类似于 360 等流氓软件在桌面右下角的弹窗广告
  • 它与浏览器是脱离的,消息是置顶的

 

一、弹窗授权

  • 授权当前页面允许通知
  • 可以通过检查只读属性 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: "木芒果", 
    icon: "https://profile-avatar.csdnimg.cn/238b721d51d44069986d5004489dcbd3_m0_63823719.jpg!1", 
    data: "https://blog.csdn.net/m0_63823719/" 
});

三、浏览器支持检测

  • 使用通知推送功能前,需要先检查浏览器是否支持
  • 可以通过 "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: "木芒果", 
    icon: "https://profile-avatar.csdnimg.cn/238b721d51d44069986d5004489dcbd3_m0_63823719.jpg!1", 
    data: "https://blog.csdn.net/m0_63823719/" 
});

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

六、最佳实践

notification.js

/**
 * 浏览器发送通知方法
 * Author:木芒果
 * @param {Object} title 通知标题
 * @param {Object} options 可选参数body(消息体)、icon(通知显示的图标路径)、data(点击通知后跳转的URL)
 * 示例:
 * createNotify("新的消息", {
 *		body: "你有一个奖品待领取",
 *		icon: "https://www.baidu.com/favicon.ico",
 *		data: "https://www.baidu.com/"
 *	});
 */
function createNotify(title, options) {
	var PERMISSON_GRANTED = "granted";
	var PERMISSON_DENIED = "denied";
	var PERMISSON_DEFAULT = "default";

	// 如果用户已经允许,直接显示消息,如果不允许则提示用户授权
	if (Notification.permission === PERMISSON_GRANTED) {
		notify(title, options);
	} else {
		Notification.requestPermission(function(res) {
			if (res === PERMISSON_GRANTED) {
				notify(title, options);
			}
		});
	}

	// 显示提示消息
	function notify($title, $options) {
		var notification = new Notification($title, $options);
		// console.log(notification);
		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();
		};
	}
}
/* 依次打印
 * show:   Event Object(事件对象),事件的type为"show"
 * click:  Event Object(事件对象),事件的type为"click"。点击消息后消息被关闭,跳到close事件。
 * close:  Event Object(事件对象),事件的type为"close"
 */

 index.html

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<script src="notification.js"></script>
		<script>
			createNotify("新的消息", {
				body: "你有一个奖品待领取",
				icon: "https://www.baidu.com/favicon.ico",
				data: "https://www.baidu.com/"
			});
		</script>
	</body>
</html>

七、兼容性

常用的Edge、Google Chrome都支持!

该图出自:"Notification" | Can I use... Support tables for HTML5, CSS3, etc

值得注意的是:你必须使用网络服务器进行挂载才能正确显示该通知,直接打开HTML是无效的,例如使用Nginx、Nodejs、HBuilder X开发工具、WebStorm开发工具去运行此程序,如需将此通知功能应用到线上的业务,需使用HTTPS协议方可使用!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/714558.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Springboot+Html的健身房管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着现代生活方式的改…

基于改进莱维飞行和混沌映射的金鹰优化算法(10种混沌映射随意切换),附matlab代码

“ 本篇文章对金鹰优化算法进行改进&#xff0c;首先通过引入混沌映射机制&#xff0c;对其群体进行初始化&#xff0c;增加金鹰个体的多样性&#xff1b;然后在金鹰个体的位置更新公式上引入改进的莱维飞行机制&#xff0c;提高搜索精度&#xff0c;帮助金鹰个体跳出局部最优。…

谈谈NLP中 大语言模型LLM的 思维链 Chain-of-Thought(CoT)

Chain-of-Thought(CoT) 1.介绍 在过去几年的探索中&#xff0c;业界发现了一个现象&#xff0c;在增大模型参数量和训练数据的同时&#xff0c;在多数任务上&#xff0c;模型的表现会越来越好。因而&#xff0c;现有的大模型LLM&#xff0c;最大参数量已经超过了千亿。 然而…

大数据Doris(五十五):BACKUP数据备份案例和注意事项

文章目录 BACKUP数据备份案例和注意事项 一、BACKUP数据备份案例 1、Doris中创建数据库&#xff0c;以及建表插入数据 2、创建远端仓库 3、全量备份指定 Doris 库下所有表所有分区数据 4、查看 backup 作业执行情况 5、查看远端仓库中已备份结果 二、注意事项 BACKUP数…

【花雕】青少年机器人技术等级考试理论综合试卷(一级)2021年9月

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…

Drools用户手册翻译——第二章 入门(下)测试和评估

因为篇幅原因&#xff0c;所以分为上下两个部分&#xff0c;主要就是通过一个交通违章项目的例子&#xff0c;带你先粗略感受一下决策模型的使用流程&#xff0c;总体来说有详细&#xff0c;也有没说清的地方&#xff0c;如果想要了解一下决策模型&#xff0c;可以进来了解一下…

[探地雷达]利用Faster RCNN对B-SCAN探地雷达数据进行目标检测

引用量较高的一篇会议论文。 由于真实雷达图像较少&#xff0c;作者采用了GPR工具箱&#xff0c;使用不同配置&#xff0c;合成了部分模拟雷达图。然后采用Cifar-10数据&#xff08;灰度图&#xff09;对Faster RCNN进行预训练&#xff0c;再采用真实和合成数据进行微调。 论…

(0021) H5-Vuejs配合 mint-ui 开发移动端web

mint-ui 初衷 element-ui主打pcweb&#xff0c;导致移动端上UI适配问题突出&#xff0c;趟了很多坑。这次更加理智些&#xff0c;选择了饿了么团队的主打移动端的mint-ui&#xff0c;目前来说体验很好。 认识Mint-ui 首先在手机上体验其demo&#xff0c;扫描链接&#xff1a;…

双层玻璃门碎了一面怎么更换

更换双层玻璃门的碎片需要按照以下步骤进行&#xff1a; 1. 备齐工具和材料&#xff1a;你需要准备以下工具和材料&#xff1a;安全手套、安全护目镜、扁头螺丝刀、绳子、玻璃胶和新的玻璃门。 2. 移除残存玻璃&#xff1a;首先&#xff0c;将门上的残留玻璃及其框架小心地取下…

12给图片加水印(matlab程序)

代码 clear;clc size512; block8; blocknosize/block; LENGTHsize*size/64; Alpha10.02; Alpha20.02; T1100; Izeros(size,size); Dzeros(size,size); BWzeros(size,size); block_dct1zeros(block,block); iimread(watermark64by64.png); %水印原图 markreshape(i…

springboot 2.6.6接入prometheus

springboot是2.6.6版本&#xff0c;刚开始用的是simpleclient客户端 <dependency><groupId>io.prometheus</groupId><artifactId>simpleclient</artifactId><version>0.16.0</version> </dependency>接入后一直报AbstractEnd…

Linux:CentOS安装Git

报错如下&#xff1a;git: 未找到命令... 这是因为没有安装git。 解决方案 使用yum安装git yum -y install git 查看是否安装git,若出现版本号&#xff0c;则代表已经安装了git git --version

ubuntu18实现QT与ROS通信

背景介绍&#xff1a;老板需求&#xff1a;qt开发ui界面&#xff0c;实现与ros通讯。同伴A已经使用qt开发了部分功能&#xff0c;但是没有弄与ros通讯相关&#xff0c;与A沟通了解项目细节。当前主要任务&#xff1a;先实现ros与qt通讯&#xff0c;实现ros话题发布、接收 经验…

Vue开发记录

文章目录 1、解决表格el-table多出一条横线1.1、现象1.2、解决方案 2、el-row高度问题2.1、现象2.2、解决方案 1、解决表格el-table多出一条横线 1.1、现象 <el-table:data"tableData"style"width: 100%"><el-table-columnprop"date"…

Nginx【Nginx场景实践(什么是限流、限流算法、限流实战 )】(十一)-全面详解(学习总结---从入门到深化)

目录 Nginx场景实践_什么是限流 Nginx场景实践_限流算法 Nginx场景实践_限流实战 Nginx场景实践_什么是限流 生活中的限流 春运&#xff0c;一项全人类历史上最大规模的迁移活动&#xff0c;抢火车票一直是每年跨年以后的热点话题。 为什么需要限流 系统设计时一般会预估…

快速排序的三路划分方法和归并排序的递归和非递归实现

目录 快速排序的三路划分方法 归并排序的递归实现 归并排序的非递归实现 快速排序的三路划分方法 首先快排的时间复杂度为O(N*logN)&#xff0c;空间复杂度O(logN),不稳定。 三路划分&#xff1a;将数据分为三份&#xff1b;可以提高当数据中出现多个重复数字时的效率。 …

青岛大学_王卓老师【数据结构与算法】Week04_03_双向链表_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c;另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础–…

2022(特等奖)C2592儿童安全监护与救援指挥系统

作品介绍 1 需求分析 现如今人口拐卖犯罪已成为世界上增长最快、最有利可图的犯罪之一&#xff0c;年利润仅次于毒品和军火&#xff0c;其中儿童拐卖犯罪最为引人注目&#xff0c;且被拐数量惊人&#xff0c;已成为国际社会共同关注的问题。2021年4月&#xff0c;国务院发布了…

Kafka入门, 消费者工作流程

kafka消费方式 pull(拉)模式&#xff1a; consumer采用从broker中主动拉取数据。 Kafka采用这种方式。 push(推)模式&#xff1a; Kafka没有采用这种方式&#xff0c;因为由broker决定消息发送速率&#xff0c;很难适应所有消费者的速率。例如推送速度是50m/s&#xff0c;consu…

云原生时代,如何通过 KubeSphere x 极狐GitLab 构建安全应用?

本文整理自云原生 Meetup 杭州站上&#xff0c;极狐(GitLab) DevOps 技术布道师马景贺的演讲。 当听到云原生的时候&#xff0c;你会想起什么&#xff1f; 可能很多人很自然地就会想到 Kubernetes、容器、微服务、开源等等&#xff0c;这些关键词是我们接触云原生绕不开的话题。…