发送推送通知：渐进式 Web 应用程序

渐进式 Web 应用程序（PWA）是一种可以让 Web 应用程序获得本机应用程序的功能的技术。其中之一是远程推送通知技术。这使得用户在不打开应用程序的情况下能够接收通知。本文将向程序员介绍如何使用渐进式 Web 应用程序发送推送通知。

原理

PWA 中的推送通知常使用两种技术：Web Push 和 Notification API。

Web Push

Web Push 是一种基于浏览器的推送通知技术。它使用了一个远程服务器来推送消息。当用户打开浏览器并连接到 Web 应用程序时，远程服务器将发送一条请求，请求浏览器弹出一条通知。由于 Web Push 的消息是高度定制化的，因此它们可以显示在锁定屏幕或操作系统通知栏中。

Notification API

Notification API 是一种 Web API，可以让 Web 应用程序发送本机通知。使用 Notification API 的开发人员可以发送自定义通知，其中包括标题、正文和点击通知所需的操作。

如何发送推送通知

要发送推送通知，需要使用一个远程服务器来触发消息。在将 Web 应用程序转换为 PWA 之后，你应该首先通过 Web Push 方法向用户收集推送订阅，并将其注册到服务器上。之后，可以使用 WebSocket 或长轮询来保持与服务器的连接，以便在有新通知时可以及时推送通知。在 Notification API 中，应该先检查浏览器是否支持通知，如果支持，则要求用户授权通知，并向用户显示一条通知。

// Web Push
// 订阅用户的推送订阅
webPushManager.subscribe().then(subscription => {
  // 发送通知
  // 远程服务器代码
});

// Notification API
// 检查浏览器是否支持通知
if ('Notification' in window) {
  // 请求授权通知
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // 显示通知
      const notification = new Notification('通知标题', {
        body: '通知正文',
        icon: 'app-icon.png'
      });
    }
  });
}

总结

在渐进式 Web 应用程序中，推送通知是一项非常有用的功能。开发人员需要使用 Web Push 和 Notification API 来实现这一目标。Web Push 是一种基于浏览器的技术，使用远程服务器将推送通知发送到 Web 应用程序。Notification API 是一种 Web API，可以让 Web 应用程序发送本机通知。开发人员应先驱动 Web 应用程序转换为 PWA，并收集推送订阅，然后优雅地发送推送通知。