Меню

Настройка push уведомлений через Firebase, в мобильном приложении Apache Cordova

Просмотров: 3568

Задача: Apache Cordova предоставляет удобный способ разработки кроссплатформенных мобильных приложений. В данной статье расскажу, как настроить отправку push уведомлений на платформах iOS и Android с использованием Firebase.

Установка плагина Firebase в Cordova проект

Перед началом работы удостоверьтесь, что у вас уже имеется готовое приложение на Cordova. Создать его можно по вот этому видеокурсу Создание приложения на Apache Cordova

Далее необходимо добавить два необходимых плагина:

cordova plugin add cordova-plugin-firebasex
cordova plugin add cordova-plugin-firebase-messaging
  • cordova-plugin-firebasex: Этот плагин предоставляет интеграцию с Firebase и необходим для отправки push уведомлений.
  • cordova-plugin-firebase-messaging: Плагин для работы с мессенджером Firebase.

Далее, добавьте следующие строки в конфигурационный файл проекта (config.xml):

<platform name="android">
    <preference name="AndroidXEnabled" value="true" />
</platform>

<plugin name="cordova-plugin-firebasex">
    <variable name="ANDROID_FIREBASE_CONFIG_FILEPATH" value="google-services.json" />
    <variable name="IOS_FIREBASE_CONFIG_FILEPATH" value="GoogleService-Info.plist" />
</plugin>

Файлы google-services.json и GoogleService-Info.plist будут получены на следующих этапах.

Установка Cocoapods на macOS

Cocoapods - это менеджер зависимостей для проектов iOS, он необходим для интеграции Firebase в iOS проект. В штатном терминале macOS, поочереди, выполняем команды (в процессе запросит пароль вашего пользователя):

sudo gem install ffi && sudo gem install cocoapods

Далее перейдите в папку с платформой iOS и установите pod-ы:

cd platforms/ios && pod install --verbose && cd ../../

Установка может занять некоторое время в зависимости от скорости вашего интернет-соединения.

Создаем проект приложения в Firebase

Откройте ваш браузер и перейдите на Firebase Console. Войдите в свою учетную запись Google, связанную с проектом.

На главной странице Firebase Console нажмите кнопку "Добавить проект" или выберите существующий проект, если таковой уже имеется.

После создания или выбора проекта перейдите в раздел "Настройки проекта", представленный в виде шестеренки в левой навигационной панели.

Добавление приложения для Android: В разделе "Настройки проекта" нажмите "Добавить приложение". Выберите платформу "Android" и следуйте дальнейшим инструкциям. В процессе регистрации приложения вам будут предложены заполнить необходимую информацию. По завершении регистрации, скачайте файл google-services.json и добавьте его в корневую папку вашего Cordova проекта.

Добавление приложения для iOS: После регистрации приложения для Android, вернитесь в раздел "Настройки проекта". Нажмите "Добавить приложение" еще раз и выберите платформу "iOS". Заполните необходимую информацию. По завершении регистрации, скачайте файл GoogleService-Info.plist и добавьте его в корневую папку проекта.

После завершения этого этапа, ваш проект в Firebase будет полностью настроен для отправки push уведомлений как на платформе Android, так и на iOS через Cordova приложение. Эти файлы (json и plist) обеспечивают связь между вашим приложением и Firebase, позволяя корректно обрабатывать уведомления.

Получение APNs Certificate для iOS

  • Откройте консоль Apple Developer:
    Войдите в Apple Developer Console.
    Удостоверьтесь, что у вас есть правильные разрешения для создания сертификатов.
  • Перейдите в раздел "Certificates, Identifiers & Profiles":
    В левом меню выберите "Keys" (Ключи) в разделе "Certificates, Identifiers & Profiles".
  • Создайте новый сертификат для Push Notifications:
    Нажмите "Create Key" (Создать ключ).
    Заполните необходимые данные:
    • Key Name (Название ключа): Укажите удобное для вас название для ключа.
    • Key Type (Тип ключа): Выберите "APNs" (Apple Push Notifications service).
    • Key ID (Идентификатор ключа): Это поле заполняется автоматически, но вы можете ввести свой уникальный идентификатор, если хотите.
  • Скачайте файл с расширением .p8:
    После создания ключа, сразу скачается файл с расширением .p8. Этот файл - ваш APNs authentication key.
  • Сохраните Key ID и Team ID:
    Вам также понадобятся Key ID и Team ID. Key ID можно найти на странице ключа, а Team ID - в вашем аккаунте разработчика под "Membership".
  • Загрузите APNs Auth Key в Firebase Console:
    В консоли проекта Firebase, перейдите к разделу "Cloud Messaging" > "iOS app configuration". Нажмите "Upload your APNs Auth Key" и перетащите скачанный .p8 файл в указанную область. В поле "Key ID" укажите Key ID, а в поле "Team ID" укажите Team ID.

Теперь у вас есть успешно настроенный APNs authentication key, который вы можете использовать вместе с Firebase для отправки уведомлений на iOS устройства. Не забудьте сохранить ваш ключ в надежном месте, так как его можно скачать только один раз.

Важно помнить, что при открытии проекта iOS для сборки и тестирования, используйте файл /ВАШ_ПРОЕКТ/platforms/ios/НАЗВАНИЕ_ПРИЛОЖЕНИЯ.xcworkspace, а не .xcodeproj. Это обеспечит корректную работу с плагинами и зависимостями.

Отправка push уведомления из Firebase

Для начала, запросите разрешение на отправку push уведомлений в приложении:

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    window.FirebasePlugin.grantPermission(function () {
            // Разрешение получено, можно ничего не делать больше
        }, function (error) {
            // alert(error); Ошибка получения разрешения
    });
}

При первом запуске приложения на устройстве пользователю будет предложено разрешить отправку уведомлений.

  • Затем, в Firebase Console, в левой навигационной панели выберите раздел "Engage -> Messaging
  • Нажмите на кнопку "New Campaign" (Новая кампания).
  • В появившемся окне выберите тип уведомления "Notification" (Уведомление).

Заполните необходимые поля: Название кампании, укажите понятное и описательное название для кампании. Напишите текст уведомления.

Вы можете выбрать, на какие платформы (iOS, Android) и устройства отправить уведомление.

push уведомлениями через Firebase

Просмотрите все параметры кампании и, если все верно, нажмите "Publish" (Опубликовать). Уведомление будет отправлено на выбранные платформы и устройства.

Видео: настройка push через Firebase в Apache Cordova

Полная версия видео на моем boosty: Push из Firebase в Apache Cordova
Для отправки push уведомлений конкретным пользователям, нужно сохранить токен устройства и связать его с пользователем. Например вот так: Заполнение пользовательского свойства через API

Основные ключи API Firebase Cloud Messaging (FCM)

Внимание! С июня 2024 старый API Firebase не работает. Теперь нужно использовать другой url для отправки данных и получать временный OAuth используя json c приватным ключем. Старый способ с постоянным токеном больше не работает. Как получить Oauth Google Apis токен смотрите в комментарии.

Firebase Cloud Messaging (FCM) предоставляет несколько ключей для настройки push-уведомлений. Вот основные ключи, которые можно использовать в API запросах к FCM:

Основные ключи

  • to:

    Описание: Используется для отправки сообщения на один конкретный токен устройства, топик или условие.

    Пример: 'to' => 'd0FjVsOX00UwvlS8E9uufU:APA91bH04PmgKbSZUQ0_Q81B-HAUFlr-H2Teqon6vyZZYoUif73rHiwGxqSpEM0i3thpBztSKxEfaKVEOUH7w-vWA3fnRoe-fZE-OMYs52GKEHc5tv1ObRS8HfBwjt5foh_N0EdALbWw'

  • registration_ids:

    Описание: Используется для отправки сообщения на несколько токенов устройств.

    Пример: 'registration_ids' => ['token1', 'token2']

  • notification:

    Описание: Объект, содержащий заголовок и тело уведомления. Используется для отображения уведомлений на устройствах.

    Пример:

    'notification' => array(
    'title' => 'Title',
    'body' => 'Message body'
)
  • data:

    Описание: Объект, содержащий дополнительные данные для передачи на устройство.

    Пример:

    'data' => array(
    'key1' => 'value1',
    'key2' => 'value2'
)

Дополнительные ключи

  • priority:

    Описание: Устанавливает приоритет сообщения ("normal" или "high").

    Пример: 'priority' => 'high'

  • time_to_live:

    Описание: Время жизни сообщения в секундах.

    Пример: 'time_to_live' => 3600 // 1 час

  • collapse_key:

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

    Пример: 'collapse_key' => 'type_a'

  • content_available:

    Описание: Устанавливает флаг для фонового обновления содержимого (только для iOS).

    Пример: 'content_available' => true

  • mutable_content:

    Описание: Указывает на возможность изменения содержимого уведомления (только для iOS).

    Пример: 'mutable_content' => true

  • android:

    Описание: Настройки для Android-устройств.

    Пример:

    'android' => array(
    'ttl' => '3600s',
    'priority' => 'high',
    'notification' => array(
        'click_action' => 'OPEN_ACTIVITY_1'
    )
)
  • apns:

    Описание: Настройки для iOS-устройств.

    Пример:

    'apns' => array(
    'headers' => array(
        'apns-priority' => '10'
    ),
    'payload' => array(
        'aps' => array(
            'alert' => array(
                'title' => 'Title',
                'body' => 'Message body'
            ),
            'badge' => 1
        )
    )
)
  • webpush:

    Описание: Настройки для веб-уведомлений.

    Пример:

    'webpush' => array(
    'headers' => array(
        'TTL' => '60'
    ),
    'notification' => array(
        'title' => 'Title',
        'body' => 'Message body',
        'icon' => '/icon.png'
    )
)
  • condition:

    Описание: Логическое условие для отправки сообщения на устройства, подписанные на определенные топики.

    Пример: 'condition' => "'topicA' in topics && 'topicB' in topics"

Предыдущая заметка Следующая заметка
Другие заметки:
Вывести свойство отдельно ото всех или исключить из всех Добавление в избранное или отложенные, на AJAX из карточки товара Увидеть файл заказов который передаст Битрикс в 1С Вывести новости из конкретного раздела инфоблока Битрикс Заполнение габаритов товара, после обмена с 1С, из свойств элемента инфоблока.
Все комментарии: Оставить комментарий
Михаил Базаров 22.10.2023
Для отправки Push-уведомления конкретному пользователю с помощью Firebase и Apache Cordova.
Получение токена устройства:
Код
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    window.FirebasePlugin.getToken(function (token) {
        // Сохраняем этот токен в базе данных сайта
        // alert(token); 
    }, function (error) {
        alert(error);
    });
}

Обновление токена устройства (при смене)
Код
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    window.FirebasePlugin.onTokenRefresh(function (token) {
        // Обновляем токен в базе данных сайта
        // alert(token);
    }, function (error) {
        // alert(error);
    });
}
Михаил Базаров 26.09.2024
Можно не устанавливать плагин
cordova plugin add cordova-plugin-firebasex
Если не нужна аналитика и прочее от Firebase, кроме пушей.
Тогда разрешение запрашиваем вот так:
Код
cordova.plugins.firebase.messaging.onTokenRefresh(function() {
    console.log("Device token updated");
});

Примеры остальных настроек плагина (устновка бейджика, своего звука итд) на странице плагина в Github
Михаил Базаров 09.10.2024
C июня 2024 старое API Firebase заблокировано, нужно использовать HTTP v1.
Теперь токен подключения не постоянен и нужно использовать OAuth для авторизации на сервере Push

В моем примере я знаю токены устройств пользователя и отправляю ему пуш при новом заказе.
Само собой, разнесите все по функциям или обверните в class с методами.
Считывайте json файла с данными с помощью file_put_content.
Не оставляйте все такой не читаемой портянкой

Быстрый пример, оптимизируйте на свое усмортение, оставляю одной говно портянкой, что бы было понятнее что происходит:
Код
if (isset($arUser['UF_PUSH_DEVICE_TOKENS']) && count($arUser['UF_PUSH_DEVICE_TOKENS']) > 0) {

    // Получение Oauth токена ===================
    $serviceAccountFile = '{
                      "type": "service_account",
                      "project_id": "ID ПРИЛОЖЕНИЯ В FIREBASE",
                      "private_key_id": "000ab**********942c",
                      "private_key": "-----BEGIN PRIVATE KEY-----\nMIIE***xQoFiug=\n-----END PRIVATE KEY-----\n",
                      "client_email": "firebase-adminsdk-cnzfe@**********.com",
                      "client_id": "1001***8621",
                      "auth_uri": "https://accounts.google.com/o/oauth2/auth",
                      "token_uri": "https://oauth2.googleapis.com/token",
                      "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
                      "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-cnzfe%40ID ПРИЛОЖЕНИЯ.iam.gserviceaccount.com",
                      "universe_domain": "googleapis.com"
                    }';
    function base64UrlEncode($text)
    {
        return str_replace(
            ['+', '/', '='],
            ['-', '_', ''],
            base64_encode($text)
        );
    }

    $authConfig = json_decode($serviceAccountFile);
    $secret = openssl_get_privatekey($authConfig->private_key);
    $header = json_encode([
        'typ' => 'JWT',
        'alg' => 'RS256'
    ]);
    $time = time();
    $start = $time - 60;
    $end = $time + 3600;
    $payload = json_encode([
        "iss" => $authConfig->client_email,
        "scope" => "https://www.googleapis.com/auth/firebase.messaging",
        "aud" => "https://oauth2.googleapis.com/token",
        "exp" => $end,
        "iat" => $start
    ]);
    $base64UrlHeader = base64UrlEncode($header);
    $base64UrlPayload = base64UrlEncode($payload);
    $result = openssl_sign($base64UrlHeader . "." . $base64UrlPayload, $signature, $secret, OPENSSL_ALGO_SHA256);
    $base64UrlSignature = base64UrlEncode($signature);
    $jwt = $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;
    $options = array('http' => array(
        'method' => 'POST',
        'content' => 'grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer&assertion=' . $jwt,
        'header' =>
            "Content-Type: application/x-www-form-urlencoded"
    ));
    $context = stream_context_create($options);
    $responseText = file_get_contents("https://oauth2.googleapis.com/token", false, $context);
    $response = json_decode($responseText, true);
    // Получение Oauth токена ==============================


    $url = "https://fcm.googleapis.com/v1/projects/ID ПРИЛОЖЕНИЯ В FIREBASE/messages:send";

    $headers = [
        'Authorization: Bearer ' . $response['access_token'],
        'Content-Type: application/json',
    ];

    foreach ($arUser['UF_PUSH_DEVICE_TOKENS'] as $DEVICE_TOKEN) {
        $notification = [
            'message' => [
                'token' => $DEVICE_TOKEN,
                'notification' => [
                    'title' => 'Новый заказ',
                    'body' => '"Новый заказ N' . $arResult["ORDER"]['ID'],
                ],
            ],
        ];

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($notification));

        $response = curl_exec($ch);

        if ($response === false) {
            // echo 'Error sending push notification: ' . curl_error($ch);
        } else {
            // echo 'Push notification sent successfully: ' . $response;
        }

        curl_close($ch);
    }
}
Михаил Базаров 10.10.2024
В новой версии API что бы поставить звук по умолчанию для уведомления, теперь не подходит просто передать ключ
sound: default в блоке 'notification'
Нужно вот так, под каждую платформу:
Код
$notification = [
    'message' => [
        'token' => $DEVICE_TOKEN,
        'notification' => [
            'title' => 'Новый заказ',
            'body' => '"Еда в Миг" новый заказ N' . $arResult["ORDER"]['ID'],
        ],
        'android' => [
            'notification' => [
                'sound' => 'default'
            ]
        ],
        'apns' => [
            'payload' => [
                'aps' => [
                    'sound' => 'default'
                ]
            ]
        ]
    ],
];
Гость 16.10.2024
Другой вариант получения Oauth токена

Код
     /**
     * Запрос токена авторизации с посощью CURL
     * 
     *  Получения json файла приватного ключа. Firebase console - открыть проект - project settings - вкладка service accounts - кнопка generate new private key
     *
     * @param string $PrivateKey - параметр private_key из json файла
     * @param string $AccountName - параметр client_email из json файла
     * @param int|null $AccessTokenMaximumExpirationTime - Время действия токена. Допустимо значение от 1сек до 3600 сек. По умолчанию 3600 сек. (1 час)
     * @param int|null $RequestTimeout - устанавливет CURLOPT_CONNECTTIMEOUT и CURLOPT_TIMEOUT
     * @return string - токен  или пустая строка
     * @throws \Exception
     */
    function RequestAccessToken(string $PrivateKey, string $AccountName, ?int $AccessTokenMaximumExpirationTime = 3600, ?int $RequestTimeout = 10): string{
        if($PrivateKey != '' and $AccountName != ''){
            $StartTime = time();
            
            $Header = json_encode([
                'alg' => 'RS256',
                'typ' => 'JWT'
            ]);

            if(!isset($RequestTimeout) or $RequestTimeout < 0) $RequestTimeout = 10

            if(!isset($AccessTokenMaximumExpirationTime) or $AccessTokenMaximumExpirationTime <= 0 or $AccessTokenMaximumExpirationTime > 3600){
               $AccessTokenMaximumExpirationTime = 3600;
            }

            $AccessTokenExpirationEndTime = $StartTime + $AccessTokenMaximumExpirationTime;
            
            $Aud = 'https://oauth2.googleapis.com/token';
            
            $Data = json_encode([
                'iss' => $AccountName,
                'scope' => 'https://www.googleapis.com/auth/firebase.messaging',
                'aud' => $Aud,
                'exp' => $AccessTokenExpirationEndTime,
                'iat' => $StartTime
            ]);
            
            $Base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($Header));
            $Base64UrlData = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($Data));
            
            $Signature = '';
            
            $PrivateKey = openssl_get_privatekey($PrivateKey);
            
            openssl_sign("{$Base64UrlHeader}.{$Base64UrlData}", $Signature, $PrivateKey, OPENSSL_ALGO_SHA256);
            
            $Base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($Signature));
            
            $JWT = "{$Base64UrlHeader}.{$Base64UrlData}.{$Base64UrlSignature}";
            
            $PostFields = [
                'grant_type' => 'urn:ietf:params:oauth:grant-type:jwt-bearer',
                'assertion' => $JWT
            ];
            
            $Ch = curl_init($Aud);
            curl_setopt($Ch, CURLOPT_CONNECTTIMEOUT, $RequestTimeout);
            curl_setopt($Ch, CURLOPT_TIMEOUT, $RequestTimeout);
            curl_setopt($Ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($Ch, CURLOPT_POSTFIELDS, $PostFields);

            $Result = curl_exec($Ch);
            
            $Errno = 0;
            $Error = '';
            
            if($Result === false){
                $Errno = curl_errno($Ch);
                $Error = curl_error($Ch);
            }
            
            curl_close($Ch);
            
            if($Errno > 0 and $Error != ''){
                throw new \Exception($Error, $Errno);

            }else{
                if($Result !== false){
                    $Result = @json_decode($Result, true);

                    if(is_array($Result)){
                        if(isset($Result['access_token'])){
                            return trim($Result['access_token']);

                        }else if(isset($Result['error'])){
                            throw new \Exception($Result['error']['message'], $Result['error']['code']);

                        }
                    }
                }
            }
        }else{
            if($PrivateKey == ''){
                throw new \Exception('Не указан закрытый ключ.', 110);
            }

            if($AccountName == ''){
                throw new \Exception('Не указано имя учетной записи.', 110);
            }
        }
        
        return '';
    }

Стоимость и сроки разработки сайтов и приложений

Окончательная стоимость и сроки разработки сайта формируются после обсуждения деталей на этапе заказа. Как правило, они редко выходят за обозначенные ниже рамки.

Интернет магазин: разработка с нуля от 400 000 руб.
от 5-ти недель

Cоздание интернет-магазина на 1С-Битрикс. Разработка с нуля, оптимизация кода под конкретный проект и требования. Реализация любого функционала без ограничений готовых решений.

Интернет-магазин на готовом решении от 100 000 руб.
от 7-ми дней

Готовое решение — вариант для тех, кто не хочет тратить много средств на индивидуальный проект, и не имеет серьезных требований к сайту. Запускается на одном из 200-та (на ваш выбор) готовых решений.

Мобильное приложение от 400 000 руб.
от 1-го месяца

Разработка кроссплатформенного мобильного приложения, которое не уступает нативным решениям как в производительности, так и пользовательском опыте. Публикуется в AppStore, GooglePlay и RuStore

Опросник на разработку. После ознакомления, задам уточняющие вопросы и оценю проект по стоимости и срокам разработки.
Скачать опросник Бриф на разработку.doc
Сайт компании от 250 000 руб. от 1-го месяца

Сайт с каталогом товаров или услуг. Включает формы обратной связи внутри карточек каталога, любое количество статичных и динамичных разделов и форм захвата внимания.

Инфресурс от 300 000 руб. от 5-ти недель

Информационный ресурс «под ключ» это: Лицензия на 1С-Битрикс «Стандарт», технология «Композитный сайт», видеоуроки по наполнению и поддержке ресурса.

Визитка или лендинг от 40 000 руб. от 2-х недель

Небольшой сайт — прекрасный бюджетный вариант для старта. На 3-4 страницах можно рассказать о достоинствах вашей компании. В конце сайта можно оставить форму для обратной связи.