PWA 应用中的 Web Push API 实现推送功能-JavaScript中文网-JavaScript教程资源分享门户

PWA（Progressive Web App）是一种新型的应用开发模式，它充分利用了现代的 Web 技术，提供了类似原生应用的用户体验。其中最重要的一个特性就是推送功能，可以让应用具备类似原生应用的消息通知功能。实现这种推送功能的核心技术就是 Web Push API。

什么是 Web Push API

Web Push API 是一种新型的浏览器技术，可以让服务器直接向浏览器推送通知。当应用程序发生了一些重要的事件，比如新消息、订单更新、系统消息等，服务器可以直接通过 Web Push API 向用户推送通知，用户无需打开应用程序也能知道发生了什么重要的事情。

Web Push API 还提供了丰富的 API，可以让开发者实现更加灵活的推送功能。比如可以针对不同的用户推送不同的消息，可以根据用户的行为实时地更新通知内容等等。

如何使用 Web Push API 实现推送功能

在实现 Web Push API 的推送功能之前，需要先了解与之相关的一些概念。

消息推送的流程

Web Push API 实现消息推送的流程如下：

应用程序向浏览器请求推送权限；
浏览器向用户请求授权；
用户同意授权后，浏览器生成一对密钥，将公钥发送给应用程序；
应用程序将公钥发送给自己的服务器；
当需要向用户推送通知时，服务器使用公钥加密消息，并将加密后的消息发送给浏览器；
浏览器解密并展示通知。

公钥和私钥

公钥和私钥是加密算法中的两个关键概念。公钥用于加密数据，私钥用于解密数据。当使用公钥加密数据时，只有拥有相应私钥的人才能解密数据。因此，服务器使用应用程序提供的公钥加密消息后，只有应用程序才能解密。

Service Worker

Service Worker 是一个特殊的 JavaScript 运行环境，可以让开发者拦截和处理浏览器的网络请求和推送通知。实现 Web Push API 的关键在于 Service Worker，因为消息推送需要在 Service Worker 中处理。

响应推送

当收到推送通知后，浏览器会触发一个事件，然后 Service Worker 就可以在事件处理函数中获取推送消息的详细内容，并显示相应的通知。

示例代码

下面的示例代码演示了如何使用 Web Push API 实现推送功能。注意，为了更清晰地演示代码逻辑，下面的代码没有进行模块化处理。

注册 Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then(function(registration) {
      console.log('Service Worker registered: ', registration);
    })
    .catch(function(error) {
      console.error('Service Worker registration failed: ', error);
    });
}

在应用程序加载时，首先需要注册一个 Service Worker。其中 sw.js 是 Service Worker 脚本的路径。

收到推送通知后的事件处理

self.addEventListener('push', function(event) {
  console.log('Push Notification received');

  const payload = event.data ? event.data.text() : 'no payload';

  const options = {
    body: payload,
    icon: '/icon.png'
  };

  event.waitUntil(self.registration.showNotification('Push Notification', options));
});

这段代码注册了 push 事件处理函数，在收到推送通知时会触发该事件。事件处理函数中，首先使用 event.data 获取推送消息的内容，并设置通知的相关参数，比如通知标题、通知内容和通知图标等。最后调用 self.registration.showNotification 方法展示通知。

navigator.serviceWorker.ready
  .then(function(registration) {
    return registration.pushManager.subscribe({ userVisibleOnly: true });
  })
  .then(function(subscription) {
    console.log('Subscribed:', subscription.endpoint);
    updateSubscriptionOnServer(subscription);
  })
  .catch(function(error) {
    console.error('Subscription failed: ', error);
  });

订阅推送通知的过程比较复杂，需要首先获取 pushManager，然后调用 subscribe 方法订阅通知。其中的参数 userVisibleOnly 表示只有在用户当前可见的情况下才显示通知。

发送推送消息

在服务器端，可以使用 Node.js 的 web-push 模块来发送推送消息。web-push 模块提供了专门的 API 来进行消息加密和推送。

下面的示例代码演示了如何使用 web-push 模块来发送推送消息。

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

// 替换成自己的密钥
const publicKey = 'BObw8BKQfxCZzY3qrl41CtG454xHIAewfRbPJjJ0o95PpBkg78vuSely1mMc5zvcg0d8x4OD4RxjK0o4ytWhOVo';
const privateKey = 'cZzY3qrl41CtG454xHIAewfRbP';

webpush.setVapidDetails('mailto:example@example.com', publicKey, privateKey);

webpush.sendNotification(subscription, payload)
  .then(function() {
    console.log('Push Notification sent');
  })
  .catch(function(error) {
    console.error('Push Notification failed: ', error);
  });

这段代码中，publicKey 和 privateKey 分别代表应用程序的公钥和私钥，需要替换成自己应用的密钥。使用 web-push 模块的 sendNotification 方法向指定的订阅者发送推送通知。

总结

Web Push API 可以让浏览器和应用程序之间实现直接的推送通知，从而提升应用体验。本文介绍了 Web Push API 的工作原理、相关概念以及实现推送功能的示例代码，希望对开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b8acc2add4f0e0ff140f3a