Firebase Messaging Web SDKで通知アクションを使用するには

Question

notification actionsをWeb上のFirebase Messaging SDKでどのように使用しますか？

Answer 1

これを試すときにヒットした人々には、いくつかの落とし穴があります。

1. Firebase通知 - "Firebase通知" としてFirebaseメッセージングSD Kさんなしの機能があります。 Firebase Instance-ID（IID）トークンにプッシュメッセージを送信するときに、SDKが検索する「通知」キーを使用できます。見つかった場合は、通知を作成します。これの利点は、通知を表示するためのコードを書く必要がないことです。欠点は、通知が受信されると、何か複雑な操作やデバイス上での作業を実行したい場合には、制限がある可能性があるということです。アクションを使用するには、これを使用してはいけません。代わりに、IIDトークンと「データ」ペイロードを使用してFCM APIを呼び出します。
2. データペイロード - データペイロードは、それが唯一の値が文字列でなければならないキーと値のペア、すなわちない配列であることができる制限を有しています。これは、一連のアクションを送信し、それを使って通知を作成するだけでは意味がないということです。これを回避する方法は、JSON文字列を作成FCMのAPIにそれを送信して、デバイス上でJSONを解析し、使用することです。

例の時間。

あなたのペイロードのフォーマットは次のようなものでなければなりませんFCMのAPIに

を呼び出す：「はあなたと

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" 

：

{ 
    "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" 
} 

あなたがそうのようにカールしてこれを送信することができますサービスワーカーの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); 
}); 

ここでは、アクションとication：

テスト

Megginとしてコメントで指摘したように、それをテストする方法は明白ではありませんので、いくつかの基本原則。

Webサーバーがサービスワーカーファイルのキャッシュヘッダーを設定すると、サービスワーカーファイルを新しいタブで開いて更新するためのリフレッシュ間に更新されないサービスワーカーが最新の状態になるまでそのページを表示します（これはサービスワーカーの実際のソースコードを表示しています）。その後、あなたのWebページを最新表示すると、サービスワーカーが最新のサービスワーカーになり、サービスワーカーの数の隣にある番号で更新されたことがわかります。

サービスワーカーのサービスワーカーを登録解除してページを更新するだけで、最新のサービスワーカーが提供されます。

通知をテストするには、プッシュメッセージを送信する前に別のWebページ用のタブをクリックする必要があります。

この理由は、ユーザーが現在自分のページの1つにいる場合、プッシュメッセージはonBackgroundMessage()コールバックの代わりにonMessage()コールバックページに送信されるためです。

Answer 2

私のサービス担当者（アクションを含む）に渡されたfirebase関数からのコンテンツを適切に通知することができましたが、すべてのデータを1つのjsonオブジェクトに渡す必要がありました。私のために働く。

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); 
    }); 
} 

そして、ここに私のコードは私のサービスワーカーで、次のようになります：ここで

は私のfirebase機能コードは次のようになります

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); 
}); 

それは私を助けた一つの大きなハードルを得ることは注目に値しますこれはプッシュ通知とサービスワーカーをテストする方法を理解することに合格しました。

ブラウザが閉じていない限り、実際には通知が表示されないので、明らかにコンソールを見ることはできません。

しかし通知をプッシュすると、コンソールに入り、コンソールの上部にあるファイルをサービスワーカーファイルに変更します。

コンソールのログが表示されます。

私はこれが多くの人々に明らかなように見えるかもしれないが、それは私にはなかった、それはペイロードを解析し、それはあなたがやりたいことを得る方法を理解するために重要です実現！