Skip to main content
Capgo ロゴ
チュートリアル

Ionic Capacitor の Firebase を使用したプッシュ通知のステップバイステップガイド

Ionic Capacitor アプリに Firebase を使用したプッシュ通知を組み込む方法を、Android と iOS の両方のプラットフォームのステップバイステップの指示で学びます。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Ionic Capacitor の Firebase を使用したプッシュ通知のステップバイステップガイド

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

最初に、Ionic アプリを作成し、Capacitor を有効にし、パッケージ ID を指定します。パッケージ ID は、アプリの唯一の識別子です。次に、アプリをビルドし、ネイティブ プラットフォームを追加します。 既存のアプリがある場合は、__CAPGO_KEEP_0__.config.json

ionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpush
cd ./pushApp
ionic build
npx cap add ios
npx cap add android

を変更して、アプリ ID を含めることができます。ただし、ネイティブ フォルダが既に存在する場合は、すべてのファイルで ID を置き換える必要があります。__CAPGO_KEEP_0__ はフォルダを一度だけ作成し、ID 自体を更新しないためです。 capacitor.config.json この チュートリアル. However, if your native folders already exist, you will need to replace the id in all files where it appears, as Capacitor only creates the folder once and 、Ionic __CAPGO_KEEP_0__ アプリに Firebase を使用してプッシュ通知を統合する方法を説明します。 capacitor.config.json__CAPGO_KEEP_1__.config.json

{
  "appId": "com.appdactic.devpush",
  "appName": "pushApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  },
  "cordova": {}
}

プッシュ通知のオプションも指定できます。バッジの数を更新する、プッシュ時の音を再生する、または通知が来る際にアラートを表示するなど。

アプリ外でプッシュ通知を設定しましょう。

Firebaseの設定 始めに 新しいFirebaseプロジェクトを作成するか、既存のプロジェクトを使用します。

新しいプロジェクトの場合、名前とデフォルトのオプションを指定します。 新しいアプリがある場合は、 in your app’s dashboard. Otherwise, click the gear icon and go to project settings to add an app.

iOSとAndroidのダイアログは似ており、重要なのはアプリのために__CAPGO_KEEP_0__を使用することです。 __CAPGO_KEEP_0__ 初期ステップの後、次のファイルをダウンロードしてください。

google-services.json

Android用のファイル

  • GoogleService-info.plist iOS用のファイル
  • 次に、プラットフォームを設定します。 Android Pushの準備

Androidの場合、__CAPGO_KEEP_0__を移動してください。

firebase-app-setup-ios

Android Push Preparation google-services.json __CAPGO_KEEP_0__ android/app/ folder.

android-push-file

Androidの設定は終わりました。iOSの設定に進みましょう。

iOS Push の準備

この部分は複雑です。まず、 Apple Developer アカウントの識別子リスト内で、 あなたのアプリのためのApp IDを作成してください。Push通知の機能を選択してください。 iOSの設定は終わりました。 That’s all for iOS.

ionic-ios-push-id

The Bundle ID は、CapacitorとFirebase内でのApp IDと同じでなければなりません。

Now, Keyの作成 と Apple Push Notifications service (APNs)の有効化

です。キーの最大数に達した場合は、既存のキーや証明書を使用できますが、プロセスは複雑になります。

ios-developer-push-key Keyのダウンロード後、.p8 ファイルをアップロードして、Firebaseにアップロードしてください。 Firebaseプロジェクト設定のCloud Messagingタブを開き、ファイルをアップロードし、Key IDとTeam IDの詳細を入力してください。iOSから。 Cloud Messaging firebase-upload-ios-key

Xcodeプロジェクトに変更を加えるには、以下のコマンドを実行してください。

GoogleService-Info.plist

npx cap open ios

ファイルをダウンロードしたFirebaseからダウンロードしたファイルをiOSプロジェクトにコピーしてください。ファイルをXcodeプロジェクトにドラッグしてください。アプリ/アプリフォルダ内にドラッグしてください。必要に応じてコピーしてください。 Copy items if needed ios/App/Podfile ネイティブプラットフォームを更新するには、以下のコマンドを実行してください。.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__:

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

__CAPGO_KEEP_2__

npx cap update ios

Swiftのcodeを ios/App/App/AppDelegate.swift Firebaseと連携し、正しいトークンをアプリに返すように変更してください。

import UIKit
import Capacitor
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure()
    return true
  }

  // All the existing functions
  // ...

  // Update this one:
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().apnsToken = deviceToken
        InstanceID.instanceID().instanceID { (result, error) in
            if let error = error {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
            } else if let result = result {
                NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token)
            }
        }
    }
}

Xcodeプロジェクト内でPush通知の機能を有効にします。

capacitor-xcode-capability

アプリをビルドし、Push通知を統合してください。

Ionic Push Notification Integration

Ionicプロジェクトでサービスと新しいページを作成してください。

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

Update the routing in app/app-routing.module.ts ルーティングを更新して、動的IDを持つ新しいページを含めるようにしてください。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home/:id',
    loadChildren: () => import('./pages/details/details.module').then( m => m.DetailsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Push通知を処理するサービスを作成してください。 services/fcm.service.ts:

import { Injectable } from '@angular/core';
import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed,
  Capacitor
} from '@capacitor/core';
import { Router } from '@angular/router';

const { PushNotifications } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class FcmService {

  constructor(private router: Router) { }

  initPush() {
    if (Capacitor.platform !== 'web') {
      this.registerPush();
    }
  }

  private registerPush() {
    PushNotifications.requestPermission().then((permission) => {
      if (permission.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // No permission for push granted
      }
    });

    PushNotifications.addListener(
      'registration',
      (token: PushNotificationToken) => {
        console.log('My token: ' + JSON.stringify(token));
      }
    );

    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification: PushNotification) => {
        console.log('Push received: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: PushNotificationActionPerformed) => {
        const data = notification.notification.data;
        console.log('Action performed: ' + JSON.stringify(notification.notification));
        if (data.detailsId) {
          this.router.navigateByUrl(`/home/${data.detailsId}`);
        }
      }
    );
  }
}

通知を呼び出す initPush() アプリの app/app.component.ts:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FcmService } from './services/fcm.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcmService: FcmService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // Trigger the push setup
      this.fcmService.initPush();
    });
  }
}

詳細ページの情報を処理する pages/details/details.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { PushNotifications } = Plugins;

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  id = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }

  resetBadgeCount() {
    PushNotifications.removeAllDeliveredNotifications();
  }

}

詳細を表示する pages/details/details.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  My Id from push: {{ id }}

  <ion-button (click)="resetBadgeCount()" expand="block">
    Reset Badge Count
  </ion-button>
</ion-content>

アプリをビルドし、変更を同期し、デバイスにデプロイする

ionic build
npx cap sync

Firebaseでプッシュ通知を送信することができます。

Firebaseでプッシュ通知を送信する

Firebaseでプッシュ通知を送信する方法は複数あります。

特定デバイスのテスト

__CAPGO_KEEP_0__ デバイスにアプリをデプロイした後、登録後のトークンを確認するにはコンソールログを参照してください。このトークンを使用して、インテグレーションが正常に機能していることを確認するために、ターゲット化されたテストプッシュを送信します。Firebaseに移動し、 Cloud Messaging を選択し、Send test message

を選択します。ログからデバイスのトークンを追加します。

firebase-test-push

すべての設定が正しく設定されている場合、デバイスにプッシュ通知が表示されるはずです。

ペイロードを含むプッシュメッセージ 追加情報とプラットフォームを指定してターゲットにするプッシュ通知をテストするには、同じページのウィザードをフォローしてください。追加オプションを追加してプッシュ通知にペイロードを送信します。 additional options

firebase-push-payload

In the 高度なオプション セクションに、 カスタムデータ key-valueペアを追加してください。例えば、キー detailsId と任意の値を使用できます。このデータは、指定されたIDの詳細ページにアプリがナビゲートするのに使用されます。

プッシュ通知を送信した後、指定されたIDの詳細ページにアプリが表示するように、プッシュ通知を受信してください。

Using Firebase API

You can also send push notifications programmatically using the Firebase API. To do this, you need to obtain the サーバーキー Firebaseプロジェクト設定の下で取得する必要があります。 Cloud Messaging tab.

Firebaseサーバーキーを使用すると、Firebase API に必要なペイロードとともに、POSTリクエストを送信できます。Node.jsとライブラリを使用した例はこちらです。 request ライブラリ:

const request = require('request');

const serverKey = 'YOUR_SERVER_KEY';
const deviceToken = 'YOUR_DEVICE_TOKEN';

const options = {
  method: 'POST',
  url: 'https://fcm.googleapis.com/fcm/send',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'key=' + serverKey
  },
  body: JSON.stringify({
    to: deviceToken,
    notification: {
      title: 'Test Push',
      body: 'This is a test push notification with custom data'
    },
    data: {
      detailsId: '123'
    }
  })
};

request(options, (error, response, body) => {
  if (error) {
    console.error('Error sending push:', error);
  } else {
    console.log('Push sent successfully:', body);
  }
});

置き換え YOUR_SERVER_KEY と YOUR_DEVICE_TOKEN あなたの実際のサーバーキーとデバイストークンを使用してください。スクリプトを実行し、デバイスはカスタムペイロードを含むプッシュ通知を受信するはずです。

これがすべてです！あなたはIonic Capacitor アプリにFirebaseを使用してプッシュ通知を成功的に統合しました。AndroidとiOSプラットフォームの両方でユーザーにプッシュ通知を送信することができます。

Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide

あなたがIonic __CAPGO_KEEP_0__ Push Notifications with Firebase: A Step-by-Step Guideを使用している場合 Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide to plan migration and enterprise operations, connect it with Capgo Enterprise Capgoの製品ワークフロー Ionic Enterprise Plugin Alternatives Ionic Enterprise プラグインの代替 Capgo Alternatives Capgoの代替 Capgo Consulting Capgoコンサルティング Capgo Premium Support Capgoプレミアムサポート

リアルタイムの更新機能をCapacitorアプリに搭載

ウェブ層のバグが生じた場合、Capgoを通じて修正を配信し、アプリストアの承認待ちの日数を省略する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて進む。

スタート

ブログ

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発、モバイル、更新
2025年4月26日

Capacitorアプリで2方向のコミュニケーション

__CAPGO_KEEP_0__を通じて避けるべき5つのOTA更新の誤り
開発、セキュリティ、更新
2025年4月13日

OTA更新の5つのよくある間違いを避ける

モバイルアプリライブ更新の5つのセキュリティベストプラクティス
開発、モバイル、更新
2025年1月14日

モバイルアプリライブ更新の5つのセキュリティベストプラクティス

ブログからすべてを参照