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

编程技巧│浏览器 Notification 桌面推送通知可视化桌面通知,跟遗忘说再见

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

? 什么是 Notification

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

? 弹窗授权

  • 授权当前页面允许通知
  • 可以通过检查只读属性 Notification.permission 的值来查看你是否已经有权限
  • default: 用户还未被询问是否授权,可以通过 Notification.requestPermission() 可以询问用户是否允许通知
  • granted: 用户点击允许后的状态
  • denied: 用户点击拒绝后的状态,通知框不可用
Notification.requestPermission()
编程技巧│浏览器 Notification 桌面推送通知

? 弹窗使用

  • 可以通过 new Notification($title, $options) 使用通知推送功能
  • title: 一定会被显示的通知标题
  • options: 可选,一个被允许用来设置通知的对象。它包含以下属性:
  • dir: 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
  • lang: 指定通知中所使用的语言。
  • body: 通知中额外显示的字符串
  • tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
  • icon: 一个图片的URL,将被用于显示通知的图标。
new Notification("温馨提醒", {
	body: "飞兔小哥送你一份奖品待领取",
	icon: "https://autofelix.github.io/autofelix/u/favicon.ico",
	data: "https://autofelix.blog.csdn.net/"
});

? 浏览器支持检测

  • 使用通知推送功能前,需要先检查浏览器是否支持
  • 可以通过 "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://autofelix.github.io/autofelix/u/favicon.ico",
    data: "https://autofelix.blog.csdn.net/"
});

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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170855.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 网络协议、socket、webSocket

    网络协议、socket、webSocket一、网络协议网络协议为计算机网络中进行数据交换而建立的规则、标准或约定的集合。1、OSI七层协议OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范。OSI模型有7层结构,从上到下分别是7应用层6表示层5会话层4传输层3网络层2数据链路层1物理层。下面的图表显示不同的协议在最初OSI模型中的位置:7应用层例如HTTP、SMTP…

  • C语言学生成绩管理系统详解[通俗易懂]

    文章目录一、系统概述二、数据类型三、自定义函数说明四、运行界面五、源代码源代码请直接跳到最后引言:最近写了C语言的大作业,感觉做得还行,记录一下,给后人一些参考,给自己留更深印象方便后续改进!不知道发了这篇博客会不会认为我抄袭…害怕.jpg一、系统概述使用单向链表和文件作为基本数据结构,设计一个学生成绩管理程序,管理某学校学生成绩。[1]插入数据[2]修改对应数据项的数据[3]删除对应学号的信息[4]查找某学号的信息[5]查找不及格学生[6]对学生成绩进行排名[7]统计各个等级的学生

  • Linux命令 ldd

    Linux命令 ldd转载:Linux中的ldd命令和pvs命令ldd命令用于判断某个可执行的binary档案含有什么动态函式库。参数说明:–version  打印ldd的版本号-v–verbose  打印所有信息,例如包括符号的版本信息-d–data-relocs  执行符号重部署,并报告缺少的目标对象(只对ELF格式适用)-r–function-relocs  对目标对象和函数执行重

  • STM32中文参考手册_STM32读取ESP8266数据

    STM32中文参考手册_STM32读取ESP8266数据http://blog.csdn.net/u012722571/article/details/47295245lanmanck原创】这篇文章已经说了STM32的启动过程:http://blog.csdn.net/lanmanck/article/details/8252560我们也知道怎么跳到main函数了,那么,中断发生后,又是怎么跑到中断入口地址的呢?从stm

    2022年10月25日
  • mysql下载与安装教程_jdk下载与安装教程

    mysql下载与安装教程_jdk下载与安装教程MySQL下载和安装教程下载MySQL数据库可以访问官方网站:https://www.mysql.com/点击DOWNLOADS模块下的Community模块,进行下载或可访问网页:https://dev.mysql.com/downloads/mysql/直接下载MySQL社区服务版进入,选择MySQL的版本及主机目前最新版本是:MySQLCommunityServer8.0.27,点击下载点击后进入下一页面,该页面可注册MySQL账户,可登录MySQL账户,也可不进行注册,直接下

  • python return换行(python中的换行)

    广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!代码太长怎么办,反斜杠引号‘’来帮忙!在写list或者较长的字符串时候,或者多个循环造成ide不够用时,就需要代码换行了。主要的代码换行有通用的反斜杠和针对字符串起作用的三引号结构。1.反斜杠对于一般表达式来说,反斜杠后直接回车即可实现续行,使用的关键在于反斜杠后不能用空格…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号