Firebase云消息传递是一种高效而简单的方式，可以将系统中的通知或数据分发给智能手机终端用户。即使它在官方网页上有很好的文档和很多文章，我相信大多数文章没有展示如何在短时间内开发应用程序，涵盖了Ionic框架、Firebase Cloud Messaging(FCM)服务和Capacitor的集成。在本教程中，将通过以下主要步骤解释实现这样一个应用程序所需的所有组件，从服务器端实现到客户端：

1. 实现使用Capacitor推送通知的Ionic应用程序
2. 在Android Pixel模拟器中测试应用程序
3. 了解Firebase云消息传递类型
4. 配置Firebase帐户和应用程序创建
5. 在Android模拟器上测试Ionic应用程序
6. 通过Python实现内容分发器

请记住，软件库可能随时间过时，请在开始使用前始终检查库的有效性以节省时间。

在开始以下步骤之前，值得注意的是下面的步骤是在OSx环境中执行的，因此与Windows开发环境略有不同。顺便提一下，在此之前别忘了安装Android Studio ：）。

1. Ionic应用实现和Capacitor推送通知集成

Ionic 应用是使用 Web 框架开发 Android 或 iOS 应用程序的另一种尝试。它使用 Android 和 iOS 框架特性的新颖功能来构建外观漂亮的应用程序。从这个角度来看，我们可以认为 Ionic 框架在本地应用程序中使用 Web 服务器。所有与硬件组件的通信都是通过 Capacitor 框架执行的。为了能够接收消息作为通知，应该使用 Android 操作系统的服务通知，因此，在capacitor push notification插件是这种情况下的一个重要组件。

集成电容器推送通知的Ionic应用程序的实现由许多步骤组成，必须小心地执行。

这些是：

• 检查node版 本，如果没有，则适用于Mac OSX环境

$node --version

如果没有可用的版本且您已安装了Homebrew：

$brew install node@16

• 假设已经从官方网站安装了 node ，则应该安装 ionic/cli 库：

npm install -g @ionic/cli

• 通过以下方式创建简单的ionic应用：

ionic start fcm-app blank --type=angular
cd fcm-app/
npx cap init

上述最终命令会请求应用名称和包ID，例如fcm-app和com.xyz.fcmapp。

这些过程完成后，ionic应该可以成功构建，相关的平台文件夹将会按照下面的方式创建：

ionic build 

在ionic build之后，您应该能够通过以下方式访问网页

ionic serve 命令会在终端中打开一个 Web 服务器，网址为 http://localhost:8100

页面打开后，将会看到以下视图

• 添加android平台，然后添加与android相关的文件夹。

npm install @capacitor/android
npx cap add android

上一个命令的结果：

这意味着，Java版本过时，添加Android库时使用的gradle版本需要Java 11。安装Java 11由两个步骤组成，首先安装Java 11，然后将安装路径添加到.bash_profile。

如果您不知道如何执行此操作，请参考另一个媒体作者的链接。

• 安装电容器插件

如果没有问题，现在我们可以安装电容器/推送通知插件，并与 Android 文件夹同步，只需调用以下命令：

npm install @capacitor/push-notifications
npx cap sync

• 添加必要的代码以处理 FCM 操作

根据您的源代码，您可以在任何需要的位置添加以下代码块，在本例中，我们将其简单地添加在主页组件中。

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

import {
ActionPerformed,
PushNotificationSchema,
PushNotifications,
Token,
} from ‘@capacitor/push-notifications’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
ngOnInit() {
console.log(‘Initializing HomePage’);

// Request permission to use push notifications
// iOS will prompt user and return if they granted permission or not
// Android will just grant without prompting
PushNotifications.requestPermissions().then(result => {
if (result.receive === ‘granted’) {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// Show some error
}
});

PushNotifications.addListener(‘registration’, (token: Token) => {
console.log(token.value);
alert(‘Push registration success, token: ‘ + token.value);
});

PushNotifications.addListener(‘registrationError’, (error: any) => {
alert(‘Error on registration: ‘ + JSON.stringify(error));
});

PushNotifications.addListener(
‘pushNotificationReceived’,
(notification: PushNotificationSchema) => {
alert(‘Push received: ‘ + JSON.stringify(notification));
},
);

PushNotifications.addListener(
‘pushNotificationActionPerformed’,
(notification: ActionPerformed) => {
alert(‘Push action performed: ‘ + JSON.stringify(notification));
},
);
}
}

上面的代码片段是由ChatGPT提供的，不过这个链接中同样也有。代码中函数的所有含义都在capacitor网站中有所解释。如果你知道java插件在capacitor和ionic之间是如何工作的，那么建议您也看看这个GitHub链接。

该代码简要说明我们将通过 FCM 的注册过程收到注册令牌，根据所选的消息类型，通知、数据或两者都可以直接在应用程序中接收消息内容，或者以通知的形式在应用程序外部接收消息。一旦应用程序完成，我们需要构建 Ionic 应用程序并与android/文件夹进行同步，如下：

ionic build
npx cap copy

2. 在 Android Pixel 4 模拟器上测试应用

Android Studio 提供了许多模拟器来测试你的应用，这些测试都是通过 API 级别为 31 的 Pixel 4 来完成的。你还可以在设备管理器中安装此模拟器，并在模拟器中运行此应用。

1. 通过导航设备管理器 > 点击创建设备 > 选择Pixel 4 API 31 ，然后安装它来创建虚拟设备。

2. 在 首选项>系统设置>Android SDK中安装 Android 12.0 SDK。请注意，如果未安装，您将不会收到通知。

3.现在，我们可以通过选择Pixel 4模拟器来运行应用程序。一旦应用程序启动，您将在设备管理器下的右侧看到模拟器。一旦执行了ionic serve，消息的内容将与之前的步骤中显示的内容相同。

3. 理解Firebase云消息传递类型

FCM在传输通知消息时提供了许多不同的功能。在收到消息之前，首先需要注册Android设备，这在前面的部分中已经解释了。每次应用程序安装时，都会发生新的设备注册，所有这些注册操作都由Firebase处理。

现在，在ionic方面，我们没有定义任何消息类型。然而，在创建应用程序和发送消息从应用程序到 FCM 时，需要消息类型。为此，我们需要首先了解可用的消息类型。根据官方 Google 网页，有三种消息类型：

• 通知：该消息直接由Android通知系统处理，消息内容无法在应用程序中使用。换句话说，无论应用程序在前台还是后台运行，通知消息及其内容都将落入手机中。一旦打开应用程序，传输的消息内容将不可在应用程序中使用。消息格式如下：

{
 "message":{
 "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
 "notification":{
 "title":"Portugal vs. Denmark",
 "body":"great match!"
 }
 }
}

• 数据：传入的数据将直接在应用程序中处理，这意味着消息将不会由 Android 操作系统通知处理程序处理，换句话说，Android 服务将接收并处理它。无论应用程序处于前台还是后台，这都不重要，因为应该执行一个一直运行的服务。消息格式基于以下键：值格式：

{
 "message":{
 "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
 "data":{
 "Nick" : "Mario",
 "body" : "great match!",
 "Room" : "PortugalVSDenmark"
 }
 }
}

• notification+data：通知消息由安卓通知系统处理，在打开通知后，挂起的数据负载也会在应用程序中可用。接收一个简单的消息可以显示如下：

{
 "message":{
 "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
 "notification":{
 "title":"Portugal vs. Denmark",
 "body":"great match!"
 },
 "data" : {
 "Nick" : "Mario",
 "Room" : "PortugalVSDenmark"
 }
 }
}

所有消息都来自官方网站。

对于我们的示例，通知 消息就足够了，因为我们的目的只是从 Python 应用程序向 Android 应用程序发送通知。消息的创建将在以下部分执行，我们需要首先在 Firebase 平台中创建一个 FCM 应用。

4. Firebase 账户配置和 Android 应用程序创建

在Firebase中创建应用程序是一个众所周知的主题，因此有许多资源可以很好地解释它。例如，这个链接展示了逐步创建应用程序以及稍后在Android应用程序中所需的修改。如果我们总结所需的步骤，它们可以分为三个步骤：

1. 创建Firebase项目
2. 在Firebase项目下创建基于Android的应用
3. 输入Android的 project-id、包名 com.xyz.fcmapp 和存储 google-service.json，稍后将在Ionic项目中使用。

完成这些步骤后，您应该有一个名为google-service.json的文件，该文件将放置在android/app/文件夹中。请注意，android文件夹是由ionic框架生成的文件夹，其中包括所有必要的文件。添加此文件后，您还可以按下面显示的方式测试应用程序，以查看是否接收到消息：

1. 点击添加项目

2. 输入项目名称

3. 您可以启用或禁用 Google Analytics，在此情况下禁用。

4. 项目创建完成后，您将被引导至以下页面，您可以单击标有红色的 android 图标来创建应用程序。

5. 应用程序的包名在创建 Ionic 应用程序时已经给出，我们在此添加 com.xyz.fcmapp 。昵称也可以添加。

6. 第二步，您需要下载 goole-services.json 文件，并将其放置在 android/app/ 文件夹中。通过执行此步骤，我们已经生成所需的 ionic 应用程序文件。

7.服务器端应用程序需要另一个配置文件，换句话说，需要私钥来识别Firebase应用程序，以便Firebase应用程序允许其发送消息。在下面您将看到应用程序名称，悬停上去时将出现设置图标，需要单击它。

8. 在设置页面，您应该切换到 服务帐号，并使用 python SDK 生成 私钥。一旦单击“生成新的私钥”，文件就会下载，它将在服务器端应用程序中使用。

5. 在 Android 模拟器上测试 Ionic 应用程序

1. 现在，我们可以通过选择Pixel 4模拟器来运行应用程序。一旦应用程序启动，您将看到如下所示的注册消息。这意味着FCM服务已注册此应用程序，并传递设备令牌。

2. 在添加google-services.json到android/app/文件夹并重新编译后，测试通知应用是否工作，您可以在Firebase项目内点击Cloud Messaging 框。

3. 之前的步骤将会直接你到下一页，在该页面你可以点击创建你的第一个活动按钮。

4. 此步骤需要您选择一种消息类型。 如上所述，我们将使用 通知消息。 如下图所示，即使用户在应用程序外，也可以收到通知消息，而应用内消息只有在用户在应用程序内时才会收到。

5. 接下来的步骤是创建通知标题、文本，最后按下“发送测试消息”，如下图所示。这将直接向您的 Android 应用程序发送通知消息。

6. 在显示的字段中添加 FCM registration-token，并按下 测试 按钮以发送消息。

7. 根据我们的实现，如果应用在前台，推送消息将直接显示在应用程序中。请注意，这不是通常的行为，我们实现了警示消息。为了查看发送的消息，您可以记录它。

8. 如果应用程序在后台运行或完全关闭，则通知消息将像所有其他通知一样被视为。如果您点击它，则您的应用程序将被打开。再次提醒，只要在此情况下使用通知，您发送的消息内容就不会转移到您的应用程序中。

6. 向终端用户发送通知的服务器端实现

从应用程序发送通知消息有多种实现方式。首先，FCM SDK支持不同的编程语言和独特的通信协议。在此示例中，我们将使用HTTP协议，因为它是最简单的。示例代码在Firebase网站中提供。即使有一个很好的示例，我还是问了ChatGPT如何发送消息。它为我提供了两个不同的示例，一个使用pyfcm，另一个使用firebase-admin。重要的是要知道，将接收消息的客户端的注册令牌必须是已知的。这意味着您应该将它们存储在某个地方，原因是Firebase不提供这些信息。如果我们回到实现，这里是解决方案：

假设您的平台上已安装python和pip，在此示例中，我们将使用firebase-admin库，因为它受到官方网站的支持。要运行应用程序，我们需要注册令牌和服务器密钥。第一个信息已经通过日志消息从Android应用程序的第一次注册中可用，第二个信息服务器密钥在配置firebase应用程序时也会生成。

实现非常简单，您只需向两个库说明想要发送什么以及发送给谁，并提供您的凭据。

!pip install firebase-admin

import os
os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "path/to/serviceAccountKey.json"

我下载的文件以 task-notifier-42ec0-firebase-adminsdk-…json. 开头。应将该文件指定为GOOGLE_APPLICATION_CREDENTIALS。安卓应用的注册令牌应放置在以下代码中。最后，您应该执行该代码。

from firebase_admin import messaging
import firebase_admin

try:
# Use the application default credentials
firebase_admin.initialize_app()

# This registration token comes from the client FCM SDKs.
registration_token = “YOUR_REGISTRATION_TOKEN”

# See documentation on defining a message payload.
message = messaging.Message(
notification=messaging.Notification(
title=’Hello’,
body=’This is a test notification’
),
token=registration_token
)

# Send a message to the device corresponding to the provided
# registration token.
response = messaging.send(message)
# Response is a message ID string.
print(response)

except Exception as e:
print(“An error occurred:”, e)

当您启动此Python脚本时，它将向FCM服务器发送一条消息，然后通知消息将出现在android模拟器上，如下所示。

7. 奖励: ionic 应用的 Makefile，由 ChatGPT 提供

为了简化使用Makefile构建ionic应用的实现过程，我向ChatGPT询问了所需的命令，以下是结果：

# Makefile for Ionic project

# Variables
PROJECT_NAME = myApp

# Ionic commands
start:
ionic start $(PROJECT_NAME) blank

serve:
ionic serve

generate:
ionic generate $(GENERATE_TYPE) $(GENERATE_NAME)

build:
ionic build $(PLATFORM)

run:
ionic run $(PLATFORM)

# Example usage
# make generate GENERATE_TYPE=page GENERATE_NAME=myPage
# make build PLATFORM=ios
# make run PLATFORM=android

它运作得很好，您可以根据自己的需要扩展此文件。

概述

在本教程中，我们展示了如何将 FCM 集成到服务器端应用程序中，以将消息分发给安卓用户的 Ionic 应用程序。在实现步骤中，我们还体验了 ChatGPT 的强大之处，并展示了它如何简化简单应用程序的实现过程。我建议每次都检查生成的代码，即使 ChatGPT 的运作良好，我们也不应总是信任所生成的代码。

参考资料

1. 在https://devdactic.com/push-notifications-ionic-capacitor中使用ionic实现的类似方法
2. 使用本机android应用程序和python实现的FCM，https://www.yippeecode.com/topics/android-firebase-cloud-messaging-in-python/