NCMBのFlutter SDKを使ってプッシュ通知を送信する（iOS編）

NCMBのコミュニティSDK（公式サポートは提供されていません）としてFlutter向けのSDKを提供しています。Flutter SDKはiOS/Androidはもちろんのこと、Webなどでも利用できます。つまりスマートフォンネイティブの機能は提供していません。

NCMBのプッシュ通知機能は数多くの方に使われている機能でもあり、今回はFlutter SDKを使ってどうプッシュ通知機能を使えば良いのかを紹介します。まずはiOS編です。

ncmb | Dart Package

利用するライブラリ

上述の通り、Flutter SDKにはネイティブ機能がありませんので、プッシュ通知で利用するデバイストークンを取得する機能がありません。そこで下記のライブラリを使います。

• push | Flutter Package

セットアップ

iOSの場合はiOS Dev Centerにてアプリを登録し、Push Notificationを有効にします。Keysのところでプッシュ通知を有効にすると、p8ファイルがダウンロードできます。

アプリのバンドルID、チームID、p8ファイル、AppleキーIDを取得したら、NCMBの管理画面でそれぞれ設定します。アプリのバンドルIDはAppleトピックIDとして設定してください。

Flutterアプリの作成

flutter create アプリ名 --org 組織 でアプリを作成します。iOSの場合は組織を指定しなくても大丈夫そうですが、Androidはコードが入ったフォルダ構成などにも影響するので、指定した方が良さそうです。

Xcodeの設定

ios/Runner.xcworkspace を開いて、Capabilitiesでプッシュ通知を有効にします。

ライブラリの追加

flutter コマンドでライブラリを追加します。

flutter pub add ncmb
flutter pub add push

main.dartの編集

ライブラリのインポート

追加したライブラリを読み込みます。

import 'package:push/push.dart';
import 'package:ncmb/ncmb.dart';

main関数でNCMBを初期化します。

NCMB("YOUR_APPLICATION_KEY",
      "YOUR_CLIENT_KEY");

デバイストークンの登録

適当なボタンを配置して、デバイストークンの取得を行う関数を呼び出します。

TextButton(onPressed: getToken, child: const Text("プッシュ通知を受け取る"))

getToken関数の内容です。

void getToken() async {
	var token = await Push.instance.token;
	if (token != null) {
		saveToken(token)
		setState(() {
			_deviceToken = token;
		});
	}
}

そして saveToken 関数でデバイストークンをNCMBへ保存します。deviceTokenとdeviceTypeは必須です。

void saveToken(String token) async {
	try {
		var installation = NCMBInstallation();
		installation
			..set("badge", 0)
			..set("deviceToken", token)
			..set("deviceType", Platform.isIOS ? "ios" : "android");
		await installation.save();
	} catch (e) {
		debugPrint("エラー ${e.toString()}");
	}
}

ちゃんと保存できていれば、NCMBの管理画面でInstallationクラスにデータが追加されています。

これでプッシュ通知の送信準備が整いました。

プッシュ通知を送信する

NCMBの管理画面でプッシュ通知を送信します。送信先としてiOSを選んでください。

プッシュ通知を受け取る

プッシュ通知を受け取るとイベントが呼ばれるので、initStateで定義します。

@override
void initState() {
	super.initState();
	Push.instance.onNotificationTap.listen((data) {
		// アプリは起動中で、プッシュ通知を開いた場合
	});
	Push.instance.notificationTapWhichLaunchedAppFromTerminated.then((data) {
		// アプリが終了していた場合
		if (data == null) {
			// アプリ起動時
		} else {
			// 通知を開いた場合
		}
	});
	Push.instance.onMessage.listen((message) {
		// アプリがフォアグラウンド
	});
	Push.instance.onBackgroundMessage.listen((message) async {
		// アプリがバックグラウンド
	});
}

messageは次のような内容になっています。dataはこの中のmessage.dataに該当します。dataはプッシュ通知の内容がMapで入っています。

• message.notification（通知オブジェクト）
  • message.notification?.title.toString() （通知タイトル）
  • message.notification?.body.toString() （通知本文）
  • message.data ペイロード

例えばmessage.dataは次のようになります。

{
	"com.nifcloud.mbaas.PushId": "UgGJ9dz9KQ7mGmjZ",
	"aps": {
		"alert": {
			"title": "プッシュ通知テスト",
			"body": "これはFlutterアプリ向けのプッシュ通知です。"
		}, 
		"sound": "default"
	}
}

まとめ

iOSのプッシュ通知は比較的簡単に実装できます。プッシュ通知を開いた後の動作については、dataの内容を見て判別すれば良いでしょう。他にもJSONやURLも送れますので、活用してください。