はじめに

当記事は、Apache CordovaでiOSアプリとしてbuildしたアプリケーションに対して、FirebaseCloudMessagingを通して、通知機能を実装する過程について記載していきます。
当記事ではCordovaの導入部分は省略しており、機能実装のみの記事となります。予めご了承ください。

Cordovaについてざっくり概要を知りたい方はこちらのページがオススメです。

CorodovaとFirebaseを繋ぐプラグインを導入

先ず、CorodovaアプリにFirebaseを導入します。

公式が提供していたプラグインの更新が止まっており、現在は個人開発コミュニティが提供するプラグインを利用することになるのですが、年々定期的な更新の数が減っている状況で、現在は分立していたアップデートをこちらに集約している模様です。（よって過去の記事を参考にすると動かないこともしばしば）
ですので、特別なこだわりがない限り、cordova-plugin-firebasexの利用がオススメです。

cordovaを管理しているディレクトリ内でターミナルから下記を入力。

cordova plugin add cordova-plugin-firebasex

CocoaPod内を覗くと、必要なものが全て導入されていることが確認出来ます。

Firebaseの設定

「Firebaseコンソール」→「設定」→「アプリを追加」から、利用するプラットフォームを追加します。

例えばiOSアプリを選択した時に表示される画面。

こちらでアプリケーションのバンドルIDを入力し、googeleService-info.plistをダウンロードします。

プロジェクトの「.xcworkspace」ファイルを開き、プラグインを導入したことにより作成された、resource/confiigのディレクトリにダウンロードしたgoogeleService-info.plistを入れたら、準備完了です。

FIrebaseとAppleの連携

※実装にはAppleのデベロッパー登録が必要です。

①AppleDeveloperサイトへアクセス

②「Identifiers」の項からApp Idを作成

※法人でApple Developer登録している人は管理者権限のアカウントのみApp Id作成ボタンが表示されます

通常のiOSアプリの場合は、「App」をクリック。

③秘密鍵の取得

Apple Developer側で行う最後の作業です。
「Keys」の項をクリックし、新しく秘密鍵を生成します。

「Apple Push Notifications service (APNs)」を指定します。

秘密鍵生成の対象とするApp Idを指定した後、登録をすると、秘密鍵のダウンロードページが表示されます。

こちらのダウンロードページは一度のみの表示で、誤ってブラウザを閉じてしまった場合などは最初から秘密鍵を作り直すことになるので要注意です。
同ページにKeyIdなどの情報が表示されているので、ダウンロードと合わせて控えておきます。

⑤Firebaseの設定

「設定」→「クラウドメッセージング」のページで先ほど、ダウンロードした秘密鍵を入力します。
※少し前までは証明書による認証しか出来なかったようですが、現在はGoogleも認証キーの利用を推奨しています（こっちの方が簡単😊）

※こちらの作業はプロジェクトオーナーしか出来ません

「.p8」のファイルのアップロードを忘れずに。

以上で、AppleとFirebaseの連携は完了です！！

コードを書く

Cordovaアプリのハマりポイントの一つにSwiftではなく、Objective-CとしてBuildされてしまうことが挙げられると思います。
実装の参考になりそうな記事はやはりSwiftで書かれているケースが圧倒的多数で、「そもそもネイティブアプリをリリースするに当たってSwiftやFlutterへの知識が乏しいからCordovaを選んだのに・・・。もう分からん😭心折れる😭」という瞬間が何度もありました。

Objective-Cによる、通知機能の実装に関しては、こちらの記事が大変よくまとめられており、大変参考になりました。

classディレクトリ内のAppDelegate.mのファイルに上記リンクの記事を参考にしながらコードを書きます。

CloudMessagingのテストをする

最後に実機でBuildした上で（シュミレーターでは通知を受信できないため）、CloudMessagingから通知を送ります。
実機でアプリを起動すると、下記のように通知の許可を求める表示が出ます。

※もし「許可しない」を押してしまった場合でも、iPhoneの設定から変更可能です。

最後にFirebaseコンソールのCloudMessagingからテスト通知を行います。

実機で上記の写真のように通知を確認できたら、成功です！！(身内ネタで通知送ってテストしていたので、全部黒塗りになってしまいました・・・スイマセン😅)

おわりに

個人的にハマりポイントがかなり多かったので、備忘録的に実装までの流れを記事にさせて頂きました。
FirebaseCloudMessagingはCloudFunctionと組み合わせて、データベースの変更の際に通知を送れたり、ターゲティングしたユーザーだけに通知を送ることも可能です。

それでは、また😋