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

title	localeTitle
Firebase Cloud Messaging Integration for Cordova Hybrid Apps	Интеграция облачных сообщений Firebase для гибридных приложений Cordova

Интеграция облачных сообщений Firebase для гибридных приложений Cordova

Это простой прямой шаг вперед относительно того, как реализовать push-уведомление в Android, а также iOS, используя плагин cordova для fcm и Google Firebase FCM с нуля. Я буду использовать Ubuntu 16.04 LTS для этого, но ОС, используемая для разработки, не должна иметь большого значения.

Интеграция FCM для гибридных приложений Cordova

Реализация 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 

При добавлении плагина FCM Cordova появится сообщение об ошибке:

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 и Add Project (в основном это означает создание нового проекта)

После создания проекта щелкните на разделе «Уведомления» на левой боковой панели.

Теперь нажмите на значок Android, чтобы добавить поддержку платформы Android в наш проект.

В следующей всплывающей форме заполните данные следующим образом: Имя пакета Android: имя пакета или идентификатор - уникальный идентификатор приложения в магазине воспроизведения. Обратите внимание, что это очень важное значение, которое нельзя изменить для приложения после его загрузки в магазин воспроизведения. Это будет синтаксис обратного имени домена: eg hello.pushSample.com будет иметь app id: com.pushSample.hello. Также в файле config.xml в вашем проекте cordova установлен одинаковый идентификатор приложения. Для нашего типового проекта это будет: 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 атрибута - это идентификатор пакета, который по умолчанию будет io.cordova.hellocordova изменить его на идентификатор приложения, указанный вами в консоли firebase. Я буду использовать com.pushSample.hello

Следующее поле, которое должно быть заполнено во всплывающем окне панели firebase, следующее:

Имя приложения (необязательно): это может быть то же имя приложения, которое отображается в меню для приложения, это также можно изменить в файле config.xml, по умолчанию это будет HelloCordova, я обнов его до PushSample

Сертификат подписи отладки SHA-1 (необязательно): это необязательно, оставьте его пустым.

Затем нажмите « Зарегистрировать приложение».

Следующий шаг - загрузить json- файл google services .

Нажмите кнопку Download google-services.json , которая должна загрузить файл на ваш компьютер.

Как только вы получите файл, вставьте его в корневую папку вашего проекта cordova, в моем случае:

/opt/lampp/htdocs/pushSample/pushSample 

Затем постройте проект

cordova build android 

После добавления файла google-services.json он должен успешно сработать.

Затем мы должны написать код на стороне клиента для обработки push-уведомлений:

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, чтобы получить токен FCM от firebase, а затем в обратном вызове регистрирует другой обратный вызов onNotification для обработки того, что происходит при получении push-уведомления.

функция onNotification имеет значение данных, которое содержит данные уведомления. data.wasTapped указывает, отправлено ли уведомление, когда приложение находится на переднем плане или в фоновом режиме, так что мы можем определить отдельную логику для каждого случая. Теперь, чтобы вызвать выборочное push-уведомление, нажмите на разделе «Уведомление» на левой боковой панели, теперь это должно показать вам композитор уведомлений firebase, содержащий список отправленных прошлых уведомлений.

Если вы еще не отправили никаких push-уведомлений. Вы должны увидеть отправку своей первой кнопки уведомления .

Примечание. Композитор уведомлений будет выглядеть так:

Примечание. При отправке push-уведомлений с использованием консоли firebase вам нужно выбрать имя приложения com.pushSample.hello в моем случае.

Чтобы отправить специальные данные конкретного приложения, выберите опционные параметры -> Пара ключей.

Объект данных в обратном вызове onNotification будет выглядеть следующим образом

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

Также обратите внимание, что при отправке push-уведомлений с использованием API REST с вашего сервера приложений вместо компоновщика уведомлений firebase вам необходимо использовать следующий синтаксис:

//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) 

Примечание: действие «click action»: поле «FCM PLUGIN_ACTIVITY» очень важно, так как не упоминает, что он не будет выполнять обратный вызов onNotification в режиме переднего плана.

Внедрение iOS

Для реализации iOS нам потребуются следующие вещи, которые будут созданы на странице разработчика Apple. Я использую XCODE 8.3

Идентификатор приложения: com.example.app Ключ аутентификации Apple Push Notification (APNs Auth Key) Профиль разработки с поддержкой Push Notifications включен. Сертификаты APNs

Также Firebase docs для push-уведомлений является отличной отправной точкой в ​​глубину.

Примечание. Вы не можете запускать push-уведомления в симуляторе, вам понадобится фактическое устройство.

Давай начнем.

Сначала войдите в консоль разработчика firebase и выберите существующий проект или создайте новый проект, мы будем использовать тот же проект pushSample. В обзоре проекта добавьте еще одно приложение с iOS в качестве платформы. В появившемся всплывающем окне введите следующие данные:

• Шаг 1 Идентификатор пакета: это уникальный идентификатор, который используется для идентификации приложения в Apple appstore, он должен быть таким же, как идентификатор пакета, который вы укажете в файле config.xml проекта cordova или в разделе идентификатора пакета в xCode. мы будем использовать com.pushSample.hello Имя приложения . Это имя псевдонима идентификатора опции, мы будем использовать то же имя, которое будет отображаться в меню приложения iOS, которое является PushSample. Идентификатор магазина приложений : оставьте это поле пустым.

Как только вы нажмете на приложение регистрации, появится шаг 2 приложения iOS.

• Шаг 2 Здесь нажмите кнопку загрузки Googleservice-info.plist , чтобы загрузить файл, который мы будем использовать в последующих шагах.

Шаг 3 и Шаг 4, мы можем пропустить, поскольку они будут обрабатываться внутренне плагином FCM Cordova.

После добавления приложения iOS в ваш проект Нажмите значок шестеренки, кроме метки обзора на левой боковой панели, и выберите параметры проекта. (См. Рисунок ниже). Это должно по умолчанию открыть вкладку «Общие» в настройках вашего проекта.

Затем нажмите на приложение iOS в приложениях -> Приложения iOS. В информации о приложении iOS обновите префикс идентификатора приложения , значение которого вы получите в Центре пользователей Apple на вкладке членства.

Теперь перейдите на вкладку « Облачные сообщения » -> Конфигурация приложения iOS.

Здесь, как обсуждалось ранее, загрузите APNs Auth Key, который вы создали в центре участника Apple. Затем мы создадим настройку приложения на стороне клиента. Создайте новую папку 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, который мы скачали ранее в корневой папке проекта кордовы, для меня это

/Volumes/Development/pushSample/pushSample 

добавьте плагин cordova fcm.

cordova plugin add cordova-plugin-fcm 

Обновите идентификатор приложения и имя приложения по умолчанию с идентификатором пакета, который мы решили ранее, при настройке консоли firebase и имени приложения.

<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, который вы можете изменить и добавить функции getToken и onNotification, такие же, как android. Код javascript такой же для обеих платформ.

Следующая команда выполнения команды cordova

sudo cordova build ios 

Как только команда corova build будет успешной, откройте приложение в xcode. Для этого откройте файл xcode.proj, который будет расположен в

your_cordova_project/platforms/ios/app_name.xcodeproj 

для меня это

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

Затем включите Push-уведомления на вкладке «Возможности» проекта.

Подключите фактическое устройство и запустите приложение.

Теперь запустите push-уведомление от составителя уведомлений Firebase, и все должно работать ...

Оригинальный пост на Среднем .