使用 Javascript 实现浏览器推送提醒功能的示例

本篇文章内容简单，速读只需两三分钟，通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能

Notification 类

简单明了，这个类就是负责推送消息的，只要用户当前没有关闭页面，及时是在使用其他程序，浏览器也能够将消息推送给用户

请求权限

我们在手机上都收到过消息推送，在接收推送之前我们会先将消息推送权限开放给应用。在浏览器中也一样，在使用浏览器推送之前，需要先获取权限

Notification.requestPermission().then(permission => {
  console.log(permission)
})

通过 requestPermission 方法可以为当前域名请求消息推送的权限，这个方法可以使用 Promise 语法来实现请求结果的处理。当然，你也可以使用回调的方式来实现

回调的参数 permission 表示当前请求后用户的选择：允许推送 / 不允许推送，它的值也分别有两个 granted / denied，当我们发现用户不允许的推送的时候，就可以在回调中做出相应的提示，告诉用户可能会导致不能及时接收消息，并且告诉用户如果想要接收消息该如何操作等

查看权限

由于推送的权限是基于域名的，因此同一个网站在请求一次权限后，下一次打开时就不会再次请求，而是直接通过第一次的用户选择来决定网站是否能向用户推送

因此我们就需要能够获取到当前网站的推送的状态，可以通过下面的这个属性来获取状态：

Notification.permission

permission 属性的值有三种：granted - 允许推送；denied - 拒绝推送；default - 还未申请权限

当值为 default 时，我们就可以向用户请求推送的权限了

发起一条推送

const note = new Notification (title, opts)

通过上面的方式可以声明一条推送，它有两个参数，第一个参数是消息的标题，这个是必填的一个参数；而通过第二个选填参数，我们则可以实现更多自定义的显示内容：

第二个参数接收一个对象，它有一下几个属性：

  1. body：推送的主体内容
  2. tag：推送的标识，如果我们声明了多个 Notification，而这些推送的 tag 都相同，则只会推送一次
  3. icon：需要在推送中显示的图标的 URL
  4. data：推送的消息所带有的数据信息，当用户点击推送窗口时，可以通过这些信息为用户展示相应的内容
  5. requireInteraction：正常情况下，推送发出后若用户没有操作，几秒后就会消失，而将该属性设为 true 则可以让推送始终维持而不消失，默认值是 false

当我们需要自定义推送显示时长的时候，可以通过最后一个属性将自动消失关闭，然后配合 note.close() 和 setTimeout 方法人为控制推送时长

点击推送事件

既然已经可以成功的发起一条推送，那么该如何监听到用户是否点击了这个推送呢？很简单，通过 onclick 属性就可以实现

note.onclick = () => {
  //在这里实现用户点击后的逻辑
}

其他

需要注意的是，并不是所有浏览器都支持 Notification，所以在使用前需要先检测能否使用

或许有的小伙伴会想，这个功能不错，这样在手机上也能实现网页消息推送了。然而很不幸的是，移动端浏览器几乎100%不支持 Notification ：(

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • Node.js实现数据推送

    Node.js实现数据推送

    场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接超时

  • Node.js学习教程之HTTP/2服务器推送【译】

    Node.js学习教程之HTTP/2服务器推送【译】

    前言 最近Node.js v8.4+版本发布带来了体验版的HTTP/2,你可以自己通过设置参数--expose-http2启动. 这篇文章,我将介绍HTTP/2最重要的一方面服务器推送并且创建一个小的Node.js程序案例来使用它.下面话不多说了,来一起看看详细的介绍吧. 关于HTTP/2 HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟,通过有效压缩 HTTP 标头字段将协议开销降至最低,同时增加对请求优先级和服务器推送的支持. 更多关于HTTP/2内容,请查看文章HTTP/2.

  • ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码

    ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 2.Push.js是什么?[需要浏览器支持H5Notifications] Notifications翻译过来即是通知.那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出

  • 使用 Javascript 实现浏览器推送提醒功能的示例

    本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能 Notification 类 简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户 请求权限 我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用.在浏览器中也一样,在使用浏览器推送之前,需要先获取权限 Notification.requestPermission().then(permission => { cons

  • HTTP/2 协议用于 iOS 推送提醒服务 (APNS)

    HTTP/2 协议用于 iOS 推送提醒服务 (APNS)

    苹果最近更新了他们的推送提醒服务协议,APNS.这个新版本的协议基于HTTP/2和JSON,相比于旧的二进制协议,新的协议有了巨大改进. 新的APNS协议基于HTTP/2: 新的特性和功能: 基于JSON的请求和响应 对于每个通知,如果成功响应,将会返回200标识 - 不用再去猜测通知是否被接收到 响应错误将会以JSON字符的形式返回 消息的长度从2048个字节增加到4096个字节 连接状态可以通过HTTP/2的ping框架来进行检查 支持主题 通用的推送证书 - 开发和生产使用同一个证书即可

  • 15行Python代码实现免费发送手机短信推送消息功能

    实现的功能: 通过代码定时给手机推送短信,短信内容可以自定义文字,当然你也可以去别的网站爬取每日心灵鸡汤,天气预报或其它信息进行推送.关于爬取数据可以参考:Python40行代码实现天气预报和每日鸡汤推送 本文主要讲如何实现发送短信的功能,全部代码只用15行. 首先贴出实现的效果图,后面再分两步详细描述实现过程,第一步免费注册api接口,第二步只需要写10来行代码. 代码运行后本地收到返回的执行情况: 手机收到代码发送过来的短信截图: 实现过程: 1.免费注册获取发送短信的api接口 我们需要A

  • Django Channel实时推送与聊天的示例代码

    先来看一下最终的效果吧 开始聊天,输入消息并点击发送消息就可以开始聊天了 点击 "获取后端数据"开启实时推送 先来简单了解一下 Django Channel Channels是一个采用Django并将其功能扩展到HTTP以外的项目,以处理WebSocket,聊天协议,IoT协议等.它基于称为ASGI的Python规范构建. 它以Django的核心为基础,并在其下面分层了一个完全异步的层,以同步模式运行Django本身,但异步处理了连接和套接字,并提供了以两种方式编写的选择,从而实现了这

  • 百度实时推送api接口应用示例

    百度实时推送api接口应用示例

    网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录.   百度站长平台 http://zhanzhang.baidu.com/ 打开百度站长平台, 点开实时推送的添加新数据接口获得带token的api推送地址:     http://ping.baidu.com/sitemap?site=www.yourdomain.com&resource_name

  • python3实现zabbix告警推送钉钉的示例

    自己写了一个简单的python脚本,用来推送zabbix告警到钉钉机器人,推送格式为markdown,有需要的可以自己修改markdown的格式及推送的值(zabbix宏) 环境如下,理论上zabbix版本不影响,可以看看官方宏定义是否有区别 python 3 zabbix 3.4.2 zabbix宏官方文档:https://www.zabbix.com/documentation/3.4/manual/appendix/macros/supported_by_location 配置 配置钉钉自

  • Go语言使用钉钉机器人推送消息的实现示例

    Go语言使用钉钉机器人推送消息的实现示例

    学习了Go语言后,打算利用最近比较空一点,写一个前端部署工具,不需要每次都复制粘贴的麻烦,我们希望再部署开始之前和部署结束后推送钉钉消息 创建一个钉钉机器人 这个比较简单 添加完后会给你一个webhook就是我们发送消息的地址 推送消息 show code! func SendDingMsg(msg string) { //请求地址模板 webHook := `https://oapi.dingtalk.com/robot/send?access_token=04c381fc31944ad290

  • Python实现推送百度链接的示例代码

    通过代码实现抓取个人博客中某一页指定文章链接,并批量将该链接推送到百度站长平台,起到快速收录的目的.  import sys import requests from bs4 import BeautifulSoup # 推送百度爬虫 def push_page(url): headers = { 'User-Agent': 'curl/7.12.1', 'Host': 'data.zz.baidu.com', 'Content-Type': 'text/plain', 'Content-Len

  • 教你十行代码实现python向手机推送通知功能

    教你十行代码实现python向手机推送通知功能

    目录 服务准备 代码 最近在跑深度学习的东西时,由于经常忘掉还在训练导致懂不懂就完了切回去看结果,然后网上搜索了一下最终找到一个还不错的应用,不用下什么东西就可以使用,代码也就10行左右(实际四行就可以) 服务准备 这里使用的是pushplus的服务 首先进入网站登录获取个人token 页面切换后微信扫码关注公众号,然后在试一试中输入一些测试字符串 基本没有什么延时就可以在微信公众号收到推送 除此之外消息模板还有json,text,markdown可以选,渠道也有其他的,自己可以试试,我只是想推

  • JavaScript实现预览本地上传图片功能完整示例

    JavaScript实现预览本地上传图片功能完整示例

    本文实例讲述了JavaScript实现预览本地上传图片功能.分享给大家供大家参考,具体如下: <html> <head> <title>www.jb51.net 图片上传预览</title> <script> function PreviewImage(imgFile) { var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/; if (!pattern.t

随机推荐