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

このチュートリアルでは、イオニクス Capacitor アプリに Firebase を使用して Push Notifications を統合する方法について説明します。 Firebase Cloud Messaging をサポートするために維持されているイオニクス Capacitor プラグインについては、@Capacitor/Capacitor-firebase-messaging を参照してください。 @capgo/capacitor-firebase-messagingイオニクス Capacitor Push

アプリが既に存在する場合は、Capacitor.config.json を変更して、パッケージ ID を含めることができます。 package 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

__CAPGO_KEEP_0__ capacitor.config.json __CAPGO_KEEP_0__ appId. ただし、既存のフォルダが存在する場合は、すべてのファイルでIDを置き換える必要があります。Capacitorはフォルダを作成するのみで、ID自体を更新しないためです。 won’t update the id itself. __CAPGO_KEEP_0__.config.json capacitor.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 Configuration

Firebaseプロジェクトを作成するには、

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

プロジェクトを作成するか、既存のプロジェクトを使用します。 「アプリにFirebaseを追加するには、始めに」をクリックしてください アプリのダッシュボードで行ってください。そうでない場合は、ギアアイコンをクリックしてプロジェクト設定に移動してください プロジェクト設定 アプリを追加してください。

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

google-services.json

Android用のファイル GoogleService-info.plist
ファイル iOS用のファイル

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

Android Pushの準備

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

Androidの設定は以上です。iOSの設定に進みましょう。

iOS Pushの準備

この部分は少し複雑です。まず、 CapgoのアプリIDを作成してください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。

CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。

CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 should be the same as your App ID within Capacitor and Firebase.

CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。 CapgoのアプリIDを作成するには、Apple Developerアカウントの識別子リストにアクセスしてください。最大数のキーを達成した場合は、既存のキーまたは証明書を使用できますが、プロセスは複雑になります。

iOS開発者プッシュキー

ダウンロードした .p8 ファイルをアップロードし、Firebaseにアップロードしてください。Cloud Messagingタブを開き、Key IDとTeam IDの詳細を入力してください。 firebase-upload-ios-key FirebaseからダウンロードしたGoogleService-Info.plistファイルをコピーして、iOSプロジェクトにドラッグしてください。Xcodeプロジェクト内にファイルをドラッグしてください。アプリ/アプリフォルダ内にファイルをドラッグしてください。

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

GoogleService-Info.plist

npx cap open ios

ファイルをアップロードし、Firebaseにアップロードしてください。Cloud Messagingタブを開き、Key IDとTeam IDの詳細を入力してください。 firebase-upload-ios-key iOS開発者プッシュキー 必要に応じてアイテムを複製.

次に、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と登録し、正しいトークンをアプリに返すように修正します。 最後に、Xcodeプロジェクト内でプッシュ通知の Capability を追加します。

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

__CAPGO_KEEP_0__-xcode-capability

capacitor-xcode-capability

Ionic Push Notification Integration

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

Ionic Push Notification Integration

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

ルーティングをアップデートしてください。 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 { }

サービスを作成してください。プッシュ通知を処理するサービスは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 initPush() app/app.component.ts プッシュ通知の情報をdetails pageで処理してください。:

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 services/fcm.service.ts:

<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

Payloadを含むPushメッセージ

追加情報を含むプッシュ通知をテストするには、同ページのガイドに従って、一般情報を指定し、送信したいプラットフォームを選択します。追加 オプション を追加して、プッシュ通知にペイロードを送信します。

firebase-push-payload

このセクションの 詳細オプション に移動して、 カスタムデータ のキー値ペアを追加します。例えば、キー 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

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 サーバーキーを使用して、Firebaseの

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

Firebase Cloud Messaging API YOUR_SERVER_KEY に必要なパラメータを含むPOSTリクエストを送信できます。ここでは、Node.jsと YOUR_DEVICE_TOKEN ライブラリを使用して例を示します。

That’s it! You’ve successfully integrated push notifications in your Ionic Capacitor app using Firebase. Now you can send push notifications to your users on both Android and iOS platforms.

イオンิกから始めて、Capgo Capacitor Push Notifications with Firebase: A Step-by-Step Guide

Capgoが利用されている場合 Ionic Capacitor Push Notifications with Firebase: A Step-by-Step Guide Capgoをエンタープライズの計画と運用に接続する Capgo エンタープライズ for the product workflow in Capgo Enterprise, Capgoの製品ワークフロー Capgo エンタープライズプラグインの代替 Capgo Alternatives for the product workflow in Capgo Alternatives, Capgo Consulting for the product workflow in Capgo Consulting, and Capgo プレミアムサポート Capgo プレミアムサポートの製品ワークフローについて。