JavaScript是如何工做的:Web推送通知的机制

时间  2019-11-10 标签 javascript 如何 web 推送 通知 机制
阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

为了保证的可读性，本文采用意译而非直译。javascript

这是专门探索 JavaScript 及其所构建的组件的系列文章的第9篇。html

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！前端

若是你错过了前面的章节，能够在这里找到它们：java

  1. JavaScript是如何工做的：引擎，运行时和调用堆栈的概述！
  2. JavaScript是如何工做的：深刻V8引擎&编写优化代码的5个技巧！
  3. JavaScript如何工做:内存管理+如何处理4个常见的内存泄漏 !
  4. JavaScript是如何工做的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式！
  5. JavaScript是如何工做: 深刻探索 websocket 和HTTP/2与SSE +如何选择正确的路径！
  6. JavaScript是如何工做的:与 WebAssembly比较 及其使用场景 !
  7. JavaScript是如何工做的:Web Workers的构建块+ 5个使用他们的场景
  8. JavaScript 是如何工做的：Service Worker 的生命周期及使用场景

推送通知在移动端很是常见。在 Web 端，尽管开发人员对其功能的需求很高，但出于某些缘由，推送通知被引入 Web 的时间比较晚。git

简介

Web 推送通知容许用户在 Web 应用程序须要更新时选择是否接收更新消息，目的是在从新吸引用户群注意的更新信息一般是对用户来讲有趣、重要、实时的内容。github

推送通知的基础是咱们 上一篇 讲的 Service Workers。web

在这种状况下，使用 Service Worker 的缘由是它们在后台工做。这对于推送通知很是有用，由于这意味着只有当用户与通知自己进行交互时，它们的代码才会被执行。数据库

推送和通知

推送和通知都有各自的 API编程

  • 推送 — 当服务器向 Service Worker 提供信息时调用它。
  • 通知 — 这是 Service Worker 或web应用程序中向用户显示信息的脚本的操做。

推送 ( Push )

实现 Push 通常的三个步骤:segmentfault

  1. UI — 添加必要的客户端逻辑来订阅推送的用户。这是 Web 应用程序 UI 须要的 JavaScript 逻辑，以便用户可以本身注册来推送消息。
  2. 发送推送通知 — 在服务器上实现 API 调用，该调用触发到用户设备的推送消息。
  3. 接受推送消息 — 在推送消息到达浏览器时处理它。

接下来讨论更详细的过程。

浏览器支持检测

首先，咱们须要检查当前浏览器是否支持推送消息，能够经过两个简单的检查来判断是否支持推送消息:

  1. 检查 navigator 对象上的 serviceWorker
  2. 检查 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。

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。

clipboard.png

联系我们 沪ICP备13005482号-10