Capacitor FCM 插件安装与配置指南

Capacitor FCM 插件安装与配置指南

fcm Enable Firebase Cloud Messaging for Capacitor apps 项目地址: https://gitcode.com/gh_mirrors/fcm2/fcm

1. 项目基础介绍

Capacitor FCM 是一个开源项目，旨在为使用 Capacitor 框架的移动应用提供 Firebase Cloud Messaging (FCM) 的功能。它允许开发者通过 Capacitor API 接入 FCM 服务，从而实现跨平台的消息推送。该项目主要使用 TypeScript 编写，为 iOS 和 Android 平台提供支持。

2. 项目使用的关键技术和框架

• Capacitor: Capacitor 是一个跨平台应用开发框架，允许开发者使用原生操作系统功能。
• Firebase Cloud Messaging (FCM): FCM 是 Google 提供的一个消息推送服务，用于向设备发送通知和消息。
• TypeScript: TypeScript 是 JavaScript 的一个超集，添加了静态类型选项。

3. 项目安装和配置的准备工作与详细步骤

准备工作

在开始安装之前，请确保你已经完成了以下准备工作：

• 安装 Node.js 和 npm。
• 安装 Capacitor CLI。
• 创建一个新的 Capacitor 项目。
• 配置 Firebase 项目，并获取必要的密钥文件。

安装步骤

步骤 1: 安装 Capacitor FCM 插件

在项目根目录下打开终端，运行以下命令来安装插件：

npm install @capacitor-community/fcm

步骤 2: 同步原生代码

安装插件后，需要同步原生代码到 iOS 和 Android 项目中：

npx cap sync ios
npx cap sync android

步骤 3: 配置 Firebase

• 对于 iOS:

  • 打开 Xcode，将 GoogleService-Info.plist 文件添加到项目中。
  • 确保在 Xcode 的项目设置中启用了远程通知。

• 对于 Android:

  • 将 google-services.json 文件添加到 android/app 目录下。

步骤 4: 添加 Firebase 配置

在项目的 variables.gradle 文件中添加 Firebase Messaging 的版本：

ext {
    firebaseMessagingVersion = "23.1.2"
}

步骤 5: 集成 Capacitor FCM

在项目的 JavaScript 或 TypeScript 文件中，按照以下示例集成 Capacitor FCM：

import { FCM } from '@capacitor-community/fcm';

// 请求推送权限
await PushNotifications.requestPermissions();

// 注册推送服务
await PushNotifications.register();

// 订阅主题
await FCM.subscribeTo({ topic: 'test' });

// 取消订阅主题
await FCM.unsubscribeFrom({ topic: 'test' });

// 获取 FCM 令牌
const token = await FCM.getToken();

// 刷新 FCM 令牌
const newToken = await FCM.refreshToken();

// 删除 FCM 实例
await FCM.deleteInstance();

完成以上步骤后，你的项目就应该成功集成了 Capacitor FCM 插件，并可以开始使用 FCM 功能进行消息推送了。

fcm Enable Firebase Cloud Messaging for Capacitor apps 项目地址: https://gitcode.com/gh_mirrors/fcm2/fcm