【Flutter】FCMとSupabase Edge FunctionsでPush通知〜第1回〜

今回は、FCMとSupabase Edge Functions（database webhook）を使用してPush通知を送信するところまで紹介していきます。

以下の動画を参考にしています。

構成

開発の流れ

1. Firebaseの設定
2. Firebaseの環境分け（devとprod）
3. FlutterでFirebase初期化を実装
4. FCMの設定【← 第1回はここまで】
5. Flutterで通知許可ダイアログを実装
6. バックグラウンド・フォアグラウンド・ターミネート状態でのPush通知の受信
7. Firebase Messagingでテスト送信【← 第2回はここまで】
8. Supabaseインストール
9. Supabase Edge Functionsの実装
10. Webhookを設定
11. SupabaseからFlutterアプリにPush通知を送信【← 第3回はここまで】

Firebaseの設定

まずはiOSとAndroidのFirebase設定を進めます。

※Firebaseプロジェクトは作成済みの前提です。

Firebase にログインとパッケージの追加

% firebase login

コアプラグインをインストールします。

% flutter pub add firebase_core

Firebase を使用するようにdevとprod環境に分けてアプリを構成

Flutter アプリを Firebase に接続するように構成します。

バンドルIDは以下に記載されています。

iOS : ios/Runner.xcodeproj/project.pbxprojにあるPRODUCT_BUNDLE_IDENTIFIER

Android : android/app/build.gradleにあるdefaultConfig > applicationId

今回は、環境分けもします。

iOSのdevとprodの環境を構成

まずは、コマンドで生成。

// dev
% flutterfire configure --project=sample-app-dev --out=lib/firebase_options_dev.dart --platforms=android,ios --ios-bundle-id=jp.co.sample.www.app.sample.dev --android-package-name=jp.co.sample.www.app.dev

// prod
% flutterfire configure --project=sample-app --out=lib/firebase_options.dart --platforms=android,ios --ios-bundle-id=jp.co.sample.www.app.sample --android-package-name=jp.co.sample.www.app

GoogleService-Info.plistは以下のように分けました。

Xcode > Runner > Build phase > Run Scriptに以下追記して、読み込みファイルを分けます。

注意点として、Copy Bundle Resoucesより上に持ってくる必要があります。

if [ "${FLAVOR}" == "dev" ]; then
  cp "${PROJECT_DIR}/Runner/dev/GoogleService-Info.plist" "${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app/GoogleService-Info.plist"
else
  cp "${PROJECT_DIR}/Runner/prod/GoogleService-Info.plist" "${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app/GoogleService-Info.plist"
fi

Androidのdevとprodの環境を構成

google-service.jsonファイルは以下のように分けておきます。

android/setting.gradleに以下追記。

plugins {
    ...
    // START: FlutterFire Configuration
    id "com.google.gms.google-services" version "4.3.15" apply false
    // END: FlutterFire Configuration
    ...
}

android/app/build.gradleに以下追記。

plugins {
    ....
    id "com.google.gms.google-services"
}

ちなみに、Google Servicesプラグイン自体がフレーバーに対応しているみたいです。

つまり、google-services.json ファイルをフレーバーごとに配置することで、自動的に設定が選択されます。

そのため、カスタムタスクを作成してgoogle-services.jsonをコピーする必要はありませんでした

FlutterでFirebase初期化

生成されている残りのファイルはこんな感じで分けています。

lib/main.dart ファイルで、Firebase を初期化します。

// このあたり良きように追加
WidgetsFlutterBinding.ensureInitialized();

if (Firebase.apps.isEmpty)
  Firebase.initializeApp(
    name: flavor.isDev ? 'sample-app-dev' : 'sample-app',
    options: getFirebaseOptions(),
  ),

FirebaseOptions getFirebaseOptions() {
  switch (flavor) {
    case Flavor.dev:
      return dev.DefaultFirebaseOptions.currentPlatform;
    case Flavor.prod:
      return prod.DefaultFirebaseOptions.currentPlatform;
  }
}

// flavorはすでに用意しているものを使用
final flavor = Flavor.fromEnvironment;

enum Flavor {
  dev,
  prod;

  static Flavor get fromEnvironment {
    const flavor = String.fromEnvironment('FLAVOR');
    return Flavor.values.byName(flavor);
  }

  bool get isDev => name == 'dev';
  bool get isProd => name == 'prod';
}

環境分けてfirebaseを使うと以下のようなエラーが起きやすいため、回避するためにinitializeAppでnameオプションを使用しています。

Exception: [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists

ビルド用にlaunch.jsonを修正

flavorなどを追加してios、androidともにビルドできるかを確認します。

{
    "name": "Run dev debug",
    "request": "launch",
    "type": "dart",
    "program": "lib/main.dart",
    "flutterMode": "debug",
    "args": [
        "--flavor dev",
        "--dart-define=FLAVOR=dev"
    ]
},

pod関連のエラーが出たら、podインストールなどクリーンしましょう。

FCMの設定

XcodeでPush NotificationsとBackground Modesを追加

Xcode > Runner > Signing & Capabilities > + Capabilityを選択して、Push Notifications と Background Modesを追加します。

APN認証キーを発行

Apple DeveloperからCertificates, Identifiers & Profilesでキーを発行します。

追加できたら忘れずにダウンロードしましょう。

Firebase Cloud Messagingにアップロード

プロジェクトの設定からキーをアップロードします。

• キーファイル
• キーID : 先ほどAppleで発行したKey ID
• チームID : Apple developer開いて右上に会社名 - チームIDで記載されているチームID

  

今回はこれで一旦完了です。

続きは以下の記事を見てください。