此页面由 Cloud Translation API 翻译。

使用推送通知吸引用户和再次互动

Kate Jeffreys

为什么要使用推送通知？

通知会向用户显示小块的信息。Web 应用可以使用通知来告知用户重要的时效性事件或用户需要执行的操作。

通知的外观和风格因平台而异。例如：

以前，网络浏览器必须通过发出请求来发起服务器与客户端之间的信息交换。另一方面，借助网络推送技术，您可以将服务器配置为在适合您的应用时发送通知。推送服务会为每个订阅的 Service Worker 创建唯一的网址。向 Service Worker 的网址发送消息会引发该 Service Worker 上的事件，从而提示其显示通知。

推送通知可以提示用户重新打开应用并根据最新信息使用应用，从而帮助用户充分利用您的应用。

创建和发送通知

使用 Notifications API 创建通知。Notification 对象包含一个 title 字符串和一个 options 对象。例如：

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

当通知处于活动状态时，title 以粗体显示，而 body 包含附加文本。

获取发送通知的权限

如需显示通知，您的应用必须获得用户的许可，才能显示通知：

Notification.requestPermission();

推送通知是如何运作的？

通知的真正强大之处在于将 Service Worker 和推送技术相结合：

即使屏幕上未显示您的应用，Service Worker 也可以在后台运行并显示通知。
利用推送技术，您可以配置服务器，以便在需要您的应用时发送通知。推送服务会为每个订阅的 Service Worker 创建唯一的网址。向 Service Worker 的网址发送消息会引发该 Service Worker 上的事件，从而提示其显示通知。

在以下示例流程中，客户端注册一个 Service Worker 并订阅推送通知。然后，服务器会向订阅端点发送通知。

客户端和 Service Worker 使用没有额外库的原版 JavaScript。服务器使用 Node.js 上的 express npm 软件包构建，并使用 web-push npm 软件包发送通知。为了向服务器发送信息，客户端需要调用服务器已公开的 POST 网址。

第 1 部分：注册 Service Worker 并订阅推送

客户端应用向 ServiceWorkerContainer.register() 注册 Service Worker。当客户端处于非活动状态时，注册的 Service Worker 将继续在后台运行。

客户端代码：
```
navigator.serviceWorker.register('sw.js');
```
客户端向用户请求发送通知的权限。

客户端代码：
```
Notification.requestPermission();
```
为启用推送通知，Service Worker 使用 PushManager.subscribe() 创建推送订阅。在调用 PushManager.subscribe() 时，Service Worker 提供应用的 API 密钥作为标识符。

客户端代码：
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
Firebase Cloud Messaging 等推送服务基于订阅模式运行。当 Service Worker 通过调用 PushManager.subscribe() 订阅推送服务时，推送服务会创建该 Service Worker 的唯一网址。该网址称为订阅端点。

客户端将订阅端点发送到应用服务器。

客户端代码：

navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
    sendToServer(subscription, '/new-subscription', 'POST');
  });
});

服务器代码：

app.post('/new-subscription', (request, response) => {
  // extract subscription from request
  // send 'OK' response
});

第 2 部分：发送通知

Web 服务器向订阅端点发送通知。

服务器代码：

const webpush = require('web-push');

let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };

webpush.sendNotification(subscription, payload, options);

发送到订阅端点的通知会触发以 Service Worker 作为目标的推送事件。Service Worker 接收消息并将其作为通知显示给用户。

Service Worker 代码：

self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})

用户与通知互动，使 Web 应用处于活动状态（如果该应用尚未激活）。

后续步骤

下一步，实现推送通知！

我们创建了一系列 Codelab 来引导您完成该流程的每个步骤。