Question

我正在尝试使用Service Workers设置Web推送通知的演示。在服务工作者sw.js中，我有以下代码。

var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = 'icon.png';
var tag = 'simple-push-demo-notification-tag';

console.log("Hello!");

self.addEventListener('push', function(event) {
event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
);
});

这没关系。我希望收到我通过推送cURL请求发送的数据，例如title等。有没有办法在此waitUntil方法中获取所有数据？

非常感谢任何帮助。

Answer 1

有两种方法：

推送有效负载（示例https://serviceworke.rs/push-payload.html）。这更复杂，目前仅支持Firefox和chrome v50 。您可以将有效负载附加到推送消息，并通过事件的{em> data 属性（https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData）访问它。

有效负载需要加密（https://tools.ietf.org/html/draft-thomson-webpush-encryption-01），强烈建议使用库来处理加密细节（例如，对于Node.js https://github.com/marco-c/web-push）。

这种情况下的推送事件处理程序将是（假设有效负载是作为JSON消息发送的）：
```
var data = event.data.json();

event.waitUntil(
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon,
    tag: data.tag,
  })
);
```

向服务器发出GET请求以获取数据。例如，假设您的服务器返回JSON响应：

event.waitUntil(
  fetch('someURL')
  .then(response => response.json())
  .then(data =>
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      tag: data.tag,
    })
  )
);

Answer 2

等到Chrome 49问世：2016年3月8日

如本文所述：https://www.chromestatus.com/features/5746279325892608，chrome将实现有效负载

使用来自推送Web推送通知的数据

2 个答案: