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

Question

如何通过Web上的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函数中获取正确的通知，并将其内容传递给我的service worker（包括动作），但是我必须将我的所有数据都传递给一个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);
});

值得注意的是，帮助我通过的一个主要障碍是了解如何测试推送通知和服务人员！

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

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

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

我意识到这对许多人来说似乎是显而易见的，但对我而言并非如此，这对于理解如何解析有效负载并使其完成所需的工作至关重要！