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

Kate Jeffreys
Kate Jeffreys

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

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

Android 设备上的通知。
。 <ph type="x-smartling-placeholder">
</ph>
MacBook 上的通知。

以前,网络浏览器必须通过发出请求,在服务器和客户端之间发起信息交换。另一方面,借助网络推送技术,您可以将服务器配置为适时发送适合您应用的通知。推送服务会为每个订阅的 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 并订阅 Push

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

    客户端代码:

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

    客户端代码:

    Notification.requestPermission();
  3. 要启用推送通知,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 创建一个唯一的网址。此网址称为订阅端点。

  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. 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);
  2. 发送到订阅端点的通知会触发将 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);
    })
  3. 用户与通知互动,使 Web 应用处于活动状态(如果尚未激活)。

后续步骤

下一步,实现推送通知!

我们创建了一系列 Codelab,用于指导您完成此流程的每一步。