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

Question

如何在 Web 上通过 Firebase Messaging 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"

这样你就可以onBackgroundMessage在你的服务工作者的回调中获取数据。

在设备上接收有效负载

在 Service Worker 中，我们可以使用以下代码：

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 服务器为您的 Service Worker 文件设置了缓存标头，则它不会在刷新之间更新，解决此问题的一种方法是在新选项卡中打开您的 Service Worker 文件并刷新该页面，直到您Service Worker 是最新的（这是查看 Service Worker 的实际源代码）。然后，当您刷新网页时，您的 Service Worker 将是最新的，您可以通过 Service Worker 旁边的数字递增来判断它已更新。

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

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

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