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

【问题标题】：Service worker - get push data from my server服务工作者 - 从我的服务器获取推送数据
【发布时间】：2017-07-09 16:21:33
【问题描述】：

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

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

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

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

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

知道出了什么问题/如何接收服务器发送的信息？

【问题讨论】：

标签： service-worker

【解决方案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
                })

【讨论】：