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

Kate Jeffreys

为何要使用推送通知？

通知会向用户显示少量信息。Web 应用可以使用通知来告知用户重要且时效性强的事件，或用户需要采取的操作。

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

传统上，Web 浏览器必须通过发出请求来启动服务器与客户端之间的信息交换。另一方面，借助 Web 推送技术，您可以配置服务器，以便在适合应用的情况下发送通知。推送服务会为每个订阅的服务工作线程创建唯一的网址。向服务工作线程的网址发送消息会在该服务工作线程上引发事件，从而促使它显示通知。

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

创建和发送通知

使用 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 并订阅了推送通知。然后，服务器会向订阅端点发送通知。

客户端和服务工作线程使用 Vanilla JavaScript，无需额外的库。该服务器使用 Node.js 上的 express npm 软件包构建，并使用 web-push npm 软件包发送通知。为了向服务器发送信息，客户端会调用服务器公开的 POST 网址。

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

客户端应用通过 ServiceWorkerContainer.register() 注册服务工作线程。当客户端处于非活跃状态时，已注册的 Service Worker 将继续在后台运行。

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

客户代码：
```
Notification.requestPermission();
```
如需启用推送通知，服务工作线程会使用 PushManager.subscribe() 创建推送订阅。在对 PushManager.subscribe() 的调用中，服务工作器会提供应用的 API 密钥作为标识符。

客户代码：
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
Firebase Cloud Messaging 等推送服务采用订阅模式。当服务工作线程通过调用 PushManager.subscribe() 订阅推送服务时，推送服务会创建一个专属于该服务工作线程的网址。该网址称为“订阅端点”。

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

客户代码：

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 代码：

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，旨在引导您完成流程中的每一步。