一、什么是 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://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);
}

编程技巧│浏览器 Notification 桌面推送通知的更多相关文章

  1. 与众不同 windows phone (10) - Push Notification(推送通知)之推送 Tile 通知, 推送自定义信息

    原文:与众不同 windows phone (10) - Push Notification(推送通知)之推送 Tile 通知, 推送自定义信息 [索引页][源码下载] 与众不同 windows ph ...

  2. 与众不同 windows phone (9) - Push Notification(推送通知)之概述, 推送 Toast 通知

    原文:与众不同 windows phone (9) - Push Notification(推送通知)之概述, 推送 Toast 通知 [索引页][源码下载] 与众不同 windows phone ( ...

  3. Windows Azure Service Bus Notification Hub推送通知

    前言 随着Windows Azure 在中国的正式落地,相信越来越多的人会体验到Windows Azure带来的强大和便利.在上一篇文章中, 我们介绍了如何利用Windows Azure中的Servi ...

  4. HTML5 Web Notifications 桌面推送小记

    目录 简介 常用API 手动设置权限 简介 Web Notifications目前在w3c的协议中已经是"推荐"(REC:Recommendation)阶段,除了iE外,各大现代浏 ...

  5. 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知

    [源码下载] 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后台任务 推送通 ...

  6. 背水一战 Windows 10 (121) - 后台任务: 推送通知

    [源码下载] 背水一战 Windows 10 (121) - 后台任务: 推送通知 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 推送通知 示例演示如何接收推送通知/WebA ...

  7. 苹果推送通知服务APNs编程(转)

    add by zhj: 下面的几篇文章也非常好, http://www.raywenderlich.com/32960/apple-push-notification-services-in-ios- ...

  8. (转)苹果推送通知服务教程 Apple Push Notification Services Tutorial

    本文译自http://www.raywenderlich.com/.原文由iOS教程团队 Matthijs Hollemans 撰写,经原网站管理员授权本博翻译. 在iOS系统,考虑到手机电池电量,应 ...

  9. iOS上简单推送通知(Push Notification)的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

随机推荐

  1. 一. 为什么要用SpringMVC框架

    以前是怎么做项目的.CoreServlet,起到一个中心处理器作用.所有的请求到服务器,服务器给CoreServlet,在里面处理所有表的增删改查,跳转也在里面做.以前做部门就是 DepServlet ...

  2. 蓝桥杯 贪吃蛇长度java实现

    小明在爷爷的私人收藏馆里找到一台老式电脑.居然没有图形界面,只能用控制台编程. 如上图,是游戏时画面截图. 其中,H表示蛇头,T表示蛇尾.#表示蛇的身体,@表示身体交叉重叠的地方. 你能说出现在的贪吃 ...

  3. el-menu菜单 -- unique-opened 子菜单唯一性失效

    总结: 点击的是  el-sub-menu . 所以  el-sub-menu 的唯一性是必须的.否则 unique-opened 属性不生效

  4. css 实现球里装水

    <template> <div class="container">     <div class="wave"></ ...

  5. CentOS下Apache Doris Oracle ODBC外表使用指南

    1.软件环境 操作系统:CentOS 7.8 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.1 Oracle ODBC :insta ...

  6. ImageView的scaleType属性 与 adjustViewBounds属性

    ImageView的scaleType的属性有好几种,分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fi ...

  7. “如何实现集中管理、灵活高效的CI/CD”研讨会报名即将截止

    如何实现集中管理.灵活高效的CI/CD ZOOM中文在线研讨会将于 2022年3月29日,星期二,下午3:00-5:00, 也就是 明天 举行, 如果您还未注册,点击按钮,立即注册此次研讨会(注册即可 ...

  8. IOC容器--1.12. 基于 Java 的容器配置

    用Java的方式配置Spring ,不使用Spring的XML配置,全权交给Java来做 JavaConfig是Spring的一个子项目,在Sring 4  之后成为核心功能 这种纯Java的配置方式 ...

  9. iptables系列教程(三)| iptables 实战篇

    一个执着于技术的公众号 实战1 服务器禁止ping iptables -A INPUT -p icmp --icmp-type 8 -s 0/0 -j DROP // 禁止任何人ping通本机 &qu ...

  10. Linux系统inodes资源耗尽问题

    1 inodes介绍 Linux系统下文件数据储存在"块"中,文件的元信息,例如文件的创建者.文件的创建日期.文件的大小等.这种储存文件元信息的区域就叫做inode,中文译名为&q ...