freeCodeCamp/guide/chinese/mobile-app-development/firebase-cloud-messaging-integration-for-cordova-hybrid-apps/index.md

title, localeTitle

title	localeTitle
Firebase Cloud Messaging Integration for Cordova Hybrid Apps	适用于Cordova混合应用程序的Firebase云消息传递集成

适用于Cordova混合应用程序的Firebase云消息传递集成

这是关于如何在Android和iOS中使用适用于fcm和Google Firebase FCM的cordova插件实现推送通知的基本直接演练。 我将使用Ubuntu 16.04 LTS，但用于开发的操作系统应该不重要。

Cordova混合应用程序的FCM集成

Android实施

创建一个空文件夹pushSample

cd '/opt/lampp/htdocs' 
 mkdir pushSample 
 cd pushSample 
 cordova create pushSample 
 cd pushSample 
 cordova platform add android 
 cordova plugin add cordova-plugin-FCM 

添加cordova FCM插件时会显示错误：

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder. 

注意：这是因为我们尚未添加必须在接下来的步骤中创建的google-services.json文件。

接下来打开google firebase控制台并添加项目（基本上意味着创建一个新项目）

创建项目后，单击左侧面板中的“通知”部分。

现在点击Android图标，为我们的项目添加Android平台支持。

在下一个弹出窗体中填写详细信息如下： Android软件包名称：软件包名称或ID是Play商店中应用程序的唯一标识符。 请注意，这是一个非常重要的值，一旦将应用程序上传到Play商店，就无法对其进行更改。 它将采用反向域名语法：例如，hello.pushSample.com将具有app id：com.pushSample.hello。 同样在cordova项目的config.xml文件中设置相同的应用程序ID。 对于我们的示例项目，它将在： pushSample / pushSample / config.xml中 例如对我来说这个文件的内容是：

<?xml version='1.0' encoding='utf-8'?> 
 <widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>HelloCordova</name> 
    <description> 
        A sample Apache Cordova application that responds to the deviceready event. 
    </description> 
    <author email="dev@cordova.apache.org" href="http://cordova.io"> 
        Apache Cordova Team 
    </author> 
    <content src="index.html" /> 
    <plugin name="cordova-plugin-whitelist" spec="1" /> 
    <access origin="*" /> 
    <allow-intent href="http://*/*" /> 
    <allow-intent href="https://*/*" /> 
    <allow-intent href="tel:*" /> 
    <allow-intent href="sms:*" /> 
    <allow-intent href="mailto:*" /> 
    <allow-intent href="geo:*" /> 
    <platform name="android"> 
        <allow-intent href="market:*" /> 
    </platform> 
    <platform name="ios"> 
        <allow-intent href="itms:*" /> 
        <allow-intent href="itms-apps:*" /> 
    </platform> 
 </widget> 

注意标签

<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 

这里的属性id是包ID ，默认情况下是io.cordova.hellocordova将其更改为您在firebase控制台中指定的应用ID。我将使用com.pushSample.hello

要在firebase控制台弹出窗口中填充的下一个字段是：

应用程序昵称（可选）：这可以是应用程序菜单中显示的相同应用程序名称，也可以在config.xml中更改，默认情况下它将是HelloCordova，我会将其更新为PushSample

**调试签名证书SHA-1（可选）：**这是可选的，请留空。

然后单击Register App

下一步是下载google服务json文件。

单击下载google-services.json按钮，该按钮应将文件下载到您的PC。

一旦你把文件粘贴到你的cordova项目的根文件夹中，在我的情况下：

/opt/lampp/htdocs/pushSample/pushSample 

接下来构建项目

cordova build android 

添加google-services.json文件后，它应该成功构建。

接下来，我们必须编写用于处理推送通知的客户端代码：

FCMPlugin.getToken(function(token) { 
    //this is the FCM token which can be used 
    //to send notification to specific device 
    console.log(token); 
    //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) ) 
    //Here you define your application behaviour based on the notification data. 
    FCMPlugin.onNotification(function(data) { 
        console.log(data); 
        //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user. 
        //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified. 
        // if (data.wasTapped) { 
        //     //Notification was received on device tray and tapped by the user. 
        //     alert(JSON.stringify(data)); 
        // } else { 
        //     //Notification was received in foreground. Maybe the user needs to be notified. 
        //     alert(JSON.stringify(data)); 
        // } 
    }); 
 }); 

代码基本上首先调用getToken函数从firebase获取FCM令牌，然后在回调中调用另一个回调onNotification来处理收到推送通知时发生的事情。

onNotification函数具有包含通知数据的数据值。 data.wasTapped指示当应用程序处于前台或后台时是否发送通知，以便我们可以为每个案例定义单独的逻辑。 现在，要触发示例推送通知，请单击左侧面板中的“通知”部分，现在应该显示firebase通知编写器，显示已发送的过去通知的列表。

如果您尚未发送任何推送通知。您应该看到发送第一个通知按钮。

注意： Notification Composer将如下所示：

注意在使用firebase控制台发送推送通知时，您需要在我的案例中选择应用程序名称com.pushSample.hello 。

要发送自定义应用程序特定数据，请选择高级选项 - >键值对。

onNotification回调中的数据对象如下所示

{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false} 

另请注意，从应用服务器而不是firebase通知编写器使用REST API发送推送通知时，您必须使用以下语法：

//POST: https://fcm.googleapis.com/fcm/send 
 //HEADER: Content-Type: application/json 
 //HEADER: Authorization: key=AIzaSy******************* 
 { 
  "notification":{ 
    "title":"Notification title", 
    "body":"Notification body", 
    "sound":"default", 
    "click_action":"FCM_PLUGIN_ACTIVITY", 
    "icon":"fcm_push_icon" 
  }, 
  "data":{ 
    "param1":"value1", 
    "param2":"value2" 
  }, 
    "to":"/topics/topicExample", 
    "priority":"high", 
    "restricted_package_name":"" 
 } 
 //sound: optional field if you want sound with the notification 
 //click_action: must be present with the specified value for Android 
 //icon: white icon resource name for Android >5.0 
 //data: put any "param":"value" and retreive them in the JavaScript notification callback 
 //to: device token or /topic/topicExample 
 //priority: must be set to "high" for delivering notifications on closed iOS apps 
 //restricted_package_name: optional field if you want to send only to a restricted app package (ie: com.myapp.test) 

**注意：“单击_操作”：“FCM_ PLUGIN_ACTIVITY”**字段非常重要，因为没有提到它不会在前台模式下执行onNotification回调。

iOS实施

对于iOS实现，我们需要在apple开发者页面中生成以下内容。 我正在使用XCODE 8.3

应用ID：com.example.app Apple推送通知身份验证密钥（APNs身份验证密钥） 启用推送通知的开发配置文件。 APNs证书

此外， 针对推送通知的Firebase文档也是一个非常好的深度起点。

注意：您无法在模拟器中运行推送通知，您将需要一个实际的设备。

让我们开始。

首先登录firebase开发人员的控制台，选择现有项目或创建一个新项目，我们将使用相同的pushSample项目。 在项目概述中添加另一个以iOS为平台的应用程序。 在弹出的弹出窗口中，输入以下详细信息：

• 步骤1 Bundle id：这是用于标识apple appstore中的应用程序的唯一标识符，这应该与您将在cordova项目的config.xml文件或xCode中的Bundle Id部分中指定的bundle id相同。 我们将使用com.pushSample.hello 应用程序名称 ：这是选项标识符昵称，我们将使用相同的名称，该名称将显示在iOS应用程序菜单中，即PushSample。 App Store Id ：留空。

单击注册应用程序后，将显示iOS应用程序步骤2。

• 第2步 点击下载Googleservice-info.plist按钮下载我们将在后面的步骤中使用的文件。

我们可以跳过**步骤3和步骤4，**因为这些将由cordova FCM插件在内部处理。

将iOS应用程序添加到项目后单击左侧面板中概述标签旁边的齿轮图标，然后选择项目设置。 （参见下图。）。默认情况下，这应该打开项目设置的“常规”选项卡。

然后单击您的应用程序中的iOS应用程序 - > iOS应用程序。 在iOS应用程序详细信息中，更新App ID Prefix ，您将在成员选项卡下的Apple Member Center中获得该值。

现在切换到Cloud Messaging选项卡 - > iOS app configuration部分。

如前所述，上传您在Apple会员中心生成的APN Auth Key。 接下来我们进行客户端应用程序设置。 在我的开发文件夹中创建一个新的文件夹sampleApp，对我而言

/Volumes/Development/ 

所以新的文件夹将是

/Volumes/Development/pushSample 
 cd /Volumes/Development/pushSample 

创建一个新的cordova项目， 注意：如果需要 ， 请使用sudo

cordova create pushSample 
 cd pushSample 

现在添加最新的iOS平台

sudo cordova platform add ios 

现在将我们之前下载的Googleservice-info.plist文件粘贴到cordova项目根文件夹中，对我来说就是这样

/Volumes/Development/pushSample/pushSample 

添加cordova fcm插件。

cordova plugin add cordova-plugin-fcm 

使用我们在配置firebase控制台和应用程序名称时先前确定的软件包ID更新默认应用程序ID和应用程序名称。

<widget id="com.pushSample.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>PushSample</name> 

此时示例代码将有一个app.js文件，您可以修改并添加与android相同的getToken和onNotification函数。两个平台的javascript代码相同。

接下来运行cordova build命令

sudo cordova build ios 

完成cordova构建命令后，在xcode中打开应用程序。要执行此操作，请打开位于的xcode.proj文件

your_cordova_project/platforms/ios/app_name.xcodeproj 

对我来说是

/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj 

接下来，在项目的“功能”选项卡中启用“推送通知”。

连接实际设备并运行应用程序。

现在从firebase通知编辑器触发推送通知，一切都应该工作......

中的原始帖子 。