Angular + ionic のアプリに Kii Cloudを利用したプッシュ通知の定期配信処理を実装してみた。

はじめに

運用保守しているハイブリッドアプリに定期的にプッシュ通知配信する処理を実装しました。
その過程について記述していきます。

Angular とは？

　　Googleが開発しているJavaScriptフレームワーク。
　　WEBアプリケーションの開発のために使用。
　　MVC・双方向データバインディングといった特徴がある。

ionic とは？

　　Ionic FrameworkはオープンソースのUIツールキットで、
　　HTML、CSS、JavaScriptなどのウェブ技術を使って、 高性能で高品質な
　　モバイルアプリやデスクトップアプリを作ることが可能。

Kii Cloud とは？

　　Kii Cloud は Kii 株式会社が提供する MBaaS(Mobile Backend as a Service） のクラウドプラットフォーム。
　　今回はKii Cloud が提供するプッシュ機能を利用している。

https://docs.kii.com/ja/starts/mobile-functions/push/
(※Kii ドキュメントから画像流用)

環境

　Angular           : 12.0.1
　ionic             : 5.6.9
　Cordova CLI       : 10.0.0
　Cordova Platforms : android 9.1.0 / iOS :6.2.0
　Node.js           : 16.0.0

結論

Kii Cloud を用いてハイブリッドアプリなどに定期的にプッシュ配信できる

手順

1 アプリにログインする際に KiiCloud へのユーザ作成処理 / ログイン処理を実装

・Kii REST APIをアプリ側から実行する(Kiiに端末を登録)

KiiCloudログインAPI:
https://api-jp.kii.com/api/apps/ {APP_ID} /oauth2/token

プッシュ通知用登録API:
https://api-jp.kii.com/api/apps/ {APP_ID} /installations

KiiCloud側にアカウントが作成される
※(APP_IDは KiiCloldのアカウントID)

Angular + ionic サンプルコード

　　(ハイブリッドアプリなので、1ソース[ Typescript ]で iOS Androidへ実装内容が反映)

kii-api.service.ts

  /**
   * Kii REST API を実行
   */
   KiiPushApi = <T>(
    body: string,     // ログイン情報格納  (usernameとpassword)
    headers: HttpHeaders,
    params?: HttpParams
  ): Observable<T> => {

	// パス情報
    const url = `https://api-jp.kii.com/api/apps/ {APP_ID} /oauth2/token`;

    // オプション情報
    const options = {};

    // ヘッダー情報
    headers = headers.set('X-Kii-AppID', { KiiCloudのID });
    headers = headers.set('X-Kii-AppKey', { KiiCloudのAPP_KEY });
    options.headers = headers;

    // リクエストにヘッダー情報を含める設定
    options.observe = 'response';

    const ob = new Observable<T>(observer => {
      this.httpClient
        .post(url, body, options)
        .subscribe(
          this.success(observer, 'POST'),
          this.failure(observer, 'POST')
        );
    });
    return ob;
  };

2 KiiCloud拡張機能 [ServerCode] にプッシュ配信の処理を実装

・トピックの購読処理
対象ユーザーのTOPICに指定したユーザーが送信できる権限[SEND_MESSAGE_TO_TOPIC]を付与する

・プッシュ通知処理
　講読されたトピックにメッセージが送信されたとき、そのユーザーのデバイスに対してプッシュ通知が送信されます。

3 WEB側にcron処理を実装　

・KiiCloudへのログインを実施
・対象データの件数分、以下のServerCodeの処理をリクエストする

https://api-jp.kii.com/api/apps/{APP_ID}/server-code/versions/current/ {プッシュ送信関数名}

4 プッシュ通知イメージ (Android実機)

iOS / Androidに定期的にプッシュ通知が配信されるようになりました！

おわりに

コミュニケーションサービスなどにおいてエンドユーザ様からの返信などにいち早く気付けることは大事なので、
プッシュ通知を配信し、お知らせやリマインドできることは強み。

WEBサービスではメール配信などでしかアラートできない部分を、
アプリを使用することで情報を早くキャッチアップできる、取りこぼしを防止できる部分などを今後も機能として取り入れていきたいと思います。

参考資料

KiiCloud

Angular

ionic