为什么我的 Service Worker 的推送事件数据/负载为空？

Question

我已经多次尝试让桌面通知在 Chrome 中正常工作，但我还没有找到一个文档来源来涵盖使桌面通知正常工作的分步过程。我遇到的每个资源要么过时，要么与其他资源不一致。

我面临的问题是：一旦 Service Worker 收到

push

事件，

self.addEventListener('push', function (event) {
    console.log(event);
    event.waitUntil(
        self.registration.showNotification(
            event.data.title,
            {
                body: event.data.body,
                icon: event.data.icon,
                tag: event.data.tag
            }));
});

event.data

为空。我希望它包含我在 POST 请求中以 JSON 形式发送的数据，如下所示：

POST https://fcm.googleapis.com/fcm/send HTTP/1.1
Content-Type: application/json
Authorization: key=<FCM Server Key here>

{
    "data": {
        "title": "Foo",
        "body": "Bar"
    },
    "to": "<recipient ID here>"
}

奇怪的是，注册脚本得到一个看起来像

https://android.googleapis.com/gcm/<recipient ID here>

的“订阅端点”，但我无法让 POST 通过，除非我遵循网络上的其他示例，将收件人 ID 作为

to

我发送的 JSON 中的字段。

在我遇到的所有示例中，有多个 URL 正在进行 POST 调用：

https://fcm.googleapis.com/fcm/send
https://android.googleapis.com/gcm/send
https://gcm-http.googleapis.com/gcm/send

我已经尝试了这三种方法，每次尝试都将收件人放在 API 地址的末尾（例如

https://fcm.googleapis.com/fcm/send/<recipient ID here>

，或者在 JSON 正文中）。我的目标是从我发送的数据中获取 Foo 和 Bar进入 Service Worker 的

self.registration.showNotification(

方法。

为什么

event.data

为空？任何人都可以向我指出一个从头到尾支持 FCM 而不是 GCM 的完整指南吗？任何帮助将不胜感激。

Answer 1

您可能需要检查文档中的以下声明，

Chrome 中当前 Push API 实现的一个缺点是您无法通过推送消息发送任何数据。不，没什么。其原因是，在未来的实现中，有效负载数据必须在发送到推送消息端点之前在服务器上进行加密。这样，无论推送提供商是什么，端点都将无法轻松查看推送消息的内容。这还可以防止其他漏洞，例如 HTTPS 证书验证不佳以及服务器和推送提供商之间的中间人攻击。但是，尚不支持此加密，因此与此同时，您需要执行提取以获取填充通知所需的信息。

进一步阅读，您可能想尝试使用

fetch()

从 API 获取数据，将响应转换为对象并使用它来填充通知。同样的方法也被用在这个相关的SO post中。

除此之外，您可能还想检查@Indici Indici 在thread中的响应，其中他指出推送事件不包含数据值；相反，它包含包含信息的不同事件。以下是作为可能的解决方法提供的示例代码，用于在“推送”事件中在 Firebase 服务工作线程中接收通知：

self.addEventListener('push', function(event) {
  if (event.data) {
    const dataText = event.data.text();
    notificationTitle = 'Custom Notification';
    notificationOptions.body = 'Message: ' + `${dataText}`;
    var title = event.data.notification.title;
    var message = event.data.notification.message;
    var icon = event.data.notification.icon;
    var notificationTag = event.data.notification.tag;
  }
}

Answer 2

对于接收数据需要：

self.addEventListener('push', function(event) {
var jsonData = JSON.parse(event.data.text());
// jsonData -> here is you data 
const options = {
    body: 'set you body',
    icon: 'img/apple-icon-120x120.png',
    badge: 'img/apple-icon-120x120.png'
};
event.waitUntil(self.registration.showNotification(jsonData.data.title, options)); 
});

Answer 3

showNotification方法中需要添加的参数如下：

self.registration.showNotification(
        event.data.title,
        {
            body: event.data.body,
            icon: event.data.icon,
            tag: event.data.tag,
            data: { url: 'www.mysite.com' } //If you do not add this line, the data field will be empty.
        }));