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

Question

如何在网络上将notification actions 与 Firebase 消息传递 SDK 结合使用？

Answer 1

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

1. Firebase 通知 - Firebase Messaging SD 有一项功能 K 没有“Firebase 通知”。当您向 Firebase Instance-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"

这样，您就可以在 Service Worker 的 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 在 cmets 中指出的那样，如何测试它并不明显，所以有一些指导原则。

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

或者，只需将 Service Worker 取消注册为 Service Worker 并刷新页面 - 这应该会为您提供最新的 Service Worker。

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

这样做的原因是，如果用户当前在您的某个页面上，推送消息将发送到页面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);
});

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

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

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

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

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