【Flutter 專題】120 Flutter & 騰訊移動通訊 TPNS～

阿策小和尚發表於2021-06-02
Flutter

    小菜前兩天剛學習了原生 Android 騰訊移動通訊 TPNS，發現同時提供了 Flutter_Plugin，今天嘗試一下對 Flutter 的支援；

Flutter TPNS

1. 基本接入

1.1 環境配置

    小菜在接入 Flutter TPNS 時，需要在 Flutter 和 Android 兩端進行外掛的安裝配置；

  • Flutter

    在工程 pubspec.yaml 中 dependencies 下引入 tpns_flutter_plugin 外掛；

dependencies:
  flutter:
    sdk: flutter
  tpns_flutter_plugin:
    git:
      url: https://github.com/TencentCloud/TPNS-Flutter-Plugin
      ref: V1.0.7
複製程式碼
  • Android

    在 app build.gradle 檔案下配置 ID 和 KEY 以及支援的 .so 庫；

defaultConfig {
    applicationId "com.ace.plugin.flutter_app07"
    minSdkVersion 16
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    ndk {
        abiFilters 'armeabi', 'armeabi-v7a', 'x86', 'x86_64', 'mips', 'mips64', 'arm64-v8a', 'arm6'
    }
    manifestPlaceholders = [
        XG_ACCESS_ID : "1500018481",
        XG_ACCESS_KEY : "AW8Y2K3KXZ38",
    ]
}
複製程式碼

1.2 方法使用

    小菜按照官網的介紹嘗試了一些常用的 API 方式，主要分為應用類，賬號類和標籤類三種 API，小菜業務中沒有應用賬號和標籤模組，暫未深入研究；

  • 應用介面 API
a. 註冊推送服務

    對於服務的註冊初始化，可以在首次進入應用 initState() 中直接初始化，也可以根據業務邏輯在固定的位置進行初始化，需要傳遞申請的賬號 ID 和 KEY；註冊成功之後會在 onRegisteredDone() 中進行回撥，並獲取對應裝置的唯一 Token；

XgFlutterPlugin().startXg("1500018481", "AW8Y2K3KXZ38");

// 註冊回撥
XgFlutterPlugin().addEventHandler(
  onRegisteredDone: (String msg) async {
    print("HomePage -> onRegisteredDone -> $msg");
    _showDialog('註冊成功', msg);
  },
);
複製程式碼

b. 登出推送服務

    服務的登出方法可以通過 stopXg() 進行處理，並在 unRegistered 進行回撥監聽；

XgFlutterPlugin().stopXg();

// 登出回撥
XgFlutterPlugin().addEventHandler(
  unRegistered: (String msg) async {
    print("HomePage -> unRegistered -> $msg");
  },
);
複製程式碼
c. 裝置推送標識

    對於裝置唯一標識的獲取，可以通過註冊初始化成功之後獲取，也可以通過 XgFlutterPlugin.xgToken 獲取唯一 Token；

Future<void> getTPNSToken(title) async {
  try {
    String xgToken = await XgFlutterPlugin.xgToken;
    print('HomePage -> getTPNSToken -> $xgToken');
    _showDialog(title, xgToken);
  } catch (e) {
    print(e.toString());
  }
}
複製程式碼

d. 上報角標數

    對於桌面角標，在通知類訊息中 華為 和 小米 裝置在開啟許可權之後，接收通知會由桌面角標的更新；而 TPNS 提供的 setBadge() 只有在 iOS 環境下支援，對於 Android 環境下的透傳型別或其他廠商裝置的支援，可以通過 Flutter 與 Native 通訊來由原生實現；

e. SDK 版本

    TPNS SDK 版本可以通過 XgFlutterPlugin.xgSdkVersion 獲取；

Future<void> getTPNSSDKVersion(title) async {
  try {
    String sdkVersion = await XgFlutterPlugin.xgSdkVersion;
    print('HomePage -> getTPNSSDKVersion -> $sdkVersion');
    _showDialog(title, sdkVersion);
  } catch (e) {
    print(e.toString());
  }
}
複製程式碼

  • 賬號介面 API

    TPNS 提供了個性化服務，關於賬號的繫結和解綁等功能，可以根據具體的業務邏輯進行處理；

String inputStr = "ACE_Flutter";
// 設定賬號
XgFlutterPlugin().setAccount(inputStr, AccountType.UNKNOWN);
// 解綁賬號
XgFlutterPlugin().deleteAccount(inputStr, AccountType.UNKNOWN);
// 清空賬號
XgFlutterPlugin().cleanAccounts();

XgFlutterPlugin().addEventHandler(
  xgPushDidBindWithIdentifier: (String msg) async {
    print("HomePage -> xgPushDidBindWithIdentifier -> $msg");
    _showDialog('繫結標籤 $inputStr', msg);
  },
  xgPushDidUnbindWithIdentifier: (String msg) async {
    print("HomePage -> xgPushDidUnbindWithIdentifier -> $msg");
    _showDialog('解綁賬號', msg);
  },
  xgPushDidClearAllIdentifiers: (String msg) async {
    print("HomePage -> xgPushDidClearAllIdentifiers -> $msg");
    _showDialog('清除全部賬號', msg);
  }
)
複製程式碼
  • 標籤介面 API

    TPNS 的使用者標籤功能比較強大，可以針對性的進行地理圍欄或標籤分佈的推送；TPNS 提供了繫結和解綁標籤，更新和清理標籤等功能，方便針對性的進行資料推送；

String inputStr = "ACE_Flutter";
// 繫結標籤
XgFlutterPlugin().addTags([inputStr]);
// 解綁標籤
XgFlutterPlugin().deleteTags([inputStr]);
// 更新標籤
XgFlutterPlugin().setTags([inputStr]);
// 清除標籤
XgFlutterPlugin().cleanTags();
複製程式碼

2. 通知類訊息

    小菜在上一篇文章中介紹了 TPNS 訊息釋出後臺，不管是哪種方式整合，釋出後臺是一致的；

2.1 接收 & 展示

    通知類 Push 在裝置開啟許可權時，接收訊息後會自動展示通知，這是由 TPNS SDK 實現好的，與原生一致，通知類 Push 標題和內容也只能以通過訊息後臺釋出為準，不能自由更改；其中 通知類 Push 接收通過 onReceiveNotificationResponse() 方法回撥監聽；

XgFlutterPlugin().addEventHandler(
  onReceiveNotificationResponse: (Map<String, dynamic> msg) async {
    print("HomePage -> onReceiveNotificationResponse -> $msg");
    _showDialog('通知類訊息接收', msg.toString());
  },
);
複製程式碼

TPNS_通知類_接收.jpg TPNS_通知類_展示.jpg

2.2 點選

    通知類 Push 訊息點選是通過 xgPushClickAction() 方法進行回撥，之後的業務邏輯可以根據訊息返回的資訊進行處理；小菜為了適配其他的 Push 型別，調整了點選後的操作，預設為啟動 app，小菜通常在【附加引數】中新增 Json 進行資料解析，在進行之後的業務處理；

XgFlutterPlugin().addEventHandler(
  xgPushClickAction: (Map<String, dynamic> msg) async {
    print("HomePage -> xgPushClickAction -> $msg");
    _showDialog('通知類訊息點選', msg.toString());
  },
);
複製程式碼

TPNS_通知類_點選.jpg

3. 透傳類訊息

    透傳類 Push 相比 通知類 Push 要複雜一些，TPNS 只提供了 透傳類 Push 接收，不會進行 Notification 通知展示；因此小菜通過 Flutter-Native 訊息通訊進行處理；其中 Notification 的展示點選需要 Native 方面進行配合處理；

3.1 接收

    透傳類 Push 通過 onReceiveMessage() 進行訊息接收的回撥監聽；之後，小菜建立一個 MethodChannel 將訊息傳遞給 Android Native；

XgFlutterPlugin().addEventHandler(
    onReceiveMessage: (Map<String, dynamic> msg) async {
      print("HomePage -> onReceiveMessage -> $msg");
      _showDialog('透傳類訊息接收', msg.toString());
      await methodChannel
          .invokeMethod('tpns_extras', msg['customMessage'])
          .then((val) {
        print("HomePage -> 透傳類訊息接收 -> $val");
        if (val != null) {
          _showDialog('透傳類訊息點選', val);
        }
      });
    },
);
複製程式碼

TPNS_透傳類_接收.jpg

3.2 展示

    Flutter 端在接收到 透傳類 Push 訊息時，傳送 MethodChannel 到 Android Native，Native 端在解析對應引數進行 Notification 展示；

@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);
    new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(),
        "com.ace.plugin.flutter_app/tpns_notification").setMethodCallHandler(new MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall call, MethodChannel.Result result) {
            if (call != null && call.method.equals("tpns_extras")) {
                setNotification(MainActivity.this, call.arguments.toString());
                mResult = result;
            } else {
                result.notImplemented();
            }
        }
    });
}
複製程式碼

TPNS_透傳類_展示.jpg

3.3 點選

    Native 端展示 Notification 後，小菜嘗試兩種方式，第一種是通過一個新的 BasicMessageChannel 來進行訊息通訊到 Flutter 端，第二種是通過之前 Flutter 傳送的 MethodChannel 進行 result 回撥；小菜雖然應用了第二種方式，但更傾向於第一種，每個事件更加專一；

    Flutter 端接收到 Native 傳送或返回的訊息後便可自由進行業務邏輯處理了；

private void setNotification(Context context, String extras) {
    NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        NotificationChannel channel =
            new NotificationChannel("ace_push", "ace_push_name", NotificationManager.IMPORTANCE_HIGH);
        if (notificationManager != null) {
            notificationManager.createNotificationChannel(channel);
        }
    }
    int notificationId = new java.util.Random().nextInt(1000);

    //Intent intent = new Intent(MainActivity.this, TPNSNotificationReceiver.class);
    //PendingIntent pendingIntent = PendingIntent.getBroadcast(MainActivity.this, 101, intent, 102);
    Intent intent = new Intent(context, MainActivity.class);
    intent.putExtra("push_extras", extras);
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    PendingIntent pendingIntent =
        PendingIntent.getActivity(context, notificationId, intent, PendingIntent.FLAG_CANCEL_CURRENT);
    JSONObject json = JSONObject.parseObject(extras);
    String extrasStr = json.getString("extras");
    json = JSONObject.parseObject(extrasStr);
    String title = json.getString("title");
    String desc = json.getString("desc");
    Notification notification = new NotificationCompat.Builder(context, "ace_push").setContentTitle(title)
        .setContentText(desc)
        .setContentIntent(pendingIntent)
        .setWhen(System.currentTimeMillis())
        .setSmallIcon(R.mipmap.ic_launcher)
        .setAutoCancel(true)
        .build();
    notificationManager.notify(notificationId, notification);
}
複製程式碼

TPNS_透傳類_點選.jpg

3.4 注意事項

    小菜在 PendingIntent 中傳遞的頁面依舊是 MainActivity，可以根據具體的業務邏輯啟動專門的中轉頁面；其中使用 MainActivity 時需要，因為設定了 Flag 為 Intent.FLAG_ACTIVITY_NEW_TASK 因此注意資料的接收通過 onNewIntent 進行接收；

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    if (intent != null && intent.getExtras() != null && intent.getExtras().containsKey("push_extras")) {
        String extras = intent.getStringExtra("push_extras");
        if (mResult != null) {
            mResult.success(extras);
        }
    }
}
複製程式碼

    Flutter TPNS 案例原始碼

    小菜對於 Flutter TPNS 中很多高階方法還未做嘗試，僅實現最基本的通知類和透傳類 Push 的接收展示點選等；如有錯誤請多多指導！

來源： 阿策小和尚

相關文章