服务工作者 - 从我的服务器获取推送数据

Question

我正在使用我的服务器发送网络通知，并在我的客户端使用服务工作人员显示它们。

发送通知。我正在使用this php library

要接收它们，请使用以下代码：

self.addEventListener('push', function(event) {
  console.log(event);
});

问题在于我不知道如何向推送事件发送消息标题和正文等额外信息。我在从服务器发送消息时尝试添加有效负载属性，但事件数据为空：

知道我的错误/我如何接收服务器发送的信息？

Answer 1

首先使用web push生成公钥和私钥。

然后使用公钥注册您的服务工作者。

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}




     navigator.serviceWorker.register('/sw.js',{scope: '/'})
    .then(function(swReg) {

      swRegistration = swReg;

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
     swRegistration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: applicationServerKey
        })
    })

应该给你一个end_point - p256dh - auth。

使用此功能通过网络推送发送通知。

Webpush.payload_send(
                    endpoint: registration_token["endpoint"],
                    message: JSON.generate(data),
                    p256dh: registration_token["keys"]["p256dh"],
                    auth: registration_token["keys"]["auth"],
                        vapid: {
                                public_key: public_key,
                                private_key: private_key
                })