Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

推送通知概览

简要介绍什么是推送通知、为什么要使用推送通知以及推送通知的工作原理。

Kayce Basques

Matt Gaunt

什么是推送通知？

借助推送消息，即使您的用户未访问您的网站，您也能让他们注意到相关信息。之所以称为推送消息，是因为即使您的用户处于非活跃状态，您也可以向他们“推送”信息。将推送技术与拉取技术进行比较，以便进一步了解此概念。

通知会向用户显示少量信息。网站可以使用通知来告知用户重要且时间紧迫的事件，或用户需要采取的操作。通知的外观和风格因平台而异：

推送消息和通知是两种独立但互为补充的技术。推送是一种技术，可用于将消息从服务器发送给用户，即使他们未主动使用您的网站也是如此。通知是一种用于在用户设备上显示推送信息的技术。您可以在不使用推送消息的情况下使用通知。未来，或许还可以使用没有面向用户的通知的推送消息（静默推送），但目前浏览器不允许这样做。在实践中，它们通常一起使用。非技术用户可能不了解推送消息和通知之间的区别。在此集合中，当我们提及推送通知时，是指推送消息并将其显示为通知的组合。我们所说的推送消息是指推送技术本身。我们所说的通知是指通知技术本身。

为何要使用推送通知？

对于用户而言，推送通知是一种接收及时、相关且准确的信息的方式。
对于您（网站所有者）而言，推送通知是一种提高用户互动度的方式。

推送通知的运作方式

概括来讲，实现推送通知的关键步骤如下：

添加客户端逻辑，以请求用户授予发送推送通知的权限，然后将客户端标识符信息发送到您的服务器，以便存储在数据库中。
添加了将消息推送到客户端设备的服务器逻辑。
添加客户端逻辑以接收已推送到设备的消息，并将其显示为通知。

本页的其余部分将更详细地介绍这些步骤。

获取发送推送通知的权限

首先，您的网站需要获得用户授权才能发送推送通知。此功能应由用户手势触发，例如点击 Do you want to receive push notifications? 提示旁边的是按钮。确认后，请致电 Notification.requestPermission()。用户设备上的操作系统或浏览器可能会显示某种界面，以正式确认用户是否要选择接收推送通知。此界面因平台而异。

让客户端订阅推送通知

获得许可后，您的网站需要启动用户订阅推送通知的流程。此操作通过 JavaScript 使用 Push API 完成。您需要在订阅过程中提供公开身份验证密钥，稍后您将详细了解相关信息。启动订阅流程后，浏览器会向一个名为推送服务的 Web 服务发出网络请求，您稍后也会详细了解该服务。

假设订阅成功，浏览器会返回一个 PushSubscription 对象。您需要长期存储这些数据。通常，这是通过将信息发送到您控制的服务器，然后让服务器将其存储在数据库中来完成的。

1 获取发送推送消息的权限。2. 获取 PushSubscription。3. 将 PushSubscription 发送到您的服务器。

发送推送消息

您的服务器实际上不会直接向客户端发送推送消息。推送服务可以实现此目的。推送服务是由用户浏览器供应商控制的网络服务。当您想向客户端发送推送通知时，需要向推送服务发出 Web 服务请求。您向推送服务发送的 Web 服务请求称为 Web 推送协议请求。Web 推送协议请求应包含：

要在消息中包含哪些数据。
要将消息发送给哪个客户端。
有关推送服务应如何传送消息的说明。例如，您可以指定推送服务在 10 分钟后停止尝试发送消息。

通常，您通过自己控制的服务器发出 Web 推送协议请求。当然，您的服务器不必自行构建原始 Web 服务请求。有些库可以为您处理此问题，例如 web-push-libs。但底层机制是通过 HTTP 发送的网络服务请求。

您的服务器向推送服务发送 Web 推送协议请求，然后推送服务将消息发送到用户的设备。

推送服务会接收您的请求并对其进行身份验证，然后将推送消息路由到相应的客户端。如果客户端的浏览器处于离线状态，推送服务会将推送消息排入队列，直到浏览器上线为止。

每个浏览器都可以使用自己想要的推送服务。作为网站开发者，您无法控制这一点。这不是问题，因为网络推送协议请求是标准化的。换句话说，您不必关心浏览器供应商使用的是哪种推送服务。您只需确保 Web 推送协议请求符合规范即可。除其他事项外，该规范还规定请求必须包含某些标头，并且数据必须以字节流的形式发送。

不过，您需要确保将 Web 推送协议请求发送到正确的推送服务。浏览器在订阅过程中返回给您的 PushSubscription 数据会提供此信息。PushSubscription 对象如下所示：

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

endpoint 的网域本质上是推送服务。endpoint 的路径是客户端标识符信息，可帮助推送服务准确确定要将消息推送给哪个客户端。

keys 用于加密，这将在下文中进行说明。

加密推送消息

您发送到推送服务的数据必须经过加密。这样可防止推送服务查看您发送给客户端的数据。请注意，浏览器供应商会决定使用哪种推送服务，而从理论上讲，该推送服务可能不安全或不保险。您的服务器必须使用 PushSubscription 中提供的 keys 来加密其 Web 推送协议请求。

对网络推送协议请求进行签名

推送服务提供了一种防止他人向您的用户发送消息的方法。从技术上讲，您不必这样做，但 Chrome 上最简单的实现方式需要这样做。在 Firefox 上，此操作是可选的。其他浏览器可能在未来需要此权限。

此工作流程涉及您的应用独有的私钥和公钥。身份验证流程大致如下：

您只需生成一次私钥和公钥。私钥和公钥的组合称为应用服务器密钥。您可能还会看到它们被称为 VAPID 密钥。VAPID 是一项定义此身份验证流程的规范。
当您通过 JavaScript 代码让客户端订阅推送通知时，您需要提供自己的公钥。当推送服务为设备生成 endpoint 时，它会将提供的公钥与 endpoint 相关联。
当您发送 Web 推送协议请求时，您需要使用私钥对某些 JSON 信息进行签名。
当推送服务收到您的 Web 推送协议请求时，会使用存储的公钥对签名信息进行身份验证。如果签名有效，推送服务便知道请求来自具有匹配私钥的服务器。

自定义推送消息的传送方式

Web 推送协议请求规范还定义了一些参数，可用于自定义推送服务尝试向客户端发送推送消息的方式。例如，您可以自定义以下内容：

消息的存留时间 (TTL)，用于定义推送服务应尝试传送消息的时间。
消息的紧急程度，如果推送服务仅传送高优先级消息，则此属性非常有用，可帮助节省客户端的电池电量。
消息的主题，用于将任何具有相同主题的待处理消息替换为最新消息。

接收推送的消息并将其显示为通知

向推送服务发送 Web 推送协议请求后，推送服务会将您的请求排队，直到发生以下事件之一：

客户端上线，推送服务传送推送消息。
消息过期。

当客户端浏览器收到推送消息时，它会解密推送消息数据，并向您的 service worker 调度 push 事件。Service Worker 基本上就是可以在后台运行的 JavaScript 代码，即使您的网站未打开或浏览器已关闭也是如此。在服务工作线程的 push 事件处理程序中，您调用 ServiceWorkerRegistration.showNotification() 以将信息显示为通知。

1. 消息到达设备。2. 浏览器唤醒 service worker。3. 推送事件已分派。

推送通知概览

什么是推送通知？

为何要使用推送通知？