Javascript 如何将service worker与FCM一起用于推送通知

我正在尝试使用带有Firebase的service worker在chrome上实现推送通知。我的web应用程序中有一个清单文件和一个sw.js文件。我在Firebase中创建了一个项目，并测试了注册和发送通知。除了接收通知时数据为空之外，这一切都可以正常工作。我不明白为什么，也没有任何有用的资源（据我所知！）。 这是我的服务人员文件：

self.addEventListener('push', function(event) {
  console.log('Push message', event);
  var title = 'Push message';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: 'The Message',
      icon: 'images/logo.svg',
      tag: 'my-tag'
  }));
});

这是我的main.js文件：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
    registration.pushManager.subscribe({
      userVisibleOnly: true
    }).then(function(sub) {
      console.log('endpoint:', sub.endpoint);
    }).catch(function(e) {

    });
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

Manifest.json：

{
  "name": "APPNAME",
  "gcm_sender_id": "SENDERID"
}

卷曲请求：

curl --header "Authorization: key=APIKEY" -application/json" https://fcm.googleapis.com/fcm/send -d "{\"registration_ids\":[\"REGISTRATIONID\"],\"notification\":{\"title\":\"test\",\"body\":\"testing\"},\"data\":{\"title\":\"erse\"}}"

sw.js推送事件的控制台日志：

我没有收到我在请求中发送的任何数据。这是用firebase的其他方法实现的吗？ 提前感谢。

根据您目前无法向GCM发送任何数据：

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

根据，对于chrome版本50以后的版本，您可以使用chrome通知版本发送数据

在Chrome50之前，推送消息不能包含任何有效负载数据。当您的服务人员中触发“推送”事件时，您所知道的只是服务器试图告诉您一些事情，而不是它可能是什么。然后，您必须向服务器发出后续请求，并获取要显示的通知的详细信息，这可能会在恶劣的网络条件下失败

现在，在Chrome50（以及桌面上当前版本的Firefox）中，您可以在推送过程中发送一些任意数据，这样客户端就可以避免发出额外的请求。然而，强大的力量带来巨大的责任，所以所有有效载荷数据都必须加密

对于当前的实现，您可以执行以下操作：

self.addEventListener('push', function(event) {

var apiPath = '<apiPath>';
event.waitUntil(registration.pushManager.getSubscription().then(function (subscription){
    
    return fetch(apiPath).then(function(response){
        if(response.status !== 200){
            throw new Error();
        }

        return response.json().then(function(data){
            var title = data.title;
            var message = data.body;
            var icon = data.icon;
            var tag = data.tag;
            var url = data.url;
            return self.registration.showNotification(title,{
               body: message,
               icon: icon,
               tag: tag,
               data: url
            });
        })
    }).catch(function(err){
        
    })
    
}));
return;
});

self.addEventListener（'push'，函数（事件）{
var apiPath=''；
event.waitUntil（registration.pushManager.getSubscription（）.then（函数（订阅））{
返回fetch（apiPath）.then（函数（响应）{
如果（response.status！==200）{
抛出新错误（）；
}
返回response.json（）.then（函数（数据）{
var title=data.title；
var message=data.body；
var icon=data.icon；
var tag=data.tag；
var url=data.url；
返回self.registration.showNotification（标题{
正文：信息，
图标：图标，
标签：标签，
数据：url
});
})
}).catch（函数（err）{
})
}));
返回；
});

对于任何可能与特定用户相关的特定通知，您可以在api url中传递工作者的注册id参数，并获取该特定id的通知。

---

希望这有帮助

可能重复的我有这个问题，目前黑客对同一个问题。不要认为firebase目前支持serviceWorkers提供的webPush。firebase仅由Chrome应用程序/扩展支持。Chrome的Web推送功能目前使用GCM基础设施工作。非常感谢您通知我现在有可能了什么是apiPath？api path是为您提供通知数据的请求url。