FlutterにPush通知を送り特定のページを開く機能について書いていきたと思います。
プッシュ通知でキャンペーン告知をしてプッシュ通知を開いたら特定のページに遷移する挙動になります。
今回はfirebase_messagingを使用します。
アプリでプッシュ通知を受け取る設定は下記のリンクからお願いします。
Android プッシュ通知
iOS プッシュ通知
プッシュ通知を受け取る
プッシュ通知を押して、アプリが起動した時にdata
を受け取り処理したいので、MaterialAppのあとに遷移するページのinitState()
でプッシュ通知の値を受け取っています。
PushNotifyLaunchについてはこちらから確認してください
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
@override
void initState() {
_firebaseMessaging.requestNotificationPermissions(
const IosNotificationSettings(
sound: true,
badge: true,
alert: true,
),
);
_firebaseMessaging.onIosSettingsRegistered
.listen((IosNotificationSettings setting) {
debugPrint('Settings registered: $setting');
});
}
Future<void> _pushNotifyLaunch() async {
_firebaseMessaging.configure(
onMessage: (Map<String, dynamic> message) async {
// それぞれの処理
},
onResume: (Map<String, dynamic> message) async {
// それぞれの処理
},
onLaunch: (Map<String, dynamic> message) async {
// それぞれの処理
},
);
}
プッシュ通知で受け取ったページへ遷移する
上で受け取ったdata
からページのパスを取得して遷移します
弊アプリではfromUrlにパスを渡して、返り値としてWidgetを返すコードを書いています。
Future<void> onLaunch(
BuildContext context,
Map<String, dynamic> message,
) async {
String uri;
if (Platform.isAndroid) {
uri = splitUriToPath(message['data']['path']);
} else if (Platform.isIos) {
uri = splitUriToPath(message['path']);
}
if (uri?.isNotEmpty ?? true) {
await Navigator.of(context).push(
MaterialPageRouter(
builder: (context) {
return fromUrl(uri);
}
),
);
}
}
最後に
Flutterでpush通知を受け取り、特定のページを開くことまでできました。
ただ、アプリが起動した時に送られてきた値をもとにページを遷移させているだけなので、アプリがバックグラウンドに待機ときにDartだけでプッシュ通知を受け取って、特定のページへ遷移される方法がわからないのでもしご存知のかたがいましたらコメント欄なりTwitterなりで教えていただけると幸いです。
常に待ち受けておく方法も考えてみたのですが、訳合ってなかなか試せてないです...
解決方法がわかり次第記事にします
おまけ 【簡単なテスト方法】
FCMTokenがわかれば下記のスクリプトでプッシュ通知が送れます。
テストをしてみたいときは下記のコードをコピペして使ってみてください。
Firebase からサーバーキーとプロジェクトのIDは必要になりますがターミナルからサクッと送れるのでおすすめです
#!/bin/sh
curl -X POST \
--header "Authorization: key=${サーバーキー}" \
--header "project_id: key=${送信者 ID}" \
--header Content-Type:"application/json" \
https://fcm.googleapis.com/fcm/send \
-d @- << EOF
{
"notification": {
"body": "this is a body",
"title": "this is a title"
},
"priority": "high",
"content_available": true,
"data": {
"click_action": "FLUTTER_NOTIFICATION_CLICK",
"id": "1",
"status": "done",
"path": "{URLスキーム}"
},
"to": "$stoken"
}
EOF
[サーバーキー]と[送信者 ID]は、
Firebase管理画面の左上にある[プロジェクトの概要]→歯車アイコン選択→プロジェクトを設定
[Settings]画面の[Cloud Messaging]タブ
プロジェクト認証情報の項目にあります。