【誰よりも丁寧に解説！】SwiftUI × Firebaseでプッシュ通知を受け取るiOSアプリを実装
こんにちは、やまだゆうです。
今回はSwiftUIとFirebaseの組み合わせでプッシュ通知を受け取るアプリを実装する方法をお伝えします！
この記事はこんな悩みを解決します
- SwiftUIとFCMでプッシュ通知機能を作りたい
- 実装方法を調べても出てくる情報が断片的でわかりにくい
この記事ではSwiftUIでFCMを使ったプッシュ通知を実装する方法をたくさんのスクリーンショットやコードサンプルとともに徹底的に説明します！
この記事の内容
スポンサーリンク
前提・全体像
前提
本記事は以下の準備が完了していることが前提です。
- Apple Developer Programの登録
- Firebaseの登録 ※Googleアカウントを持っていればすぐに利用できます。
参考情報
基本的には公式サイトの説明を順序立ててわかりやすくしています。
Apple プラットフォームで Firebase Cloud Messaging クライアント アプリを設定する
Apple Developer ProgramでAPNs認証キーを作る
まずはプッシュ通知に必要なAPNs認証キーを作りましょう。
- 【Key ID】の内容をコピー
※FirebaseにAPNs認証キーを登録するときに使います。 - 【Download】ボタンをクリックして認証キー（p8ファイル）をダウンロード
※FirebaseにAPNs認証キーを登録するときに使います。 - 【Done】をクリック
スポンサーリンク
Firebaseプロジェクトをアプリに組み込む
この項目でやること
Firebaseプロジェクトの作成＆iOSアプリの登録
Firebase コンソール にアクセスします。
ここは好みによりけりなので有効にしてもいいです。今回はプッシュ通知に集中したいので無効化しています。
次に設定ファイルをダウンロードします。
ダウンロードした GoogleService-Info.plist ファイルを Xcode プロジェクトのルートディレクトリに配置し、 すべてのターゲットに追加します。
Firebase SDKをインポート
Firebase SDKをアプリにインポートする方法はいくつかあります。ここではCocoaPodsを使ってインポートします。
※CocoaPodsが未インストールの方は、上記リンク先にインストール方法へのリンクが載っているので参考にしてみてください。
プロジェクトのルートディレクトリでPodfileを作成します。
pod initアプリで使いたいFirebase Podを追加します。
target 'PushNotificationSample' do
use_frameworks!
# FCM の Firebase Pod を Podfileに追加
pod 'FirebaseMessaging'
target 'PushNotificationSampleTests' do
inherit! :search_paths
end
target 'PushNotificationSampleUITests' do
end
end
Podをインストールします。
pod install --repo-update.xcworkspaceファイルが作成されるのでXcodeで開きましょう。これからはここでコーディングを行います。
.xcworkspaceファイルをXcodeで開く初期化コードを追加
AppDelegate.swiftファイルを作成して、以下のDelegateを追加します。
import SwiftUI
import FirebaseCore
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
FirebaseApp.configure()
return true
}
}
アプリの起動時に Firebase を接続するために、アプリのメインエントリポイント（今回の場合はPushNotificationSample.swift）に次の初期化コードを追加します。
@main
struct YourApp: App {
// register app delegate for Firebase setup
@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
var body: some Scene {
WindowGroup {
NavigationView {
ContentView()
}
}
}
}APNsとFirebaseを連携させる
この項目でやること
APNs認証キーをFirebaseプロジェクトにアップロードする
FirebaseとAPNsが連携できるように、APNs認証キーをFirebaseプロジェクトにアップロードします。
キーIDとチームIDはそれぞれApple Developer Programの以下の部分で確認ができます。
リモート通知に登録する
アプリを起動したときにリモート通知に登録できるようにAppDelegate.swiftに以下のコードを追加します。
import SwiftUI
import FirebaseCore
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
FirebaseApp.configure()
// 追加（ここから）
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
UNUserNotificationCenter.current().requestAuthorization(
options: authOptions,
completionHandler: { _, _ in }
)
application.registerForRemoteNotifications()
// 追加（ここまで）
return true
}
}
Messagingのデリゲートを追加する
トークンを受信するためにMessagingのデリゲートをAppDelegate.swiftに設定します。
import SwiftUI
import FirebaseCore
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
FirebaseApp.configure()
UNUserNotificationCenter.current().delegate = self
let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
UNUserNotificationCenter.current().requestAuthorization(
options: authOptions,
completionHandler: { _, _ in }
)
application.registerForRemoteNotifications()
// デリゲートを追加
Messaging.messaging().delegate = self
return true
}
}
APNsトークンをFCMトークンにマッピングする
SwiftUIで作るiOSアプリでFCMを使えるようにするためには、APNsトークンをFCMトークンにマッピングする必要があります。
引数が異なるもう1つのapplication()メソッドを実装します。
import SwiftUI
import FirebaseCore
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
// 中略
}
// 追加
func application(_ application: UIApplication,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
// APNsトークンをFCMトークンにマッピング
Messaging.messaging().apnsToken = deviceToken
}
合わせて、FirebaseAppDelegateProxyEnabledにNOを設定します。これがないとプッシュ通知を受け取れません。
※公式ページにもしれっと書いてあって、見つけ出すのに苦労した思い出があります。
スポンサーリンク
いざ、テスト
トークンを表示するコードを追加
生成したトークンを受け取り、表示するためのコードを追加します。
import SwiftUI
import FirebaseCore
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
// 中略
}
func application(_ application: UIApplication,
didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
// 中略
}
}
extension AppDelegate: UNUserNotificationCenterDelegate, MessagingDelegate { /* MessagingDelegateはFIRMessagingDelegateの別名 */
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)")
}
}
}
}アプリをビルドする
アプリをビルドして、生成したトークンがXcodeのログに表示されればOKです！
実運用では、取得したトークンをサーバーに渡す処理をさらに追加してプッシュ通知を送れるようにします。
以上、長い道のりでしたがここまで付いてきてくれてありがとうございます。お疲れ様でした！
yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村