JavaScript关于Web推送通知机制的示例分析-创新互联

这篇文章给大家分享的是有关JavaScript关于Web推送通知机制的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到南川网站设计与南川网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、网站空间、企业邮箱。业务覆盖南川地区。

简介

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

在这种情况下，使用 Service Worker 的原因是它们在后台工作。这对于推送通知非常有用，因为这意味着只有当用户与通知本身进行交互时，它们的代码才会被执行。

推送和通知

推送和通知都有各自的 API

• 推送 — 当服务器向 Service Worker 提供信息时调用它。

• 通知 — 这是 Service Worker 或web应用程序中向用户显示信息的脚本的操作。

推送 ( Push )

实现Push 一般的三个步骤:

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": "",
  "icon": "",
  "image": "",
  "badge": "",
  "vibrate": "",
  "sound": "",
  "dir": "",

  "//": "Behavioural Options",
  "tag": "",
  "data": "",
  "requireInteraction": "",
  "renotify": "",
  "silent": "",

  "//": "Both Visual & Behavioural Options",
  "actions": "",

  "//": "Information Option. No visual affect.",
  "timestamp": ""
}

可以了解更多的细节，每个选项在这里做什么- https://developer.mozilla.org...

当有紧急、重要和时间敏感的信息需要与用户分享时，推送通知是吸引用户注意力的好方法。

例如，我们在 SessionStack 计划利用推送通知让我们的用户知道他们的产品何时出现崩溃、问题或异常。这将让我们的用户立即知道发生了什么错误。然后，他们可以将问题作为视频回放，并利用我们的库收集的数据(如DOM更改、用户交互、网络请求、未处理的异常和调试消息)查看发生在最终用户身上的所有事情。

感谢各位的阅读！关于JavaScript关于Web推送通知机制的示例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

名称栏目：JavaScript关于Web推送通知机制的示例分析-创新互联
URL网址：http://6mz.cn/article/dphspi.html