ionic Capacitor Firebase推送通知: 步骤指南

In本教程中，我们将在Ionic Capacitor 应用程序中集成推送通知使用 Firebase。有关维护的 Capacitor 插件，带有 Firebase Cloud Messaging 支持，请参见 @capgo/capacitor-firebase-messaging.您不需要特定的服务，但您需要在事先配置几个东西。 Firebase 是一个优秀的选择，因为它是 Android 所必需的，并且您可以轻松使用它发送通知而不使用数据库。

首先，我们将创建一个 Ionic 应用程序，启用 Capacitor 并指定我们的 包 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 以包含您的 appId。然而，如果您的原生文件夹已经存在，则需要在所有文件中替换 id，因为 Capacitor 只创建文件夹一次 不会更新 id 本身. 在 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 配置

首先，创建一个新的 Firebase 项目或使用现有的一个。为新项目提供一个名称和默认选项。

如果您有一个新应用程序，应该在应用程序的控制台中看到 “Get started by adding Firebase to your app” 在应用程序的控制台中点击齿轮图标，进入 项目设置 添加一个应用

对于 iOS 和 Android 来说，弹出框的外观相似，重要的是要使用你的 包 ID 用于应用的

完成初始步骤后，请下载以下文件:

google-services.json 用于 Android 的文件
GoogleService-info.plist 用于 iOS 的文件

接下来，配置平台

Android 推送准备

对于 Android，移动您下载的 google-services.json 文件到 android/app/ 文件夹。 android-push-file Android 的所有事情都完成了。现在让我们配置 iOS。

这个部分更复杂。首先，在您的 Apple 开发者帐户的标识符列表中创建一个 App ID

为您的应用程序。确保您

__CAPGO_KEEP_0__ Capacitor Capacitor 选择 Push 通知功能 从列表中选择。

ionic-ios-push-id

应与您的 __CAPGO_KEEP_0__ 和 Firebase App ID 相同。 Bundle ID should be the same as your App ID within Capacitor and Firebase.

创建一个密钥并启用 Apple Push 通知服务 (APNs) 如果您已经达到密钥数量的最大限制，则可以使用现有的密钥或证书，但该过程更为复杂。 ios-developer-push-key如果您已经达到密钥数量的最大限制，则可以使用现有的密钥或证书，但该过程更为复杂。

现在，

下载完成后 .p8 将其上传到 Firebase。打开 Firebase 项目设置中的 Cloud Messaging 选项卡，上传文件并输入 Key ID 和 Team ID 的详细信息。

firebase-upload-ios-key

现在，通过运行以下命令来修改您的 Xcode 项目：

npx cap open ios

复制 GoogleService-Info.plist 文件并将其拖放到 Xcode 项目中，选择 Copy items if needed.

然后，在 Xcode 项目中添加一个新的 Pod 来添加 Firebase 依赖项。 ios/App/Podfile:

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

使用以下命令更新原生平台:

npx cap update ios

修改原生 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 项目中添加推送通知的能力。

capacitor-xcode-capability

现在，构建您的应用并集成推送通知。

Ionic 推送通知集成

在 Ionic 项目中创建一个服务和一个新页面:

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

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

在details页面处理信息 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();
  }

}

在details页面显示详细信息 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 发送推送通知。

设备特定测试

在将应用程序部署到设备后，您可以检查控制台日志以查看注册后生成的令牌。使用此令牌发送一个针对性的测试推送以确认您的集成正在工作。在 Firebase 中，转到 Cloud Messaging 并选择 发送测试消息。将设备令牌从日志中添加。

firebase-test-push

如果设置正确，应该在您的设备上看到推送通知。

带有载荷的推送消息

要测试带有额外信息的推送通知，请遵循同一页面上的向导，指定一般信息并选择要目标的平台。添加 其他选项 向推送通知中添加一个载荷。

firebase-push-payload

在 高级选项 部分，添加一个 自定义数据 键值对。例如，您可以使用键 detailsId 并选择一个值。这条数据将在应用中用来导航到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 选项卡。

使用服务端密钥，您可以向 Firebase API 发送一个包含所需 payload 的 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 context: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And).

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.

就这样！您已经成功在 Ionic Capacitor 应用中集成 Firebase 推送通知。现在，您可以在 Android 和 iOS 平台上向您的用户发送推送通知。

继续阅读 Ionic __CAPGO_KEEP_0__ 推送通知与 Firebase：一步一步的指南 ionic Capacitor Firebase推送通知：一步步的指南 用于规划迁移和企业运营，连接它 Capgo 企业用于产品工作流程在Capgo 企业 ionic 企业插件替代品用于产品工作流程在ionic 企业插件替代品 Capgo 替代品用于产品工作流程在Capgo 替代品 Capgo 咨询用于产品工作流程在Capgo 咨询，并且 Capgo 高级支持用于产品工作流程在Capgo 高级支持

Ionic Capacitor 与 Firebase 的推送通知：一项步骤指南