如何在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);
});

值得注意的是，幫助我通過的一個主要障礙是了解如何測試推送通知和服務人員！

除非關閉瀏覽器，否則您實際上看不到我的通知，因此很明顯，您無法觀看控制台。

但是，一旦您推送了通知，便進入控制台，並將控制台頂部的文件更改為專門用於服務工作者的文件。

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

我意識到這對許多人來說似乎是顯而易見的，但對我而言並非如此，這對於理解如何解析有效負載並使其完成所需的工作至關重要！