こんにちわ、語学学習マッチングアプリ『CROSSER』の開発者です。
この『CROSSER』なのですが、FlutterとFirebaseを用いて開発しております。
今回は、CROSSERのプッシュ通知機能をどのように開発したのかを書いていきますので、是非参考にしてみて下さい!

はじめに

語学マッチングアプリ『CROSSER』の概要についてはこちらを参照ください！

今回書くもの

このようにアプリがバックグランドにいるときに、Firebase Cloud Messageを用いて、プッシュ通知をリアルタイムで行う方法を紹介していきたいと思います！

使用するもの

• firebase_messaging https://pub.dev/packages/firebase_messaging

実装の流れ

①Android,iOSのプッシュ通知の設定(定義ファイルの設定)
②Android,iOSアプリ側でプッシュ通知の許可表示する処理
③device tokenを取得処理(このdevice tokenはテスト時に使用します。)
④Firebase Cloud Messageから通知を受信した時の処理

実装の詳細(6/22追記)

firebaseのsetupは終わっている前提で記載していきます。

1.バックグラウンド通知設定

■Android

1. /android/app/build.gradleのdependenciesにimplementation "com.google.firebase:firebase-messaging:XX.X.Xを追記する。

※XX.X.Xは最新ver.を書いてください。最新ver.はここからチェックできます
https://firebase.google.com/docs/android/setup?hl=ja

dependencies {
    ・
    ・
    ・
    // add
    implementation platform('com.google.firebase:firebase-bom:28.0.1')
    // add
    implementation 'com.google.firebase:firebase-messaging:21.0.1'
}

2.app/build.gradle の minSdkVersion を変更する
/android/app/build.gradleのminSdkVersionを23にする。

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.flutter_fcm_push_notify"
        minSdkVersion 23 // 16 -> 23
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

3.Application.kt を作成する
android/app/src/main/kotlin/<アプリのpackage名> 配下に新規に Application.kt を作成し、Android端末でアプリがバックグランドにいたときにプッシュ通知が表示されるように設定。

package com.example.yourapp
import io.flutter.app.FlutterApplication
import io.flutter.plugin.common.PluginRegistry
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback
import io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingBackgroundService
import io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingPlugin
class Application : FlutterApplication(), PluginRegistrantCallback {
    override fun onCreate() {
        super.onCreate()     
   FlutterFirebaseMessagingBackgroundService.setPluginRegistrant(this)
    }
override fun registerWith(registry: PluginRegistry?) {
        val key: String? = FlutterFirebaseMessagingPlugin::class.java.canonicalName
        if (!registry?.hasPlugin(key)!!) {
            FlutterFirebaseMessagingPlugin.registerWith(registry?.registrarFor("io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingPlugin"));
        }
    }
}

4.AndroidManifest.xml に FLUTTER_NOTIFICATION_CLICK を追記する
/android/app/src/main/AndroidManifest.xmlにFLUTTER_NOTIFICATION_CLICK を追記

          <intent-filter>
                <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

■iOS

1.Apple Developer Console で APNs Key を作成する
Apple Developer Console の Certificates, Identifiers & Profiles にアクセスし、左メニュー Keys から Key 一覧画面を開き、+ボタンをクリックして Key 作成画面を開く。

テスト方法

Firebase -> Cloud Messageにいくと、こちらの画面が表示されます。
この画面の「テストメッセージを送信」ボタンを押下し、device tokenの入力後、「テスト」ボタンを押下するとリアルタイムにプッシュ通知を確認することができます。

まとめ

• アプリがバックグラウンドにいる時のリアルタイムプッシュ通知にはFirebase Cloud Messageが使うといい！
• メッセージ機能などがアプリにあって、受信者にリアルタイムプッシュ通知をしたい場合は、受信者側のdevice tokenが必要となるので、DBなどにdevice tokenを保持する必要がある。
• アプリがフォアグラウンドにいる時はリアルタイムプッシュ通知は表示されないので、もし、フォアグラウンドでもプッシュ通知を表示したい場合はFCMから通知が来たときにダイアログを表示するようにしたらいいと思う。(iPhoneで言うと通知センターには通知はくる。)

語学マッチングアプリ『CROSSER』もよろしくお願いします。
評価もいただけると嬉しいです！
iOS/Androidモバイル対応
https://instabio.cc/crosser