JavaScript是如何工作的: Web推送通知的机制
摘要: 如何在Web端推送消息?
- 原文:JavaScript是如何工作的: Web推送通知的机制
- 作者:前端小智
Fundebug经授权转载,版权归原作者所有。
这是专门探索 JavaScript 及其所构建的组件的系列文章的第9篇。
如果你错过了前面的章节,可以在这里找到它们:
- JavaScript是如何工作的:引擎,运行时和调用堆栈的概述!
- JavaScript是如何工作的:深入V8引擎&编写优化代码的5个技巧!
- JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 !
- JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!
- JavaScript是如何工作: 深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径!
- JavaScript是如何工作的:与 WebAssembly比较 及其使用场景 !
- JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景
- JavaScript 是如何工作的:Service Worker 的生命周期及使用场景
推送通知在移动端非常常见。在 Web 端,尽管开发人员对其功能的需求很高,但出于某些原因,推送通知被引入 Web 的时间比较晚。
简介
Web 推送通知允许用户在 Web 应用程序需要更新时选择是否接收更新消息,目的是在重新吸引用户群注意的更新信息通常是对用户来说有趣、重要、实时的内容。
推送通知的基础是我们 上一篇 讲的 Service Workers。
在这种情况下,使用 Service Worker 的原因是它们在后台工作。这对于推送通知非常有用,因为这意味着只有当用户与通知本身进行交互时,它们的代码才会被执行。
推送和通知
推送和通知都有各自的 API
- 推送 — 当服务器向 Service Worker 提供信息时调用它。
- 通知 — 这是 Service Worker 或web应用程序中向用户显示信息的脚本的操作。
推送 ( Push )
实现 Push 一般的三个步骤:
- UI — 添加必要的客户端逻辑来订阅推送的用户。这是 Web 应用程序 UI 需要的 JavaScript 逻辑,以便用户能够自己注册来推送消息。
- 发送推送通知 — 在服务器上实现 API 调用,该调用触发到用户设备的推送消息。
- 接受推送消息 — 在推送消息到达浏览器时处理它。
接下来讨论更详细的过程。
浏览器支持检测
首先,我们需要检查当前浏览器是否支持推送消息,可以通过两个简单的检查来判断是否支持推送消息:
- 检查
navigator
对象上的serviceWorker
- 检查
window
对象上的PushManager
代码如下:
注册 Service Worker
如果浏览器支持该功能,下一步骤就是注册 Service Worker。
如何注册 Service Worker,上一篇文章 JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 里面就有讲过了。
请求许可
Service Worker 注册后,我们就可以开始订阅该用户。为此,我们需要得到用户的许可才能给用户发送推送消息。
获得权限的 API 相对简单,但是缺点是,API 已经 从回调更改为返回 Promise。这就引入了一个问题:我们不知道当前浏览器实现了 API 的哪个版本,因此必须同时实现和处理这两个版本,如下:
调用 Notification.requestpermission()
会在浏览器显示如下提示:
一旦权限被授予、关闭或阻塞,我们将会接收分别对应的一个字符串:granted
、default
或 denied
。
请记住,如果用户单击了 Block
按钮,你的 Web 应用程序将无法再次请求用户的权限,直到他们通过更改权限状态手动 “解除” 你的应用程序的权限,此选项隐藏在设置面板中。
使用 PushManager 订阅用户
一旦注册了 Service Worker 并获得了许可,就可以在注册 Service Worker 时通过调用registration.pushManager.subscribe()
订阅用户。
整个代码片段可如下(包括注册 Service Worker):
registration.pushManager.subscribe(options)
接受一个 options
对象,它包含必要参数和可选参数:
- userVisibleOnly: 布尔值,表示返回的推送订阅将只能被用于对用户可见的消息。
- **applicationServerKey:**推送服务器用来向客户端应用发送消息的公钥。该值是应用程序服务器生成的签名密钥对的一部分,可使用在 P-256 曲线上实现的椭圆曲线数字签名(ECDSA)。可以是
DOMString
或ArrayBuffer
。
你的服务器需要生成一对 application server keys ——这些密钥也称为 VAPID 密钥,它们是服务器特有的。它们是一对公钥和私钥。私钥秘密存储在你的终端,而公钥则与客户端交换。这些键允许推送服务知道哪个应用服务器订阅了某个用户,并确保触发该用户的推送消息的服务器是同一台服务器。
你只需要为应用程序创建一次 私钥/公钥对,一种方法是访问 https://web-push-codelab.glit…。
在订阅用户时,浏览器将 applicationServerKey
(公共密钥)传递给推送服务,这意味着推送服务可以将应用程序的公共密钥绑定到用户的 PushSubscription
。
流程大概是这样的:
- 加载 Web 应用程序后,通过调用
subscribe()
方法传递服务器密钥。 - 浏览器向一个推送服务发出网络请求,该服务将生成一个端点,将该端点与密钥关联,并将该端点返回给浏览器。
- 浏览器将把这个端点添加到
PushSubscription
对象中,该对象通过 返回subscribe()
的 promise 得到 。
之后,只要你想推送消息,都需要创建一个 授权头(Authorization header),其中包含使用应用服务器的私钥签名的信息。当推送服务接收到发送推送消息的请求时,它将通过查找已链接到该特定端点的公钥(第二步)来验证消息头。
PushSubscription 对象
PushSubscription
对象包含向用户的设备发送推送消息所需的所有信息,如下:
{"endpoint": "https://domain.pushservice.com/some-id","keys": {"p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=","auth":"FPssMOQPmLmXWmdSTdbKVw=="}
}
- endpoint: 推送服务的 URL,要触发推送消息,post请求。
- keys: 该对象包含用于加密通过推送消息发送的消息数据的值。
一旦用户被订阅,并且你有了 PushSubscription
对象,就需要将其发送到服务器。在服务器上,你存对数据库的订阅,从现在开始使用它向该用户发送推送消息。
发送推送消息
当你想向用户发送推送消息时,首先需要的是推送服务。通过 API 调用告诉服务器你现在需要要发送什么数据、向谁发送消息以及关于如何发送消息的任何标准。通常,这个 API 调用是在服务器上完成的。
推送服务
推送服务是接收请求、验证请求并将推送消息发送到对应的浏览器。
请注意
,推送服务不是由你管理的——它是一个第三方服务。你的服务器是通过 API 与 推送服务通信的服务器。推送服务的一个例子是 谷歌的FCM。
推送服务处理所有繁重的任务,比如,如果浏览器处于脱机状态,推送服务会在发送相应消息之前对消息进行排队,等待浏览器的再次联机。
每个浏览器都可以使用他们想要的任何推送服务,这是开发人员无法控制的。然而,所有的推送服务都有相同的 Api,所以这不会造成实现困难。
为了获得处理推送消息请求的 URL,需要检查 PushSubscription
对象中端点的存储值。
推送服务 API
推送服务 API 提供了一种向用户发送消息的方法。API 是 Web 协议,它是一个 IETF 标准,定义了如何对推送服务进行 API 调用。
使用推送消息发送的数据必须加密。这样,就可以阻止推送服务查看发送的数据。这一点很重要,因为浏览器决定使用哪个推送服务(它可能正在使用不受信任且不够安全的某个推送服务)。
对于每条推送消息,也可以给出如下说明:
- TTL — 定义消息在删除和未发送之前应排队多长时间。
- 优先级 — 定义每个消息的优先级,推送服务只发送高优先级的消息,确保用户因为一些突发情况关机或者断电等。
- 主题 — 为推送消息提供一个主题名称,该名称将用相同的主题替换挂起的消息,这样,一旦设备处于活动状态,用户就不会收到过时的信息。
浏览器中的推送事件
一旦按照上面的解释将消息发送到推送服务,该消息将处于挂起状态,直到发生以下情况之一:
- 设备上线
- 消息由于 TTL 而在队列上过期
当推送服务传递消息时,浏览器将接收它,解密它,并在的 Service Worker 中分派一个 push
事件。这里最重要的是,即使 Web 页面没有打开,浏览器也可以执行你的 Service Worker。流程如下:
- 推送消息到达浏览器,浏览器解密它
- 浏览器唤醒 Service Worker
push
事件被分发给 Service Worker
设置推送事件监听器的代码应该与用 JavaScript 编写的任何其他事件监听器类似:
self.addEventListener('push', function(event) {if (event.data) {console.log('This push event has data: ', event.data.text());} else {console.log('This push event has no data.');}
});
需要了解 Service Worker 的一点是,你没有 Service Worker 代码运行时长的控制权。浏览器决定何时将其唤醒以及何时终止它。
在 Service Worker 中,event.waitUntil(promise)
,告诉浏览器在该promse 未完成之前工作将一直进行中,如果它希望完成该工作,它不应该终止 Sercice Worker。
以下是一个处理 push
事件的例子:
self.addEventListener('push', function(event) {var promise = self.registration.showNotification('Push notification!');event.waitUntil(promise);
});
调用 self.registration.showNotification()
将向用户显示一个通知,并返回一个 promise,该 promise 在显示通知后将执行 resolve 方法。
showNotification(title, options)
方法可以根据需要进行可视化调整,title
参数是一个字符串,而参数 options
是一个对象,内容如下:
{"//": "Visual Options","body": "<String>","icon": "<URL String>","image": "<URL String>","badge": "<URL String>","vibrate": "<Array of Integers>","sound": "<URL String>","dir": "<String of 'auto' | 'ltr' | 'rtl'>","//": "Behavioural Options","tag": "<String>","data": "<Anything>","requireInteraction": "<boolean>","renotify": "<Boolean>","silent": "<Boolean>","//": "Both Visual & Behavioural Options","actions": "<Array of Strings>","//": "Information Option. No visual affect.","timestamp": "<Long>"
}
可以了解更多的细节,每个选项在这里做什么- https://developer.mozilla.org…
当有紧急、重要和时间敏感的信息需要与用户分享时,推送通知是吸引用户注意力的好方法。
例如,我们在 SessionStack 计划利用推送通知让我们的用户知道他们的产品何时出现崩溃、问题或异常。这将让我们的用户立即知道发生了什么错误。然后,他们可以将问题作为视频回放,并利用我们的库收集的数据(如DOM更改、用户交互、网络请求、未处理的异常和调试消息)查看发生在最终用户身上的所有事情。
原文:
https://blog.sessionstack.com…
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug。
你的点赞是我持续分享好东西的动力,欢迎点赞!
一个笨笨的码农,我的世界只能终身学习!
更多内容请关注公众号《大迁世界》!
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!
JavaScript是如何工作的: Web推送通知的机制相关推荐
- JavaScript是如何工作的:Web推送通知的机制
这是专门探索 JavaScript 及其所构建的组件的系列文章的第9篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! JavaScr ...
- 如何使用 PHP 发送 Web 推送通知
Web Push API 允许您向 Web 浏览器和 API 发送推送通知.虽然大部分逻辑发生在浏览器中,但您仍然需要一个服务器端组件来生成通知.以下是使用 PHP 实现 Web 推送后端的方法. 先 ...
- firebase推送_Firebase Web推送通知
firebase推送 This article will help you implement firebase web push notifications without using any pa ...
- android自定义push通知_20个海外Web和App推送通知服务工具
在App和网站中使用推送通知有不同的原因,并且在提高流量和与客户互动方面有很多好处.推送通知是一种交互式可点击消息,可将访问者直接引导至你的网站.它们可以帮助你以指数方式增加流量和参与率.因此,营销人 ...
- 20个海外Web和App推送通知服务工具(一)
在App和网站中使用推送通知有不同的原因,并且在提高流量和与客户互动方面有很多好处.推送通知是一种交互式可点击消息,可将访问者直接引导至你的网站.它们可以帮助你以指数方式增加流量和参与率.因此,营销人 ...
- 如何使用WordPress推送通知和智能通知插件
什么是推送通知? 推送通知是由应用程序和网站传输的简短信息性消息,可以随时传达给受众. 与当访客在网站或浏览器上时显示的弹出窗口不同,即使访客不在网站上,也会显示推送通知. 推送通知使您可以向启用了用 ...
- iOS上简单推送通知(Push Notification)的实现
iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...
- firebase 推送_如何使用Firebase向Web应用程序添加推送通知?
firebase 推送 by Leonardo Cardoso 由莱昂纳多·卡多佐(Leonardo Cardoso) 如何使用Firebase向Web应用程序添加推送通知? (How to add ...
- 【PWA】web推送技术
伴随着今年 Google I/O 大会的召开,一个很火的概念–Progressive Web Apps 诞生了.这代表着我们 web 端有了和原生 APP 媲美的能力.但是,有一个很重要的痛点,web ...
最新文章
- 干掉SQL中的like,我用es后运营小姐姐们都说好快!
- ant-design-pro Login 组件 实现 rules 验证
- 2018年东北农业大学春季校赛 F wyh的集合【思维】
- 操作多个表_5_记录匹配不上
- 今天携程出事了:让我们来学习下http的响应码
- 第5课 开心的金明《聪明人的游戏:信息学探秘.提高篇》(优化空间)
- 写给准备学习Linux的人
- 嵌套访问_利用Idea重构功能及Java8语法特性——优化深层嵌套代码
- 李飞飞新动向:创建斯坦福“以人为本AI研究院”,担任共同院长
- windows下安装完MySQL,为什么cmd不识别命令?
- 计算机基础知识excel视频教程,郭安定Excel2003全套教程
- FFmpeg系列-2-命令行工具之FFmpeg
- django错误-models.E028:::同一个表名在多个Model的db_table中使用
- 学习笔记-零基础学习人工智能(0)
- 国产可视化引擎PIE-Earth助力实景三维中国建设
- PYNQ小白学习记录--开箱调用摄像头实现人脸识别
- Oracle之创建定时任务
- linux网卡通信延迟高,Linux性能优化-网络请求延迟变大
- MySQL中CONCAT()函数用法详解
- sublime下载gbk编码