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

这篇具有很好参考价值的文章主要介绍了浏览器使用Notification桌面通知消息推送。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

浏览器桌面通知功能详解

什么是 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.yssmx.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.yssmx.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 API,桌面消息推送,浏览器支持检测

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

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

到了这里,关于浏览器使用Notification桌面通知消息推送的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows通过浏览器访问noVNC(基于web的远程桌面)

    目录 一、什么是VNC 和 noVNC? 二、Windows10安装及配置noVNC 2.0、注释 2.1、下载UltraVNC 2.2、下载Node.js 2.3、下载安装git 2.4、创建一个存放文件的文件夹 2.5、安装ws、optimist、mime-types模块(执行websockify.js文件所需) 2.6、下载noVNC、下载websockify-js 2.7、修改websockify.js文件  2.8、查看

    2024年02月08日
    浏览(53)
  • 消息通知(Notification)/用户触达系统设计

    近年来,通知功能已经成为许多应用程序中突出的特性。构建一个能每天发送数百万通知的可扩展系统绝非易事。这正是为什么我觉得有必要记录我在这方面踩坑之路。也叫用户触达系统。 完成这项任务要求对通知生态系统有深刻的理解,否则需求很容易变得模糊和不明确。

    2024年02月04日
    浏览(41)
  • 【WinForm】WebView2-个性化浏览器-桌面程序开发详解

    这是一个桌面程序上的浏览器,是用插件WebView2开发的浏览器桌面程序,功能体验堪比Edge浏览器,相比使用Chrome内核插件开发浏览器来说,还是用插件WebView2开发来得简单一些,接下来讲一讲实现过程。 开发之前,建议先看看微软的 WebView2 开发文档,很有帮助 使用Visual Stu

    2024年02月04日
    浏览(36)
  • Win10常见问题【Office等、微信能接受消息但是无法打开浏览器】

    方案1:重启Windows资源管理器 ctrl + shift + esc打开资源管理器 文件 - 运行新任务 打开运行窗口后,直接输入 方案2:删除注册表错误位置 按Win+R键调出运行,输入regedit后按回车键进入注册表编辑器 定位到 在{00000000-0000-0000-0000-000000000000}上单击右键,选择“删除”; 如果是64位

    2024年01月24日
    浏览(51)
  • Selenium调用使用360浏览器,QQ浏览器,遨游浏览器,猎豹浏览器,Chromium

    国产的360安全浏览器,360急速浏览器,QQ浏览器,遨游浏览器甚至新版还未上市的Edge浏览器都是基于Chrome浏览器的开源版本Chronium开发来的。所以360浏览器可以理解为一个定制的Chrome浏览器,最新360安全浏览器是基于Chromium 63版本的,落后正式的Chrome版本。 我们下载对应的2

    2024年02月06日
    浏览(63)
  • 使用Selenium需要浏览器驱动与浏览器版本统一

    安装浏览器驱动 针对不同的浏览器,需要安装不同的驱动。 这里以安装 Chrome 驱动作为演示。 确定浏览器版本 进入设置界面,然后选择 【关于 Chrome】 查看自己的版本信息。这里我的版本是114,下载对应版本的 Chrome 驱动即可。 下载驱动 打开Chrome驱动。单击对应的版本。(

    2024年02月08日
    浏览(53)
  • 什么是无头浏览器?如何使用Golang实现无头浏览器截图?

    在Web开发中,有时需要对网页进行截图,以便进行页面预览、测试等操作。 而使用无头浏览器来实现截图功能,可以避免手动操作的繁琐和不稳定性。 这篇文章将介绍: 使用Golang进行无头浏览器的截图,轻松实现页面预览、测试和模拟用户操作。 这篇文章发完,有朋友在朋

    2024年02月05日
    浏览(57)
  • 基于selenium实现多个脚本只打开一次浏览器(重复使用浏览器)

    本文思路来源【Selenium】控制当前已经打开的 chrome浏览器窗口(高级版)_是小菜欸的博客-CSDN博客 selenium 自动打开Chrome浏览器且重复使用已打开的Chrome实例_飞扬的箭的博客-CSDN博客 但是这一篇文章的方式对于我来说有一个缺点,即每一次都需要新创建一个浏览器,或者需要

    2024年02月16日
    浏览(39)
  • 7、云服务器、WSL2(Widnows)Ubuntu22.04、安装图形界面/桌面xfce4、vnc连接、设置中文桌面、配置中文输入法、安装浏览器和文本编辑器、终端、解决客户端和服务器桌面复制黏贴问题

    0.1、备注 以下方式适用于云服务器和WSL2(适用于Linux的windows子系统)Ubuntu22.02 0.2、说明 在 Ubuntu 服务器上安装图形界面可以让你通过图形化的方式管理和操作系统。 Ubuntu 提供了多种图形界面选择,以下是一些常见的图形界面: GNOME:GNOME 是 Ubuntu 默认的图形界面环境,它提

    2024年02月20日
    浏览(73)
  • 华为自带浏览器无法使用

    一、首先确认其他浏览器是否正常使用 1.Microsoft Edge 页面截图  2、谷歌页面截图 问题所在:Microsoft Edge浏览器版本 111.0.1661.43 (正式版本64 位)兼容性问题。 二、处理方法 1、将Microsoft Edge浏览器卸载,且将C:Program Files (x86)MicrosoftEdge对应残留文件夹目录删除。 2、删除完去华

    2024年02月04日
    浏览(187)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包