如何使用带有FCM的服务工作者进行推送通知

Question

我正在尝试使用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

根据这个,你可以发送铬版本50以后的Chrome通知版本的数据.

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

现在,在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中传递worker的注册ID参数,并获取该特定id的通知.希望这可以帮助!