Cloud Messagingを実装

[MurakawaTakuya]

Closes Cloud Messagingをテスト

概要

Firebase Cloud Messagingを用いた通知の送受信機能の作成

変更内容

• Firebase Cloud Messagingで端末がフォアグラウンド・バックグラウンドに関わらず通知を受信できる機能を実装
  • バックグラウンド受信: Service Workerを使用してpublic\messaging-sw.jsのコードを実行し、通知を受信する
  • フォアグラウンド受信: src\utils\getNotification.tsのonMessageで通知を受信

現時点で通知が2回届く問題が発生しているので解消したい 解消済み

確認方法

以下のコードを実行することで通知を送信することができる

const fetchData = async () => {
  const postData = {
    message: {
      token:
        "受信端末のFCM Token",
      notification: {
        title: "⚠️BeRealになる時⚠️",
        body: "2分以内にBeRealを投稿しないと他の友達の投稿が見れません!",
      },
    },
  };

  try {
    const response = await fetch(
      "https://fcm.googleapis.com//v1/projects/<projectId>/messages:send",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization:
            "Bearer <access-token>",
        },
        body: JSON.stringify(postData),
      }
    );

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`データの送信に失敗しました: ${errorText}`);
    }

    console.log("success:", postData);
  } catch (err) {
    console.error(err);
  }
};

fetchData();

チェックリスト

• PRに必要な内容を記述し、Assignやタイトルを設定した
• File Changedで不要な変更や誤った変更が無いか確認した
• 対応したissueをProjectの"レビュー中・待機中"に移動した
• レビューを頼んだ人にDiscordでお願いした
• 機密情報が含まれていないことを確認した(含まれている場合は直ちにリモートからコミットを削除すること)
• UIを変更した場合
  • PCで見た時に表示が崩れていないことを確認した
  • スマホでも正常に表示されることを確認した(大きい画面と小さい画面両方で)

[github-actions]

Visit the preview URL for this PR (updated for commit 70331bc):

https://todo-real-c28fa--pr49-feat-46-cloud-messag-uepppype.web.app

_{(expires Tue, 03 Dec 2024 06:35:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: cbf065b4d5e2f44e47cd594ff42f749fc108f410}

[MurakawaTakuya]

テスト環境で通知が受信できることを確認した
(npm run devの環境では通知が届かなさそう) フォアグラウンドで正常に通知を受信できていないだけだった

https://fcm.googleapis.com//v1/projects/<project-id>/messages:send

Body

{
   "message":{
      "token":"`コンソールに出力されたcurrentToken`",
      "notification":{
        "body":"This is an FCM notification message!",
        "title":"FCM Message"
      }
   }
}

Header

Authorization: Bearer <server-token>

(Headerによる認証がうまくいかなかったのでPostmanのAuthを使用)

結果

Windows通知	コンソール

[MurakawaTakuya]

ビルド後にローカルでhttp-serverを立てても受信できた

[MurakawaTakuya]

Androidでも通知を受信できた

ただ、バックグラウンドの場合しか動作してないみたい、フォアグラウンドの場合に通知が来なかった 解消済み

[MurakawaTakuya]

スマホの場合フォアグラウンドの通知が来ないのと、通知を押してもタブが開かれない
後々直そう