<p>今回は、<code>FCM(Firebase Cloud Messaging)</code>のプッシュ通知を行う際に詰まった点を紹介します。</p>
<p>Flutter で FCM を制御する方法は<a href="https://note.com/welchi/n/n649728c5574d">こちら</a>の note の記事がわかりやすいかと思います。</p>
<h1>🙅‍♀️ 問題点</h1>
<p>当初このような形で Cloud Functions からプッシュ通知を実装していましたが、
一見うまくいっているように見えますが以下の問題が発生しておりました。</p>
<pre><code>const options = {
  priority: 'high',
};
const payload: admin.messaging.MessagingPayload = {
  notification: {
    title: message.title,
    body: message.body,
    click_action: 'FLUTTER_NOTIFICATION_CLICK',
    badge: message.badgeNum,
    sound: 'default',
  },
};
await admin.messaging().sendToDevice(message.fcmToken, payload, options);
</code></pre>
<h2>🤖 Android</h2>
<ol>
<li>通知トレイからアプリを起動すると<code>notification ペイロード</code>が空っぽになる。</li>
<li>画面上部に通知を表示させたい。(<code>Heads-up通知</code>)</li>
</ol>
<p>画像は弊アプリ開発中のものですが、メッセージがきたのをトリガーとし、アプリ内でダイアログを表示するよう実装しております。
通知トレイからアプリを立ち上げると、空っぽのダイアログが表示されてしまいます。</p>
<p>また、チャット機能があるので、他アプリを起動している際にも画面上部に通知を表示させたいです。</p>
<p>こんな感じに。(以下<code>Heads-up通知</code>と表記します)</p>
<h2>🍎 iOS</h2>
<ol>
<li>通知トレイからアプリを起動すると２度メッセージが表示される</li>
</ol>
<p>アプリを完全に落とした状態で通知トレイから起動すると、同じメッセージのダイアログが２度表示されてしまいます。</p>
<h1>🙆‍♀️ 解決策と注意点</h1>
<h2>🤖 Android</h2>
<h3>1. <code>onResume</code>, <code>onLaunch</code>をトリガーとする場合 Payload には<code>data</code>属性も送らないといけない。</h3>
<blockquote>
<p>バックグラウンドにある場合、アプリは、通知トレイで[notification]ペイロードを受け取り、ユーザーが通知をタップしたときにのみ[data]ペイロードを処理します。</p>
</blockquote>
<p><a href="https://firebase.google.com/docs/cloud-messaging/concept-options">出典: 公式ドキュメント</a></p>
<p>つまり[data]ペイロードがないと通知トレイからタップした際に空っぽのデータが読みこまれるので、
空っぽのダイアログが表示されていた。</p>
<p>先の Functions のペイロードをこう変更したところ問題点 ① はクリアです。</p>
<pre><code>const options = {
  priority: 'high',
};
const payload: admin.messaging.MessagingPayload = {
  notification: {
    title: message.title,
    body: message.body,
    click_action: 'FLUTTER_NOTIFICATION_CLICK',
    badge: message.badgeNum,
    sound: 'default',
  },
  // 以下追加
  data: {
    title: message.title,
    body: message.body,
  },
};
await admin.messaging().sendToDevice(message.fcmToken, payload, options);
</code></pre>
<h3>2. Heads-up 通知を行うには通知チャンネルの設定をしっかりする。</h3>
<blockquote>
<p>Android 8.0（API レベル 26）以降、通知はすべてチャネルに割り当てる必要があります。チャネルごとに、そのチャネルのすべての通知に適用される表示と音声の動作を設定することができます。</p>
</blockquote>
<p><a href="https://developer.android.com/training/notify-user/channels?hl=ja">出典: 公式ドキュメント</a></p>
<p>とのことで、FCM がデフォルトで作る通知チャンネルだと Heads-up 通知の許可がオンになってないようでした。
画像にある<code>その他</code>の通知チャンネルがデフォルトのものですが、ユーザーが自発的にポップアップのトグルをオンにしないと
Heads-up 通知はきません。
また再インストール時などにはまた設定をしないといけないようです。</p>
<p>方法としては以下があります。</p>
<ol>
<li>デフォルト通知チャンネルの設定を<code>AndroidManifest.xml</code>に追記する。</li>
<li><a href="https://pub.dev/packages/flutter_local_notifications">flutter_local_notifications</a>を利用する。</li>
<li>Kotlin ネイティブコードからチャンネルを作成する。</li>
</ol>
<p>1 は単純に理解が足りなかったのか、Flutter では動かなかったので断念。
2 は新規プロジェクトでは問題ない選択ですが、今回だと機能過多と判断し、不採用です。</p>
<p>今回は Kotlin のネイティブコードを呼び出して通知チャンネルを作成しました。</p>
<pre><code>package com.example   // 自身のプロジェクトコード(ユニークキー)を入れてください
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import android.content.Context
import android.content.ContextWrapper
import android.content.Intent
import android.content.IntentFilter
import android.os.Build.VERSION
import android.os.Build.VERSION_CODES
import android.app.NotificationManager;
import android.app.NotificationChannel;
import android.net.Uri;
import android.media.AudioAttributes;
import android.content.ContentResolver;

class MainActivity: FlutterActivity() {
  private val CHANNEL = "com.example/channel" // チャンネルの名前

  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
      // FCMService()からのinvoke()
      call, result ->
      if (call.method == "createNotificationChannel"){
        val argData = call.arguments as java.util.HashMap&#x3C;String, String>
          val isCompleted = createNotificationChannel(argData)
          if (isCompleted == true){
              result.success(isCompleted)
          }
          else{
              result.error("Error Code", "Error Message", null)
          }
      } else {
        result.notImplemented()
      }
    }

  }
    // NotificationChannelの作成
    private fun createNotificationChannel(mapData: HashMap&#x3C;String,String>): Boolean {
        val isCompleted: Boolean
        if (VERSION.SDK_INT >= VERSION_CODES.O) {
	　  // Flutter側からの値
            val id = mapData["id"]
            val name = mapData["name"]
            val descriptionText = mapData["description"]
            val importance = NotificationManager.IMPORTANCE_HIGH
            val myChannel = NotificationChannel(id, name, importance)
            myChannel.description = descriptionText
            val notificationManager = getSystemService(NOTIFICATION_SERVICE) as NotificationManager
            notificationManager.createNotificationChannel(myChannel)
            isCompleted = true
        }
        else{
            isCompleted = false
        }
        return isCompleted
    }
}
</code></pre>
<p>Flutter 側ではネイティブコードを<code>MethodChannel</code>から invoke します。</p>
<pre><code>  Future&#x3C;void> createNotificationChannel() async {
    const _channel = sevices.MethodChannel('com.example/channel');
    const channelMap = {
      'id': 'SAMPLE_CHANNEL', // FCMからこの名前で呼び出す
      'name': 'サンプルアプリ', // エンドユーザーが設定でみる名前
      'description': 'サンプルアプリの通知です',
    };
    try {
      // kotlin側'MainActivity.kt'を呼び出し
      await _channel.invokeMethod('createNotificationChannel', channelMap);
    } catch (e) {
      print('error in FCM.createNotificationCannel(): ' + e.toString());
    }
  }
</code></pre>
<p>出来たチャンネルとみてみるとちゃんとポップアップがオンになってそうです。</p>
<p>最後に Functions 側で、<code>Channel ID</code>を指定します。</p>
<pre><code>const options = {
  priority: "high",
};
const payload: admin.messaging.MessagingPayload = {
  notification: {
    title: message.title,
    body: message.body,
    click_action: "FLUTTER_NOTIFICATION_CLICK",
    badge: `message.badgeNum,
    sound: "default",
    android_channel_id: 'SAMPLE_CHANNEL'
  },
  data: {
    title: message.title,
    body: message.body,
  },
};
await admin.messaging().sendToDevice(message.fcmToken, payload, options);
</code></pre>
<h2>🍎 iOS</h2>
<h3>1. アプリが kill されている場合通知から立ち上げるときは<code>OnResume</code>, <code>OnLaunch</code>両方トリガーされる。</h3>
<p><a href="https://github.com/FirebaseExtended/flutterfire/issues/3331#issuecomment-679600146">こちら</a>の issue でのコメントが参考になりました。</p>
<p>つまり弊アプリを例に出すと、アプリが完全に閉じている際に通知トレイなどから立ち上げると、</p>
<blockquote>
<p>~さんがいいねしました。</p>
</blockquote>
<p>というダイアログが２回表示されてしまいます。
同じ内容の通知が<code>onResume</code>, <code>onLaunch</code>からこないように監視する必要が出てきます。</p>
<p>ダイアログ表示のメソッドにて、以前の通知と被る場合はスルーするようにしました。</p>
<pre><code>  // iOSでアプリkill時にOnResumeとOnLaunchが同時にトリガーされる問題を監視
  if (Theme.of(context).platform == TargetPlatform.iOS &#x26;&#x26;
      (trigger == 'onLaunch' || trigger == 'onResume') &#x26;&#x26;
      notification == lastNotification) return null;
</code></pre>
<h1>📌 終わりに</h1>
<p>改めて一次ソースの大切さと困ったら GitHub の issue 見れば同じ問題抱えている人がいるんだなあとしみじみ思いました。</p>
<p>今回紹介した内容がもし間違っていたら、Twitter 等でメッセージください。</p>
