firebase - 如何在Firebase Messaging Web SDK中使用通知操作

Question

如何在网络上的Firebase Messaging SDK中使用notification actions？

Answer 1

人们尝试这样做时会遇到一些常见的陷阱。

Firebase通知-Firebase Messaging SD的功能
K不代表“Firebase通知”。当您向Firebase实例ID(IID) token 发送推送消息时，您可以使用SDK会查找的“通知”键，如果找到，则为您构造一个通知。这样做的好处是您不必编写任何代码即可显示通知。缺点是，一旦收到通知，您想做复杂的事情或在设备上执行工作，可能会受到限制。因此，要使用 Action ，您一定不要使用此功能。而是使用IID token 和“数据”有效负载调用FCM API。

数据有效负载-数据有效负载有一个限制，即它只能是键值对，该值必须是字符串，即没有数组。这意味着您不能只发送一系列操作并以此构造通知。解决此问题的方法是创建一个JSON字符串，将其发送到FCM API，然后解析并在设备上使用JSON。

时间为例。

调用FCM API

有效负载的格式应如下所示:

{
  "data": {
    "some-data": "Im a string",
    "some-other-data": "Im also a string",
    "json-data": "{\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
  },
  "to": "YOUR-IID-TOKEN"
}

您可以像这样发送curl:

curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type: application/json" -d '{
  "data": {
    "some-data": "Im a string",
    "some-other-data": "Im also a string",
    "json-data": "{\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
  },
  "to": "YOUR-IID-TOKEN"
}' "https://fcm.googleapis.com/fcm/send"

这样，您就可以在服务 worker 的 onBackgroundMessage回调中获取数据。

接收设备上的有效载荷

在服务人员中，我们可能具有以下代码:

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('Message received: ', payload);
});

它将在控制台中打印出以下内容:



请注意，JSON数据仍然只是一个字符串，而不是一个对象。

接下来，我们可以解析JSON数据并检查其正确格式以用作通知 Action 。

我们可以将代码更改为以下内容:

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('Message received: ', payload);
  const parsedJSON = JSON.parse(payload.data['json-data']);
  console.log('Actions:', parsedJSON);
});

这将给出以下日志:



这样，我们最终可以使用以下代码创建通知:

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('Message received: ', payload);
  const parsedJSON = JSON.parse(payload.data['json-data']);
  console.log('Actions:', parsedJSON);

  // Customize notification here
  const notificationTitle = 'Actions Title';
  const notificationOptions = {
    body: 'Actions body.',
    actions: parsedJSON.actions,
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});

现在，您应该收到有关操作的通知:



测验

正如Meggin在评论中指出的那样，如何测试它并不明显，因此有一些指导原则。

最大的痛点是，如果您的网络服务器为您的服务工作程序文件设置了一个缓存头，它将不会在刷新之间进行更新，一种修复此问题的方法是在新标签页中打开您的服务工作程序文件并刷新该页面，直到您服务人员是最新的(这正在查看服务人员的实际源代码)。然后，当您刷新网页时，服务人员将是最新的页面，并且可以通过服务人员递增旁边的数字告诉它已更新。

或者，只需注销服务 worker 的服务 worker 并刷新页面-这应该为您提供最新的服务 worker 。

要测试您的通知，您需要在发送推送消息之前单击用于其他网页的选项卡。

这样做的原因是，如果用户当前在您的页面之一上，则将推送消息发送到页面 onMessage()回调而不是 onBackgroundMessage()回调。