Firebase 云消息与 Ionic 应用程序

Posted 2023-02-22

【中文标题】Firebase 云消息与 Ionic 应用程序

【英文标题】：Firebase Cloud Messaging with Ionic app

【发布时间】：2016-10-05 19:33:08

【问题描述】：

我正在使用 ionic 框架（网络技术）开发 android/ios 应用程序，我想借助新的 firebase 功能 FCM 添加推送通知。

现在我正在查看以下文档：

https://firebase.google.com/docs/cloud-messaging/chrome/client#project-setup

说：

Chrome 中的网站可以通过 Service Worker 和 Web 实现推送消息 应用清单遵循 Webpush 标准。 Chrome 应用和扩展程序可以直接通过 chrome.gcm 访问 FCM 服务 API。

这是否意味着我可以在我的适用于 android/ios 的 ionic 应用中使用它，因为应用是使用 cordova 构建的？

如果有任何实现的示例，我可以看到并从中学习，这将非常有帮助。

谢谢

【问题讨论】：

我更喜欢使用 OneSignal、Pushbots 等第三方服务。我认为新的 Firebase 通知仅与原生 iOS/Android 兼容，并且没有任何关于 Cordova 的文档。检查它here

那么您找到解决方案了吗？

@Murtuza，我用过这个> npmjs.com/package/cordova-plugin-fcm

@Murtuza 你找到解决办法了吗

@HassanAbbas 我们尚未使用 Firebase 在我们的应用中实现聊天功能。可能是几周后。如果它有效，将更新。

【参考方案1】：

我知道这个问题已经是侏罗纪了，但只是为未来使用 Ionic 框架的移动开发人员提供信息。现在可以 100% 工作了，过去 3 周我一直在使用它。

你只需要添加这 3 个插件

⁠⁠⁠ionic plugin add cordova-plugin-inappbrowser
ionic plugin add cordova-plugin-fcm
ionic plugin add cordova-plugin-velda-devicefeedback

接下来，转到Firebase Console 和

创建一个新项目并为其命名； 选择您喜欢的平台（ios/android）； 添加您的

包名

，这是您的 id 应用程序：您可以在

config.xml

中看到它（类似于

id="com.ionicframework.someTest123"

)。

Firebase 控制台将为您提供一个名为 google-services.json 的文件。

将其粘贴到

platforms/android/

目录中 在 CLI 上运行 ionic build android

您现在可以前往通知页面 > 新消息

确保在发送推送之前选择您添加的应用程序（应用程序的 ID） 通知。

【讨论】：

嗨，博拉格丹。它对我有用。但我想知道如何在我的 ionic 应用程序中获取设备 ID？

请问您打算使用设备 ID 做什么？

我将使用它向特定用户发送通知。无论如何我已经通过遵循 ionic 的更新文档解决了这个问题。

嗨@JCBorlagdan，我关注了所有内容，当我通过通知页面发送消息时，我收到“发送消息错误”。我是否必须在 app.js 或任何地方添加任何内容？在 FCM 中创建新项目时，我没有执行提到的最后一步 - 添加依赖项 - gradle 3.0 并应用插件：'com.google.gms.google-services'。如果我在构建时添加它会引发错误。

当我按照上面的说明进行构建时，我得到以下信息（我正在使用 Ionic2）。请问有什么想法吗？ Execution failed for task ':processDebugGoogleServices'. > Please fix the version conflict either by updating the version of the google-services plugin (information about the latest version is available at https://bintray.com/android/android-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 9.2.0.

【参考方案2】：

我设法让它在 IOS 上运行。这就是我所做的。

转到 Firebase 并添加一个用于云消息传递的新 IOS 应用。 按照说明填写应用 ID 等的简单表格。您将生成 GoogleServices-Info.plist 文件并下载。忽略可可足类的东西。你不需要它。

导航到您的 Ionic 应用平台/ios 并使用 XCode 打开 xcodeproject 文件。

将下载的 GoogleServices plist 文件粘贴到 Xcode 项目文件的根目录。

运行。或者您可以尝试保存然后执行ionic build ios、ionic emulate ios。

我之前添加了旧的 phonegap-plugin-push。这必须从我的 config.xml 中删除，否则 IOS 将无法成功构建。

【讨论】：

对于使用 Phonegap 构建的人，一个选项是使用以下插件，分叉它，然后将您的 GoogleServices / google-services 代替占位符文件，提交，然后将您的分叉插件用作本地插件（cordova（或离子）插件添加/path/to/my/plugin/my.plugin.folder.here/）成功构建，不会在iOS上崩溃应用程序（与原始插件不同），并且具有漂亮的界面:) github.com/guyromb/cordova-plugin-fcm-plus

当您在 firebase 中创建 ios 应用程序时，您是否在步骤 3 和 4 中进行 cocoapods 设置？当我这样做时，如果我之后尝试从命令行运行ionic build ios，我会收到此错误； ` 以下构建命令失败：CompileC build/Apparent.build/Debug-iphonesimulator/Apparent.build/Objects-normal/i386/AppDelegate.o Apparent/Classes/AppDelegate.m normal i386 objective-c com.apple.compilers.llvm .clang.1_0.compiler (1 failure) 错误：命令错误代码65：...

您是否在此添加了cordova-plugin-fcm？

【参考方案3】：

您可以检查一下：适用于 iOS 和 Android https://github.com/mail2lulu/cordova-plugin-fcm.git

【讨论】：

仅链接的答案并不是非常有用；链接可能会损坏或以其他方式更改。请将链接中的相关上下文添加到您的答案中。

【参考方案4】：

您可以毫无问题地将 FCM 与 cordova 一起使用，但它需要为您想要使用的 Android、iOS 和其他平台编写本机代码。幸运的是，cordova 社区很大，工作已经完成。以下插件声明完全按照您的意愿行事。

https://www.npmjs.com/package/cordova-plugin-fcm

我自己还没有尝试过这个插件，但是自述文件说你可以从 javascript 订阅主题并调用onNotification 函数来监听通知，当你的应用程序在前台时很方便。

【讨论】：

如何在后台获取通知。我们需要为此进行服务器端编码吗？

@Murtuza 您确实需要服务器端代码，我尝试过的插件不允许您在前端执行这些操作。不过，徽章编号可以从前端更新。

【参考方案5】：

对 JS/浏览器的 FCM 支持依赖于浏览器的通知 API，我不相信 cordova 有一个可以在本地工作的 API。您可以并且应该在所有平台上使用 FCM，但您必须手动添加对每个平台的支持或等待推送插件开发。

phonegap 推送插件正在更新以支持 FCM： Migrate to Firebase Cloud Messaging #929

或者，您可以使用带有 phonegap 插件的旧 GCM 平台，但您需要在插件准备好后立即更新服务器端推送 API 以使用 FCM。