Ionic Capacitor プッシュ通知と Firebase: ステップバイステップガイド

このチュートリアルでは、Ionic Capacitor アプリにFirebaseを使用してPush通知を統合する方法を説明します。 Firebase Cloud Messagingをサポートするために、Firebase Cloud MessagingをサポートするためにメンテナンスされているCapacitor プラグインを参照してください。 @capgo/capacitor-firebase-messagingこの設定には、特定のサービスは必要ありませんが、複数の設定を事前に実行する必要があります。 Firebaseは、Android用に必須であり、データベースを使用せずに通知を送信することも簡単なので、優れた選択です。

最初に、Ionic Capacitor を有効にしたIonicアプリを作成し、 パッケージIDを指定します。これは、アプリのユニークな識別子です。次に、アプリをビルドし、ネイティブプラットフォームを追加します。

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

既存のアプリがある場合は、変更できます。 capacitor.config.json __CAPGO_KEEP_0__に含める appId。ただし、既存のフォルダが存在する場合は、すべてのファイルでidを置き換える必要があります。Capacitorはフォルダを作成するのみで、id自体を更新しません。__CAPGO_KEEP_0__.config.json capacitor.config.jsonPush通知をアプリ外で設定しましょう

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

Firebaseの設定

はじめに

新しいFirebaseプロジェクトを作成してください creating a new Firebase project または、既存のものを使用します。新しいプロジェクトの名前とデフォルトのオプションを提供します。

新しいアプリを持っている場合、 “Get started by adding Firebase to your app” アプリにFirebaseを追加することで始めましょう」というメッセージがアプリのダッシュボードに表示されます。そうでない場合は、 プロジェクト設定 に移動してアプリを追加してください。

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

初期ステップ後、以下のファイルをダウンロードしてください。

google-services.json Android用ファイル
__CAPGO_KEEP_0__ iOS用ファイル

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

Android用Push準備

Androidの場合、 __CAPGO_KEEP_0__ ダウンロードしたファイルを android/app/ フォルダに移動してください。

Androidの設定は終わりました。iOSを設定しましょう。

iOS Push Preparation

この部分はもっと複雑です。まず、 Apple Developer アカウントの識別子リスト内でアプリのための App ID を作成してください。 Push Notifications の機能をリストから選択してください。 ionic-ios-push-id Bundle ID

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

次に、 Key を作成してください。 should be the same as your App ID within Capacitor and Firebase.

は、__CAPGO_KEEP_0__ と Firebase 内の App ID と同じでなければなりません。次に、そして有効にする Apple Push Notificationsサービス(APNs)最大キーの数に達した場合は、既存のキーや証明書を使用できますが、プロセスは複雑になります。

ios-developer-push-key

ファイルをダウンロードした後、Firebaseにアップロードしてください。 Firebaseプロジェクト設定のCloud Messagingタブを開き、ファイルをアップロードし、Key IDとTeam IDの詳細を入力してください。 firebase-upload-ios-key Xcodeプロジェクトに変更を加えるには、以下のコマンドを実行してください。 Copy the __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

npx cap open ios

__CAPGO_KEEP_3__ GoogleService-Info.plist __CAPGO_KEEP_0__をダウンロードしたファイルをiOSプロジェクトにドラッグしてください。Xcodeプロジェクトのapp/appフォルダ内にファイルをドラッグし、選択してください。 必要に応じてコピー.

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

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

ネイティブプラットフォームをこのコマンドで更新してください。

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通知のCapabilityを追加してください。

capacitor-xcode-capability

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

Ionic Push Notification

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

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

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}`);
        }
      }
    );
  }
}

function in initPush() app/app.component.ts detailsページで情報を処理します::

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 __CAPGO_KEEP_0__:

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();
  }

}

詳細を表示する __CAPGO_KEEP_0__:

<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を使用してプッシュ通知を送信する方法は複数あります。

特定のデバイスのテスト

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

firebase-test-push

すべての設定が正しく設定されている場合、デバイス上でプッシュ通知を確認できます。

データを伴うプッシュ通知

追加情報を伴うプッシュ通知をテストするには、同じページのウィザードに従って、一般情報を指定し、ターゲットとするプラットフォームを選択します。 追加オプション プッシュ通知にデータを送信するオプションを追加します。

firebase-push-payload

Advanced options 高度なオプション セクションで、 カスタムデータ key-valueペアを追加します。例えば、キーを使用できます detailsId 選択した値とともにデータが送信されます。このデータはアプリ内で、指定されたIDを持つ詳細ページに移動するために使用されます。

プッシュ通知を送信した後、アプリは通知がタップされたときに指定されたIDを持つ詳細ページを表示する必要があります。

Firebase APIを使用します。

Firebase APIを使用してプッシュ通知をプログラムで送信することもできます。以下の手順に従ってください。 Firebaseプロジェクトの設定から、Cloud MessagingタブのServer keyを取得する必要があります。 サーバーキーを使用して、Firebase __CAPGO_KEEP_0__に必要なパラメータを含むPOSTリクエストを送信できます。Node.jsとlibrary:を使用した例は以下のとおりです。 library:を置き換えます。 と

With the server key, you can send a POST request to the Firebase API with the required payload. Here’s an example using Node.js and the request library:

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);
  }
});

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

成功しました！Ionic CapacitorアプリにFirebaseを使用してプッシュ通知を統合しました。AndroidおよびiOSプラットフォームの両方でユーザーにプッシュ通知を送信できます。

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

__CAPGO_KEEP_0__を使用している場合 Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide __CAPGO_KEEP_0__ Enterpriseと接続して、 Capgo Enterpriseの製品ワークフロー for the product workflow in Capgo Enterprise, __CAPGO_KEEP_0__ Alternativesの製品ワークフロー __CAPGO_KEEP_0__ Alternativesの製品ワークフロー Capgo Alternativesの製品ワークフロー Capgo Alternativesの製品ワークフロー Capgo Consulting Capgo Consultingの製品ワークフロー向け Capgo プレミアムサポート Capgo プレミアムサポートの製品ワークフロー向け

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