一、什么是 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. 2020西湖论剑一道web题[网盘]

    题目: 一个网盘系统 图片: 解题手法 上传".htaccess"文件,改成可以执行lua脚本 内容为: SetHandler lua-script 编写lua脚本,而后进行get ...

  2. shiro+springboot分析思路

    文章目录 前言 一.为什么要使用shiro 二.使用步骤 1.如何认证和授权 2.如何获取数据 总结 前言 shiro和spring security等安全框架可以用户管理和权限认证 一.为什么要使用 ...

  3. 北桥芯片(north bridge/host bridge)

    看下上面的图,会比较清晰的认识到北桥芯片所在位置 北桥芯片(North Bridge) 是mother board chipset(主板芯片组) 中起主导作用的最重要的组成部分,也称为主桥(Host ...

  4. JS/JQ动态创建(添加)optgroup和option属性

    JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...

  5. Cf #709 Div. 2 B. Restore Modulo 一个只有三千多人过的b题, 妙啊!

    传送门: https://codeforces.com/contest/1484/problem/B 原题 Example input 6 6 1 9 17 6 14 3 3 4 2 2 3 7 3 ...

  6. AspNetCore配置多环境log4net配置文件

    前言 在之前的文章中有讲到AspNetCore多环境配置文件的应用,我们根据自己多种环境分别配置多个appsettings.$EnvironmentName.json文件. 在实际的开发中我们可能会遇 ...

  7. Python学习笔记: 用pprint更漂亮的打印数据

    pprint是一个标准库,它提供了pprint()函数 ,用来打印复杂数据时更漂亮 >>> from pprint import pprint >>> data = ...

  8. HCNP Routing&Switching之MUX VLAN

    前文我们了解了代理ARP相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16188230.html:今天我们再来聊一聊vlan隔离相关话题MUX VLA ...

  9. 微信小程序订阅消息

    概述 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验. 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情 ...

  10. [LBS学习笔记4]地理特征POI、AOI、路径轨迹

    1 简述 今天继续LBS地理信息的学习,目标是写到10篇博客的时候,做出一个地图工具页面用,包含地图空间索引Geohash.S2.H3的可视化展示. 地理特征分为点(POI).线(路径).面(AOI) ...