Push Notification (ionic3 + FCM on iOS)

準備

• iPhone 実機
• Mac
• Mac に Xcode, ionic をインストールしておく
• アプリのBundle identifier (Bunlde ID) を決めておく。
• Apple Developer Program に有料登録しておく。
• Postman をインストールしておく

ionic プロジェクトの作成

以下のコマンドを実行して、ionic プロジェクトを作成する (projectname の部分は任意のプロジェクト名)

ionic start projectname blank

途中の質問

Would you like to integrate your new app with Cordova to target native iOS and Android?

には　y

Install the free Ionic Pro SDK and connect your app?

には　n

プロジェクトが作成されたら、config.xml を開き、2行目の id="io.ionic.starter" になっているところを、決めておいてた Bundle identifier に変更。アプリの表示名は <name></name> で変更。

作成したプロジェクトのフォルダで以下のコマンドを実行して FCM プラグインを追加

ionic cordova plugin add cordova-plugin-fcm
npm install --save @ionic-native/fcm

参考
https://ionicframework.com/docs/native/fcm/

app.module.ts に　import 行と、providers に FCM を追加

/src/app/app.module.ts

import { FCM } from '@ionic-native/fcm';
...
 providers: [
...
    FCM
  ]

home.html にボタンを追加

/src/pages/home/home.html

<ion-content padding>
  <button ion-button block (click)="onSubscribe()">Subscribe</button>
  <ion-list *ngIf="mytoken != ''">
    <ion-item>{{ mytoken }}</ion-item>
  </ion-list>
</ion-content>

home.ts にボタンクリック時に Topic の　Subscribe　と Token の取得処理を追加

/src/pages/home/home.ts

import {FCM} from "@ionic-native/fcm";

...
  mytoken: string = '';

  constructor(
      public navCtrl: NavController,
      private fcm: FCM){}

  onSubscribe()
  {
      this.fcm.subscribeToTopic('news');
      this.fcm.getToken()
          .then((data) => {
              this.mytoken = data;
              console.log('token:' + data);
          });
  }

console.firebase.google.com

設定ファイルをダウンロード

1. https://console.firebase.google.com/ にアクセスして、プロジェクトを追加する。
2. 左メニュー [Notifications] をクリックして、 [iOS] のアイコンをクリック
3. [iOS バンドル ID] の欄に Bundle ID を入力
4. [ダウンロード GoogleService-Info.plist] ボタンをクリックして GoogleService-Info.plist ファイルをダウンロード　
5. [X]をクリックしてポップアップを閉じる

ionic プロジェクト

ionic プロジェクトのルートに、firebase のサイトからダウンロードした、GoogleServce-Info.plist ファイルをコピーする

このファイルがビルド時に

/platforms/ios/projectname/Resources/Resources/GoogleService-Info.plist

にコピーされないので、config.xml の <platform name="ios"></platform> の中に、以下のように追加。

   <platform name="ios">
        <resource-file src="GoogleService-Info.plist" target="Resources/GoogleService-Info.plist" />
    </platform>

※ 参照　: IonicでFCMによるpush通知を行う
https://qiita.com/saihoooooooo/items/34712738d5cc6f03cdf4

以下のコマンドで、ionic プロジェクトに ios のプラットフォームを追加

ionic cordova platform add ios

以下のコマンドでビルドを実行。

ionic cordova build ios

Xcode

1. ビルドが終わったら、Xcode で /platforms/ios/projectname.xcworkspace を開く
2. ツリーのプロジェクト名をクリック　(TARGETS,プロジェクト名が選択された状態になる)
3. [Capabilities] タブをクリックして、[Push Notifications] を ON にすると、"Choose a team" と聞いてくるので、Apple Developer Program で登録した名前を選択して、[Select]をクリック。
4. ビルドして実機にインストールできることを確認。

developer.apple.com

APNs 認証キーファイルを取得

1. https://developer.apple.com/ の右上の [Account] をクリックしてサインイン
2. 左のメニュー[Identifiers]の下の[App IDs]をクリック
3. 先ほどビルドした Bundle identifier のアプリが表示されているはずなので、クリック
4. [Edit]をクリック
5. [Push Notification]の、 [Development SSL Certificate] の欄内の [Create Certificate]をクリック
6. On Mac : [キーチェーンアクセス]アプリを起動。メニュー [証明書アシスタント]-[認証局に証明書を要求]を選択。[ユーザーのメールアドレス]欄にメールアドレスを入力。[通称]　欄はキーの名前 Key とかなんとか適当に入力。[CAのメールアドレス]　は空のまま。[ディスクに保存]　を選択して、[続ける]　をクリック。保存先フォルダを適当に指定して、[保存]　をクリック。
7. Web に戻って、[Continue] をクリック。[Choose File...]をクリックして先ほど保存したファイルを選択、[開く]をクリック。[Continue]をクリック。
8. [Download]ボタンをクリックしてダウンロード。[Done]をクリック。
9. ダウンロードしたファイルをダブルクリックすると、キーチェーンアクセスが開く。名前に作成した Bundle identifier の含まれるものを探してクリック、[ファイル]-[書き出す]メニューを選択し、Bundle identifier の名前をつけて区別できるようにして、[保存]をクリック。パスワードは空でも OK。その後ログインのパスワードを入力して、[許可]。(ここで保存したファイルをあとで firebase にアップロードする)

console.firebase.google.com

APNs 認証キーのアップロード

1. firebase で作成したプロジェクトの、左メニュー [Project overview] の右の歯車アイコンをクリックして、 [プロジェクトの設定] をクリック
2. [クラウドメッセージング]タブをクリック
3. [iOS アプリの設定]欄の、[APNs 証明書]の[開発用 APNs 証明書がありません]の右のアップロードをクリックし、先ほど保存した証明書ファイルを選択、[開く]をクリック。保存時にパスワードを指定していた場合はパスワードを入力して、[アップロード]をクリック。
4. アップロード終了後の、[プロジェクト認証情報]にある [サーバーキー] はあとで使うのでメモしておく

Xcode

1. 実機にインストールしたアプリを起動
2. アプリが起動したら、「'AppName' は通知を送信します。よろしいですか？」と聞いてくるので、[許可] をクリック
3. [Subscribe] ボタンをクリック。ボタンの下に Token の文字列が出ることを確認(※)。
4. バックグラウンドで受信するので、Home ボタンを押してアプリをバックグラウンドにしておく。

※ Token の文字列が出てこない場合

Xcode のデバッグエリア([View]-[Debug Area]-[Show Debug Area])で、ボタンクリック時に何かメッセージが出ていないか確認する。

WARN: Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm'

と出た場合は、ionic のプロジェクトから、一旦プラグインを削除して再追加、そのあとまたビルドする

ionic cordova plugin rm cordova-plugin-fcm
ionic cordova plugin add cordova-plugin-fcm
ionic cordova build ios

Push Notification の送信

1. Postman を起動
2. URL : https://fcm.googleapis.com/fcm/send
3. POST に設定
4. Headers に以下の 2つを追加。serverkey は firebase サイトの [サーバーキー] を key= の後に追加

Content-Type : application/json
Authorization : key=serverkey

Body を raw にして、以下の JSON を入力、[Send] をクリックして、受信できれば終了

{
  "to": "/topics/news",
  "notification": {
    "title": "Notification Title",
    "body": "Notification Body",
    "sound":"default"
  }
  "data":{
    "title": "data-title",
    "body": "data-body"
  }
}