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

In this tutorial, we will integrate push notifications in an Ionic Capacitor app using Firebase. For a maintained Capacitor plugin with Firebase Cloud Messaging support, see @capgo/capacitor-firebase-messaging.您不需要特定的服务，但您需要在此之前配置几个东西。Firebase 是一个优秀的选择，因为它是 Android 所必需的，并且您可以轻松使用它来发送通知，而无需使用数据库。

首先，我们将创建一个带有 Capacitor 启用的 Ionic 应用，并指定我们的 package 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": {}
}

__CAPGO_KEEP_0__

Firebase 配置

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

如果您有一个新的应用程序，您应该在应用程序的仪表板中看到 “添加 Firebase 到您的应用程序中开始使用” “通过添加 Firebase 到您的应用程序” 在应用程序的仪表板中点击齿轮图标并进入 项目设置

添加应用程序。 package id 包 ID

下载以下文件后，继续执行下一步：

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

接下来，配置各个平台。

Android 推送准备

对于 Android，移动下载的 google-services.json 文件到 android/app/ 目录中 文件夹。

安卓配置完成。现在让我们配置iOS。

iOS推送准备

这个部分更复杂。首先在您的Apple Developer帐户的标识符列表中为您的应用创建一个App ID。确保您从列表中选择推送通知能力 ionic-ios-push-id The

包ID

The Bundle ID 应与您的 App ID 在 Capacitor 和 Firebase 中保持一致。

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

ios-developer-push-key

ios-developer-push-key .p8 tab Live Update Cloudflare

firebase-upload-ios-key

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

npx cap open ios

复制 GoogleService-Info.plist 将您从 Firebase 下载的文件复制到 iOS 项目中。将文件拖放到 Xcode 项目中，选择 app/app 文件夹内的项目，选择 复制项如有需要.

在 ios/App/Podfile:

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

中添加 Firebase 依赖项的新 Pod

npx cap update ios

修改原生 Swift code 修改本机 Swift __CAPGO_KEEP_0__ 在 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/firebase.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 发送推送通知有多种方法。

设备测试

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

firebase-test-push

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

带有载荷的推送消息

测试带有额外信息的推送通知，按照同一页面上的向导，指定一般信息并选择要目标的平台。添加 额外选项 发送带有载荷的推送通知

firebase-push-payload

在 高级选项 section, 添加一个 自定义数据 key-value 对。例如，您可以使用 key detailsId 并选择一个值。这将用于在应用程序中导航到 ID 指定的详细页面。

发送推送通知后，应用程序应接收它并在点击通知时显示 ID 指定的详细页面。

使用 Firebase API

您还可以使用 Firebase API 程序matic 地发送推送通知。要实现此功能，您需要从 Firebase 项目设置中获取 服务器密钥 在 Cloud Messaging 选项卡下。 使用服务器密钥，您可以向 Firebase __CAPGO_KEEP_0__ 发送一个包含所需负载的 POST 请求。以下是使用 Node.js 和的示例 SDK

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

替换 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__ 推送通知教程：一步一步的指南 Ionic Capacitor Firebase推送通知：一步步指南 Ionic __CAPGO_KEEP_0__ 推送通知教程：一步一步的指南 Capgo 企业版为产品工作流程在Capgo企业中 __CAPGO_KEEP_0__ 企业中的产品工作流程中，为Ionic企业插件替代品的产品工作流程 Capgo替代品为Capgo替代品的产品工作流程 Capgo咨询为Capgo咨询，并且 Capgo高级支持为Capgo高级支持的产品工作流程

Ionic Capacitor 使用 Firebase 的推送通知：一步步指南