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

Kate Jeffreys
Kate Jeffreys

通知会向用户显示少量信息。网站应用可以使用通知告知用户重要的时效性事件或用户需要执行的操作。

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

Android 设备上的通知。
MacBook 上的通知。

传统上,网络浏览器必须通过发出请求来发起服务器与客户端之间的信息交换。另一方面,借助网站推送技术,您可以配置服务器,以便在对应用有意义时发送通知。推送服务会为每个已订阅的服务工作器创建唯一的网址。向服务工作器的网址发送消息会在该服务工作器上引发事件,提示其显示通知。

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

创建和发送通知

使用 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 可以在后台运行,即使您的应用未显示在屏幕上,也能显示通知。

  • 借助推送技术,您可以将服务器配置为在适合应用时发送通知。推送服务会为每个已订阅的服务工件创建唯一的网址。向服务工作器的网址发送消息会在该服务工作器上引发事件,提示其显示通知。

在以下示例流程中,客户端注册了服务工件并订阅了推送通知。然后,服务器会向订阅端点发送通知。

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

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

  1. 客户端应用向 ServiceWorkerContainer.register() 注册服务工作器。当客户端处于非活动状态时,已注册的服务工作器将继续在后台运行。

    客户代码:

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

    客户代码:

    Notification.requestPermission();
  3. 如需启用推送通知,服务工件会使用 PushManager.subscribe() 创建推送订阅。在调用 PushManager.subscribe() 时,服务工件会将应用的 API 密钥作为标识符提供。

    客户代码:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Firebase Cloud Messaging 等推送服务采用订阅模式。当服务工作器通过调用 PushManager.subscribe() 订阅推送服务时,推送服务会创建一个专属于该服务工作器的网址。该网址称为订阅端点

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

    客户代码:

    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 部分:发送通知

  1. 网络服务器向订阅端点发送通知。

    服务器代码:

    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);
  2. 发送到订阅端点的通知会触发以服务工作为目标的推送事件。服务工件会接收消息,并将其作为通知显示给用户。

    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);
    })
  3. 用户与通知互动,使 Web 应用处于活跃状态(如果尚未处于活跃状态)。

后续步骤

下一步是实现推送通知!

我们创建了一系列 Codelab,以引导您完成流程中的每一步。