Меню

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

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

Задача: 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"

Предыдущая заметка Следующая заметка
Другие заметки:
Запретить оплату с внутреннего счета, если в корзине есть определенный товар FTP доступ на Виртуальной машине Битрикс Вывести товары из того же раздела в детальной карточке товара Почтовое событие на создание нового элемента инфоблока, через API Очистка корзины в 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.
Не оставляйте все такой не читаемой портянкой

Быстрый пример, оптимизируйте на свое усмортение, оставляю одной говно портянкой, что бы было понятнее что происходит:
Скрытый текст
Михаил Базаров 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 токена

Скрытый текст
Михаил Базаров 28.04.2025
Еще один вариант отправки push через новое API c Oauth токеном.
Можно использовать kreait/firebase-php
Пример:
Код
composer require kreait/firebase-php

И код
Код
require 'vendor/autoload.php';

use Kreait\Firebase\Factory;
use Kreait\Firebase\Messaging\CloudMessage;
use Kreait\Firebase\Messaging\Notification;

// Путь к вашему файлу с учетными данными
$serviceAccount = __DIR__'/ВАШ_ФАЙЛ_С_КЛЮЧАМИ.json';

// Создаем экземпляр Firebase
$factory = (new Factory)->withServiceAccount($serviceAccount);

// Получаем экземпляр Messaging
$messaging = $factory->createMessaging();

// Заголовок и тело уведомления
$title = 'Привет';
$body = 'Я первый пуш';

// Массив токенов устройств, на которые нужно отправить уведомления
$deviceTokens = [
    'token_1',
    'token_2',
    // Добавьте сюда другие токены устройств
];

// Или в топик на несколько устройств
$message = CloudMessage::withTarget('topic', 'allUsers')
    ->withNotification($notification);

foreach ($deviceTokens as $token) {
    // Создаем уведомление
    $notification = Notification::create($title, $body);
    
    // Создаем сообщение
    $message = CloudMessage::withTarget('token', $token)
        ->withNotification($notification);
    
    // Отправляем сообщение
    try {
        $messaging->send($message);
        echo "Уведомление отправлено на устройство с токеном: $token\n";
    } catch (\Kreait\Firebase\Exception\MessagingException $e) {
        echo "Ошибка при отправке уведомления на устройство с токеном $token: " . $e->getMessage() . "\n";
    }
}

И подписка на топик для массовой рассылки push (для персонализированной есть пример выше)
Код
// Запрос разрешения на отправку push
            window.FirebasePlugin.grantPermission(function () {
            }, function (error) {
                // alert(error); Ошибка получения разрешения
            });

            // Подписка на топик для push
            const topic = 'main_topik'; // Замените на имя вашего топика
            window.FirebasePlugin.subscribe(topic, function () {
                //  alert('Successfully subscribed to topic: ' + topic);
            }, function (error) {
                // alert('Error subscribing to topic: ' + error);
            });
            // Styles
            $('.cp_btn').hide();

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

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

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

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

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

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

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

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

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

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

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

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

Лечение сайтов от вирусов от 30 000 руб. от 2-х дней

Выполню полную проверку сайта и окружения. В случае обнаружения вирусов выполню полный комплекс лечения проекта и закрытия лазеек.