Notifications Push Ionic Capacitor avec Firebase : Un Guide Étape par Étape

このチュートリアルでは、Firebaseを使用してIonic Capacitorアプリにプッシュ通知を統合します。特定のサービスは必要ありませんが、事前にいくつかの設定が必要です。Firebaseは、Androidで必要とされ、データベースを使用せずに簡単に通知を送信できるため、優れた選択肢です。

ionic start ionic-push-notifications blank --capacitor
cd ionic-push-notifications
npm install

既存のアプリがある場合は、capacitor.config.jsonを変更してappIdを含めることができます。ただし、ネイティブフォルダーが既に存在する場合、Capacitorはフォルダーを一度だけ作成し、IDを自動更新しないため、IDが表示されるすべてのファイルでIDを置き換える必要があります。capacitor.config.jsonでは、バッジカウントの更新、プッシュ時のサウンド再生、通知到着時のアラート表示などのオプションも指定できます。

{
  "appId": "com.company.app",
  "appName": "Your App",
  "plugins": {
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

次に、アプリの外部でプッシュ通知を設定しましょう。

Firebase設定

まず、新しいFirebaseプロジェクトを作成するか、既存のプロジェクトを使用します。新しいプロジェクトの場合は、名前とデフォルトオプションを指定します。

新しいアプリの場合、アプリのダッシュボードに**「Firebaseをアプリに追加して始める」**が表示されます。そうでない場合は、歯車アイコンをクリックしてプロジェクト設定に移動し、アプリを追加します。

iOSとAndroid両方のダイアログは似ており、重要なのはアプリのパッケージIDを使用することです。

初期ステップの後、以下のファイルをダウンロードします：

• Android用のgoogle-services.jsonファイル
• iOS用のGoogleService-Info.plistファイル

次に、プラットフォームを設定します。

Androidプッシュ通知の準備

Androidの場合、ダウンロードしたgoogle-services.jsonファイルを**android/app/**フォルダーに移動します。

これでAndroidの設定は完了です。次にiOSを設定しましょう。

iOSプッシュ通知の準備

この部分はより複雑です。まず、Apple Developerアカウントの識別子リスト内でアプリのApp IDを作成します。リストからプッシュ通知機能を必ず選択してください。

Bundle IDは、CapacitorとFirebase内のApp IDと同じである必要があります。

次に、Keyを作成し、**Apple Push Notifications service (APNs)**を有効にします。キーの最大数に達している場合は、既存のキーまたは証明書を使用できますが、プロセスはより複雑になります。

p8ファイルをダウンロードした後、Firebaseにアップロードします。Firebaseプロジェクト設定のCloud Messagingタブを開き、ファイルをアップロードし、Key IDとiOSのTeam IDの詳細を入力します。

次に、以下を実行してXcodeプロジェクトを変更します：

npx cap open ios

FirebaseからダウンロードしたGoogleService-Info.plistファイルをiOSプロジェクトにコピーします。ファイルをXcodeプロジェクト内のapp/appフォルダーにドラッグし、必要に応じてアイテムをコピーを選択します。

次に、ios/App/PodfileにFirebase依存関係の新しいPodを追加します：

pod 'Firebase/Messaging'

以下のコマンドでネイティブプラットフォームを更新します：

npx cap update ios

ios/App/App/AppDelegate.swiftのネイティブSwiftコードを変更して、Firebaseに登録し、アプリに正しいトークンを返すようにします：

import UIKit
import Capacitor
import FirebaseCore
import FirebaseMessaging

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, MessagingDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()

        Messaging.messaging().delegate = self
        UNUserNotificationCenter.current().delegate = self

        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(
            options: authOptions,
            completionHandler: { _, _ in }
        )

        application.registerForRemoteNotifications()

        return true
    }

    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        Messaging.messaging().token { token, error in
            if let error = error {
                print("Error fetching FCM registration token: \(error)")
            } else if let token = token {
                print("FCM registration token: \(token)")
                NotificationCenter.default.post(
                    name: Notification.Name("FCMToken"),
                    object: nil,
                    userInfo: ["token": token]
                )
            }
        }
    }
}

最後に、Xcodeプロジェクトでプッシュ通知のCapabilityを追加します。

これでアプリをビルドし、プッシュ通知を統合できます。

Ionicプッシュ通知の統合

Ionicプロジェクトでサービスと新しいページを作成します：

ionic g service services/fcm
ionic g page pages/notifications

app/app-routing.moduleのルーティングを更新します