Firebase Cloud Messaging を Flutter に統合する:ステップバイステップ ガイド

今日の競争の激しいモバイル アプリ環境では、アプリのユーザーを効果的に引き付け、タイムリーな情報を提供することが重要です。

Firebase Cloud Messaging (FCM) は、Firebase が提供する強力なプッシュ通知サービスです。これは、アプリのユーザーとつながり、ユーザーの関心を維持するためのシームレスな方法を提供します。

このチュートリアルでは、Flutter への FCM の統合について詳しく説明します。そのメリットを探り、ユーザーエンゲージメントを強化し、アプリのパフォーマンスを向上させる方法の実例を紹介します。

Firebase Cloud Messaging (FCM) は、サーバーとデバイス間に信頼性が高くバッテリー効率の高い接続を提供します。 iOS、Android、Web 上でメッセージや通知を無料で送受信できるようになります。

このチュートリアルでは、Firebase をバックエンド サービスとして使用して、Flutter で Firebase Cloud Messaging (FCM) をセットアップして使用するプロセスを説明します。主な焦点は Android の実装ですが、このプロセスは iOS と Android で似ていることに注意してください (構成にいくつかの違いがあります)。

ここで取り上げる内容は次のとおりです。

<オル>

Firebase でアプリを作成する方法

Flutter で Firebase を設定する方法

FCM トークンを使用してプッシュ通知を実装する方法

このチュートリアルでは、Firebase を使用して、Flutter で実行されているアプリに簡単な通知を送信する方法を学習します。始めましょう。

Firebase でアプリを作成する方法

まず、Firebase コンソールで新しいプロジェクトを作成します。プロジェクトのセットアップ、Firebase Cloud Messaging の構成方法、Flutter アプリに必要な認証情報と構成ファイルの取得方法など、必要な手順を順を追って説明します。

アカウントをお持ちでない場合は、アプリを作成する前に Firebase コンソールにサインアップする必要があります。サインアップしたら、プロジェクトを作成してみてください。

Firebase でプロジェクトを作成する

プロジェクトの作成には少し時間がかかります。

Firebase でのプロジェクトの作成

プロジェクトを作成すると、プロジェクト ダッシュボードにリダイレクトされます。

Firebase コンソールのプロジェクト概要

Firebase コンソールでプロジェクトを作成したら、Flutter アプリを開始します。

Flutter で Firebase をセットアップする方法

Visual Studio Codeを使用して簡単なFlutterプロジェクトを作成しました。 Flutter プロジェクトの構築に慣れていない場合は、以前のチュートリアルを参照してください。 (すでに慣れている場合は、このステップをスキップできます。)

Android デバイス上で実行されるシンプルな Flutter アプリケーション

Firebase を Flutter プロジェクトに統合しましょう。これを行うには、Firebase CLI コマンド ライン ツールが必要です。 Firebase CLI はすでにインストールしています。これをまだ行っていない場合は、公式ドキュメントを参照してください。

次に、Firebase CLI を使用して Firebase にログインする必要があります。

firebase login

FirebaseCLI を使用して Firebase にログイン

これにより、ブラウザに移動して Firebase にログインします。認証が正常に完了すると、元に戻ります。

ログインに成功したら、FlutterFire CLI をインストールする必要があります。 FlutterFire CLI を使用して、Flutter アプリを Firebase に接続するように設定できます。次のコマンドを実行して、FlutterFire CLI をアクティブ化します。

dart pub global activate flutterfire_cli

FlutterFire CLI は、Firebase サービスの Flutter アプリケーションへの統合を簡素化するコマンドライン インターフェイス ツールです。これは、Flutter プロジェクトで Firebase プラグインを追加、構成、管理するための便利な方法を提供します。

FlutterFireCLI のインストール

次のステップは、firebase_core を追加することです。 ライブラリを Flutter プロジェクトに追加します。

次のコマンドは、firebase_core を自動的に追加します。 プロジェクトの pubspec.yaml 内の依存関係としてパッケージを追加します。 ファイルを開き、pub.dev からパッケージの最新バージョンを取得します。 。このコマンドを実行すると、firebase_core をインポートできます。 Dart ファイルにパッケージ化し、Flutter アプリで Firebase サービスを使用します。

flutter pub add firebase_core

Firebase Core パッケージのインストール

flutterfire configure コマンドは、FlutterFire CLI を使用して Flutter プロジェクトで Firebase サービスを構成するために使用されます。このコマンドは、Firebase 認証、Firestore、クラウド メッセージング、その他の Firebase サービスを簡単かつ効率的にセットアップするのに役立ちます。

flutterfire configure

最初のステップはプロジェクトを選択することです。

Flutter アプリを Firebase アプリに接続する

次にプラットフォームの選択です。ここでは Android に使用しているので、Android を選択します。

プラットフォームの選択

設定が成功すると、Firebase アプリ ID が表示されます。

最後に、main.dart にいくつかのコード変更を追加する必要があります。 ファイル。

次のパッケージをインポートします:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

次の設定を追加して、main.dart の main 関数内で Firebase 設定を初期化します。 ファイル。

await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
);

よし、Flutter アプリでの Firebase 構成が正常に完了しました。この節目を祝いましょう。 Firebase サービスの構成は、強力で機能豊富なアプリケーションを構築するための重要なステップです。

FCM トークンを使用してプッシュ通知を実装する方法

プッシュ通知用にデバイスを登録し、各デバイスに割り当てられた一意の FCM トークンを取得するプロセスを実装します。このステップは、ターゲットを絞った通知を特定のデバイスに送信するために重要です。

Firebase Cloud Messaging を使用してデバイスにプッシュ通知を送信する実装について詳しく見ていきます。 Firebase コンソールから通知メッセージを構築して送信する方法を検討し、Flutter アプリ内でこれらのメッセージを処理する方法を示します。

flutter pub add firebase_messaging

firebse メッセージング パッケージをインストールしています

次に、setAutoInitEnabled をトリガーする必要があります。 Flutter アプリで Firebase Cloud Messaging (FCM) の自動初期化を有効にする関数。これは、アプリの起動時に FCM が自動的に初期化してデバイス トークンを取得することを意味します。

main に次の関数呼び出しを追加します。 メソッド:

import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);

Flutter アプリを実行して、通知を受信したかどうかを確認してみましょう。

Firebase メッセージング コンソールに移動します。最初のメッセージなので、「最初のキャンペーンを作成する」を選択する必要があります。 「Firebase 通知メッセージ」を選択し、「作成」をクリックします。

サンプル テスト メッセージング テンプレート

次に、通知のタイトル、テキスト、メッセージの名前を入力する必要があります。

次に、以下のコードを使用して、テスト目的で FCM トークンを手動で取得できます。アプリ インスタンスの現在の登録トークンを取得するには、getToken() を呼び出します。 main() 内 方法。このメソッドは、通知権限が付与されていない場合、ユーザーに通知権限を要求します。それ以外の場合は、トークンを返すか、エラーがある場合は拒否されます。

final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");

コンソールに出力された FCM トークンをコピーし、[FCM 登録トークンの追加] 入力ボックスに貼り付けます。

FCM トークンを使用してテスト メッセージを送信しました

「テスト」ボタンをクリックします。対象のクライアント デバイス (アプリがバックグラウンドで動作している) が通知を受信する必要があります。

Android デバイスでプッシュ通知を受信しました

万歳！ Android デバイスに通知が届きました。通知をクリックすると、デフォルトでアプリが開きます。

通知をタップすると、Android と iOS の両方でデフォルトの動作でアプリケーションが開きます。アプリケーションが終了した場合は、開始されます。バックグラウンドにある場合は、フォアグラウンドに移動されます。

ここでは、Firebase メッセージングを初期化するための基本的な設定を確認できます。

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';
void main() async {
 runApp(const MyApp());
 await Firebase.initializeApp(
 options: DefaultFirebaseOptions.currentPlatform,
 );
 final fcmToken = await FirebaseMessaging.instance.getToken();
 await FirebaseMessaging.instance.setAutoInitEnabled(true);
 log("FCMToken $fcmToken");
}

結論

このチュートリアルでは、Firebase Cloud Messaging (FCM) を使用して Flutter にプッシュ通知を実装するための重要な手順を説明しました。

概要を示した手順に従うことで、Firebase をセットアップし、Flutter プロジェクトに統合し、プッシュ通知機能を実装できます。

通知をシームレスに送受信できる機能により、ユーザー エクスペリエンスを向上させ、アプリのユーザーと効果的に関わることができます。今後のチュートリアルでは、より高度なトピックや機能についてご紹介していきますので、ご期待ください。

Flutter についてさらに詳しく知りたい場合は、私の電子メール ニュースレター (https://5minslearn.gogosoon.com/) を購読し、ソーシャル メディアで私をフォローしてください。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう