在 PWA 应用中如何实现服务器推送-FunTeaLearn Online Web Tutorials

Progressive Web App (PWA) 技术是一种基于 Web 技术的应用开发模式，能够使 Web 应用的体验与原生应用相媲美，全面提升了 Web 应用界面、交互、流畅度等方面。其中，服务器推送技术是 PWA 中的一大利器。

什么是服务器推送

服务器推送（Server Push），指的是服务端向客户端自动发送数据的机制，也称为服务器推送技术。这种机制是一种基于 HTTP2 协议的特性，可以通过单一的 TCP 连接，在客户端请求之前主动将资源大小较小、但又必须要加载的资源发送到客户端，从而实现网页加载速度的优化。

PWA 应用中的服务器推送

实际上，PWA 应用中的服务器推送不仅仅是加载速度的优化，还可以用于实现诸如消息推送、更新提醒等功能。

在 PWA 中使用服务器推送，我们需要借助 Service Worker 技术。Service Worker（浏览器线程）可以在后台运行，并与浏览器保持通信。这使得它可以自主地管理应用程序资源，为我们实现服务器推送提供了一个非常好的环境。

需要注意的是，服务器推送需要配合 Web Push API 来使用，Web Push API 是浏览器中用于推送消息的 API。

实现服务器推送的步骤

创建 Service Worker

首先，我们需要创建一个 Service Worker，让它在浏览器中注册以监听特定事件，如 push 等。

// www.javascriptcn.com code example
self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification('推送标题', {
      body: '推送内容',
      icon: '推送图标',
      tag: '推送标识'
    })
  );
});

注册 Service Worker

在 HTML 中注册 Service Worker：

// www.javascriptcn.com code example
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('service-worker.js')
      .then(function(registration) {
        console.log('Service Worker 注册成功');
      })
      .catch(function(error) {
        console.log('Service Worker 注册失败：', error);
      });
  }
</script>

Service Worker 注册成功后，就可以在此期间监听期望的事件。

向浏览器请求推送权限

在应用开始时，我们需要向浏览器请求推送权限。这可以通过以下代码来实现。

// www.javascriptcn.com code example
if ('serviceWorker' in navigator && 'PushManager' in window) {
  Notification.requestPermission().then(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.pushManager.subscribe({
          userVisibleOnly: true, // 用户可见的推送消息
          applicationServerKey: URLBase64ToUint8Array(
            '你的 VAPID 公钥'
          ) // VAPID 公钥
        });
      });
    }
  });
}

function URLBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  var base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

其中，VAPID 公钥可以通过以下方式生成：

$ openssl ecparam -genkey -name prime256v1 -noout -out private.pem
$ openssl ec -in private.pem -pubout -out public.pem
$ cat public.pem | openssl ec -pubin -outform der | openssl base64

推送消息

推送消息需要借助服务器的帮助，这里只提供一个简单的原型，仅供参考。

// www.javascriptcn.com code example
function sendPushMessage(subscription) {
  fetch('https://endpoint.example.com/push', {
    method: 'post',
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      subscription: subscription,
      payload: {
        // 消息内容
      }
    })
  })
    .then(function() {
      console.log('Push 消息推送成功');
    })
    .catch(function(error) {
      console.log('Push 消息推送失败：', error);
    });
}

总结

通过以上步骤，我们就可以在 PWA 中实现服务器推送功能。需要注意的是，在推送消息时，服务器需要根据用户设备、浏览器等信息进行适配，避免推送对用户造成干扰。

同时，推送消息也需要经过用户授权，用户选择恢复默认设置即可关闭。在使用服务器推送功能时，我们需要尽可能减少对用户的干扰，同时保证推送消息的重要性和及时性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/645094eb980a9b385b992a9c

在 PWA 应用中如何实现服务器推送