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

【问题标题】：Why is my Service Worker's push event data/payload null?为什么我的 Service Worker 的推送事件数据/有效负载为空？
【发布时间】：2017-02-21 18:38:43
【问题描述】：

我已多次尝试让桌面通知在 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 设置为 @我发送的 JSON 中的 987654326@ 字段。

在我遇到的所有示例中，有多个 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 和 从我发送到服务人员的self.registration.showNotification( 方法的数据中删除。

为什么event.data 为空？谁能指出我从头到尾的完整指南，它有利于 FCM 而不是 GCM？任何帮助将不胜感激。

【问题讨论】：

您好……找到答案了吗？
我遇到了同样的问题。你搞清楚了吗？
您好，找到答案了吗？

标签： javascript json google-cloud-messaging http-post firebase-cloud-messaging

【解决方案1】：

您可能想检查documentation中的以下声明，

当前在 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;
  }
}

【讨论】：

如果数据不是来自任何 API 而只是 firebase 发送请求正文怎么办？和@Conner Harkness 提到data 为空，那么他为什么需要if (event.data) 条件？

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

【讨论】：