我正在尝试将 service worker 与 Firebase 结合使用以在 chrome 上实现推送通知。我的网络应用程序中有一个 list 文件和一个 sw.js 文件。我在 Firebase 中创建了一个项目，并且测试了注册和发送通知。这一切都很好，除了在收到通知时数据为空。我不明白为什么，也没有任何有用的资源(据我所知!)。 这是我的服务 worker 文件:

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);
  });
}

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

最佳答案

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

Prior to Chrome 50, push messages could not contain any payload data. When the ‘push’ event fired in your service worker, all you knew was that the server was trying to tell you something, but not what it might be. You then had to make a follow up request to the server and obtain the details of the notification to show, which might fail in poor network conditions.

Now in Chrome 50 (and in the current version of Firefox on desktop) you can send some arbitrary data along with the push so that the client can avoid making the extra request. However, with great power comes great responsibility, so all payload data must be encrypted.

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

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 的通知。 希望这对您有所帮助!

关于javascript - 如何将 service worker 与 FCM 一起用于推送通知，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38078701/