在 Web Push Notifications 中使用来自 Push 的数据

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). This is more complex and is currently ~~only~~ supported in Firefox and chrome v50. You can attach a payload to a push message and access it through the data property of the event (https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData）。

负载需要加密（https://datatracker.ietf.org/doc/html/draft-thomson-webpush-encryption-01), using a library to take care of the encryption details is highly suggested (e.g. for 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 请求。例如，假设您的服务器 returns 一个 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

等到Chrome49出来：2016年3月8日

如本文所述：https://www.chromestatus.com/features/5746279325892608、chrome 将实施有效载荷

在 Web Push Notifications 中使用来自 Push 的数据

Use data from Push in Web Push Notifications

html

javascript

push-notification

web-push

push-api