Push Notification (ionic3 + FCM on iOS)

## 準備

- iPhone 実機
- Mac
- Mac に Xcode, ionic をインストールしておく
- アプリのBundle identifier (Bunlde ID) を決めておく。
- Apple Developer Program に有料登録しておく。
- [Postman](https://www.getpostman.com/) をインストールしておく

## 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のメールアドレス]　は空のまま。[ディスクに保存]　を選択して、[続ける]　をクリック。保存先フォルダを適当に指定して、[保存]　をクリック。
8. Web に戻って、[Continue] をクリック。[Choose File...]をクリックして先ほど保存したファイルを選択、[開く]をクリック。[Continue]をクリック。
9. [Download]ボタンをクリックしてダウンロード。[Done]をクリック。
10. ダウンロードしたファイルをダブルクリックすると、キーチェーンアクセスが開く。名前に作成した 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"
  }
}
```