如何将 Service Worker 与 FCM 一起用于推送通知

Question

我正在尝试将 Service Worker 与 Firebase 一起使用，以在 chrome 上实现推送通知。我的网络应用程序中有一个清单文件和一个 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 请求：

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以其他方式完成的吗？ 提前致谢。

Answer 1

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

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

Answer 2

根据this，您可以在chrome 50及以上版本发送带有chrome通知版本的数据。

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

现在在 Chrome 50（以及桌面版 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;
});

对于任何可能与特定用户相关的特定通知，您可以在 api url 中传递工人的注册 id 参数并获取该特定 id 的通知。 希望这会有所帮助！