🔥
【Flutter】Push通知を受け取るだけのスタブアプリをTsukuttar
寒いタイトルですみません。
最近おやじギャグが止まりませんのでご容赦ください。
環境
- Windows(10)
- Flutter(2.10.5)
- firebase_core(2.4.1)
- firebase_messaging(14.2.1)
事前準備
- firebaseのプロジェクト作成
- Firebase CLIのインストール(&ログイン)
手順
flutterプロジェクトの準備
1. flutterプロジェクトの作成
コマンドプロンプトを開いて下記コマンドを実行します。
flutter create {プロジェクト名}
プロジェクトを作成したら、作成したフォルダへ移動します。
cd {プロジェクト名}
2. パッケージのインストール
- firebase_coreをインストールします。
flutter pub add firebase_core
- firebase_messagingをインストールします。
flutter pub add firebase_messaging
3. firebaseの設定
3-1. Flutterを選択
3-2. 「次へ」ボタンをクリック
3-3. 表示されたコマンドを実行
ここでは例としてAndroidを選択します。
> flutterfire configure --project={プロジェクトID的な}
i Found 9 Firebase projects. Selecting project {プロジェクトID的な}.
? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android
✔ ios
macos
✔ web
そのあとは、操作を進めて管理コンソールまで戻ります。
4. 実装
main.dart
のimportを追加して、main
関数をちょいちょい変更してきます。
※追加部分だけ抜粋して記載
main.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
//イニシャライズ
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
//パーミションの設定
FirebaseMessaging fireMsg = FirebaseMessaging.instance;
//トークン取得
String fireToken = (await fireMsg.getToken()).toString();
print('fireToken:' + fireToken);
//メッセージのリッスン
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
if (message.notification != null) {
print('Title: ${message.notification?.title}');
print('Body: ${message.notification?.body}');
}
});
runApp(const MyApp());
}
5. ビルドと確認
ビルドすると↓のようにfireToken(勝手に名付けた)が表示されますのでコピーしておきます。
6. firebase Cloud Messagingでテスト送信
「タイトル」と「通知内容」を入力して「テストメッセージを送信」ボタンをクリック
「2. 」でコピーしたTokenを貼り付けて、「テスト」ボタンをクリック
7. 受信確認
こんな感じでデバッグコンソールに表示されたらOK。
今回は時短でコンソール出力です。
あとがき
バックエンドからPush通知を送信する記事を書いたときは、FirebaseにFlutterって項目がなかったので、めちゃくちゃ便利になったなと思いました。
クレデンシャルJSONもアプリの方のプロジェクトに含めたような気もしますし・・・。
Githubに上げるほどのコード量でもないので、サンプルで失礼しました!
関連記事
参考記事
Github
- なし
Discussion