[译] JavaScript 是如何工作的：Web 推送通知的机制

• 原文地址：How JavaScript works: the mechanics of Web Push Notifications
• 原文作者：Alexander Zlatkov
• 译文出自：掘金翻译计划
• 本文永久链接：github.com/xitu/gold-m…
• 译者：Starrier
• 校对者：allen、老教授

这是专门研究 JavaScript 及其构建组件系列文章的第 9 章。在识别和描述核心元素的过程中，我们还分享了我们在构建一个轻量级 JavaScript 应用程序 SessionStack 时使用的一些经验规则，该应用程序需要健壮、高性能，可以帮助用户实时查看和重现它们的 Web 应用程序缺陷。

如果你错过了前几章，你可以在这里找到它们：

1. [译] JavaScript 是如何工作的：对引擎、运行时、调用堆栈的概述
2. [译] JavaScript 是如何工作的：在 V8 引擎里 5 个优化代码的技巧
3. [译] JavaScript 是如何工作的：内存管理 + 处理常见的4种内存泄漏
4. [译] JavaScript 是如何工作的: 事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧
5. [译] JavaScript 是如何工作的：深入剖析 WebSockets 和拥有 SSE 技术 的 HTTP/2，以及如何在二者中做出正确的选择
6. [译] JavaScript 是如何工作的：与 WebAssembly 一较高下 + 为何 WebAssembly 在某些情况下比 JavaScript 更为适用
7. [译] JavaScript 是如何工作的：Web Worker 的内部构造以及 5 种你应当使用它的场景
8. [译] JavaScript 是如何工作的：Web Worker 生命周期及用例

今天，我们来关注 Web 推送通知：我们将了解它们的构建组件，探索发送/接收通知的流程，最后分享 SessionStack 是如何利用这些来构建新产品的特性。

推送通知在手机领域被广泛使用。由于某种原因，它们很晚才进入 Web 领域，尽管开发人员呼唤了很久。

概述

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

推送基于我们在上一篇文章中详细讨论过的 Service Worker。

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

推送和通知

推送和通知是两种不同的 API。

• 推送 —— 它在服务器端将消息推送给 Service Worker 时被调用
• 通知 —— 这是 Service Worker 或 web 应用程序中向用户显示信息脚本的操作。

推送

实现推送有三个步骤：

1. UI —— 添加必要的客户端逻辑来让用户订阅推送，这是你的 Web 应用程序 UI 需要的 JavaScript 逻辑，这样用户就能给自己注册从而可以收到消息推送。
2. 发送推送消息 —— 在服务器上实现 API 调用，该调用将触发对用户设备的推送消息。
3. 接受推送消息 —— 一旦推送消息到达浏览器，就进行处理。

现在我们将更详细地描述整个过程。

浏览器支持检测

首先，我们需要检查当前浏览器是否支持推送消息。我们可以通过两个简单的方法检查是否支持推送消息：

1. 检查 navigator 对象上的 serviceWorker
2. 检查 window 对象上的 PushManager

两种检查看起来都是这样的：

function requestPermission() {
  return new Promise(function(resolve, reject) {
    const permissionResult = Notification.requestPermission(function(result) {
      // Handling deprecated version with callback.
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  })
  .then(function(permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error('Permission not granted.');
    }
  });
}

function subscribeUserToPush() {
  return navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    var subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: btoa(
        'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'
      )
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    console.log('PushSubscription: ', JSON.stringify(pushSubscription));
    return pushSubscription;
  });
}

registration.pushManager.subscribe(options) 接受一个 options 对象，它包含必要参数和可选参数：

• userVisibleOnly：布尔值指示返回的推送订阅将仅用于对用户可见的消息。它必须设置为 true，否则你会得到一个错误（这有历史原因）。
• applicationServerKey：Base64-encoded DOMString 或者 ArrayBuffer 包含推送服务器用来验证应用服务器的公钥。

你的服务器需要生成一对应用程序服务器密钥 —— 也称为 VAPID 密钥，对于你的服务器来说，它们是唯一的。它们是一对公钥和私钥。私钥被秘密存储在你的终端，而公钥则与客户端交换。这些密钥允许推送服务知道哪个应用服务器订阅了用户，并确保它是触发向该特定用户推送消息的相同服务器。

你只需要为应用程序创建一次私钥/公钥对。做到这一点的方法是去完成这个 —— web-push-codelab.glitch.me/。

浏览器在订阅用户时将 applicationServerKey（公钥）传递给推送服务，这意味着推送服务可以将应用程序的公钥绑定到用户的 PushSubscription 中。

情况是这样的：

• 你的 web app 被加载时，你可以调用 subscribe() 来传入你的 server 密钥。
• 浏览器向生成端点的推送服务发出请求，将此端点与该键关联并将端点返回给浏览器。
• 浏览器将此端点添加到 PushSubscription 对象中，该对象通过 subscribe() 的 promise 返回。

之后，无论你想何时发送推送消息，你都需要创建一个包含使用应用程序服务器的专用密钥签名信息的 Authorization header。当推送服务收到发送推送消息的请求时，它将通过查找已经连接到该特定端点的公钥来验证头（第二步）。

推送对象

PushSubscription 包含用户设备发送推送消息所需的所有信息。就像这样：

{
  "endpoint": "https://domain.pushservice.com/some-id",
  "keys": {
    "p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=",
    "auth":"FPssMOQPmLmXWmdSTdbKVw=="
  }
}

endpoint 是推送服务的 URL。要触发推送消息，请对此 URL 发送 POST 请求。

这里的 keys 对象的值是用来加密推送消息带过来的消息数据。

一旦用户被订阅并且你有 PushSubscription，你需要将它发送到你的服务器。在那里（在服务器上），你将这个订阅存到数据库中，从今以后如果你要向该用户推送消息就使用它。

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.');
  }
});

self.addEventListener('push', function(event) {
  var promise = self.registration.showNotification('Push notification!');

  event.waitUntil(promise);
});

{
  "//": "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>"
}