準備

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

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

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

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

developer.apple.com

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

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

console.firebase.google.com

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

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

Xcode

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

Postman を起動
URL : https://fcm.googleapis.com/fcm/send
POST に設定
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"
  }
}