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

Question

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

Answer 1

尝试此操作时，人们会遇到一些常见的陷阱。

1. Firebase通知 - Firebase Messaging SD具有一项功能 K没有作为“Firebase通知”。当您将推送消息发送到Firebase实例ID（IID）令牌时，您可以使用SDK将查找的“通知”键，如果找到，则为您构建通知。这样做的好处是您不必编写任何代码来显示通知。缺点是，如果您希望在收到通知后执行任何复杂操作或在设备上执行工作，则可能会受到限制。所以要使用动作，你不能使用它。而是使用IID令牌和“数据”有效负载调用FCM API。
2. 数据有效负载 - 数据有效负载有一个限制，它只能是键值对，其中值必须是字符串，即没有数组。这意味着您不能只发送一系列操作并使用它构建通知。解决这个问题的方法是创建一个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"

通过它，您将能够在服务工作者的onBackgroundMessage回调中获取数据。

在设备上接收有效负载

在服务工作者中，我们可以使用以下代码：

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

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



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

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

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

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，如何测试它并不明显，所以有一些指导原则。

最大的痛点是，如果您的Web服务器为您的服务工作者文件设置了缓存标头，它将不会在刷新之间更新，一种方法是修复它以在新选项卡中打开您的服务工作文件并刷新页面，直到您的服务工作者是最新的（这是查看服务工作者的实际源代码）。然后，当您刷新网页时，您的服务工作者将是最新的服务工作者，您可以通过服务工作人员递增旁边的数字来更新它。

或者，只需取消注册服务工作者服务工作者并刷新页面 - 这应该为您提供最新的服务工作者。

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

原因是，如果用户当前在您的某个网页上，推送消息将发送到网页onMessage()回调，而不是onBackgroundMessage()回调。

Answer 2

根据Matt的建议，我能够通过我的firebase函数传递给我的服务工作者的内容（包括操作）得到适当的通知，但是我必须通过一个json对象传递我的所有数据，否则它对我不起作用。

这是我的firebase函数代码的样子：

function sendPayload(tokenArray) {

  const payload = {
    "data": {
      "jsondata": "{\"body\":\"Meggin needs help\", \"title\":\"Can you help her make the code work?\",\"actions\": [{\"action\":\"yes\", \"title\":\"Yes\"},{\"action\":\"no\",\"title\":\"No\"}]}"
    }
  };

  admin.messaging().sendToDevice(tokenArray, payload)
    .then(function(response) {
      // See the MessagingDevicesResponse reference documentation for
      // the contents of response.
      console.log("Successfully sent message:", response);
    })
    .catch(function(error) {
      console.log("Error sending message:", error);
    });
}

以下是我的服务工作者的代码：

messaging.setBackgroundMessageHandler(function(payload) {

  console.log('Payload received: ', payload);

  const parsedJSON = JSON.parse(payload.data.jsondata);

  console.log("What does actions look like? " + parsedJSON.actions);
  console.log("What does title look like? " + parsedJSON.title);

  const notificationTitle = parsedJSON.title;
  const parsedBody = parsedJSON.body;
  const parsedActions = parsedJSON.actions;

  // Customize notification here
  const notificationOptions = {
    body: parsedBody,
    actions: parsedActions,
  };

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

值得注意的是，帮助我解决的一个主要障碍就是了解如何测试推送通知和服务工作者！

除非浏览器已关闭，否则您实际上无法看到我的通知，因此很明显，您无法观看控制台。

但是，一旦您推送了通知，您就进入控制台，并将控制台顶部的文件更改为服务工作者文件。

然后你可以看到控制台日志！

我意识到这对许多人来说似乎是显而易见的，但对我来说并不是这样，理解如何解析有效载荷并让它做你想做的事情至关重要！