Добавляем push-уведомления в Cordova

Техническое введение

Чтобы понимать внутреннюю кухню всего происходящего, устроим небольшой технический ликбез. И еще, автор статьи очень надеется, что у Вас уже настроено все необходимое внутреннее окружение для работы Cordova и мобильных приложений. В данной статье эти аспекты будут упущены нарочно для сокращение объема материала.

Почему плагин

Потому что функционал push-уведомлений активируется через операционную систему телефона, через JavaScript сделать это невозможно. Поэтому единственными способом подключения push-уведомлений является интеграция нативного кода в Cordova проект. Для Android это Java или Kotlin, для iOS это Objective-C или Swift.

Почему не написать свой плагин

Написать свой плагин, в рамках работы программиста, значит потратить огромное количество времени на изучение смежных технологий: Java и Swift как минимум, а ведь еще, для нормальной интеграции своего кода в сборочный модуль, нужно с хуками Cordova познакомиться. Кроме того, в iOS регистрация устройства в сервисе push-уведомлений происходит в фоновом режиме внутри операционки, когда непосредственно работа самого плагина проходит в другом потоке (и это никак не обойти), поэтому привет многопоточное программирование… ладно, закончим с пугалками.

Если слова выше не отбили у Вас желание писать свой плагин, ниже мы представим вспомогательные статьи для таких энтузиастов. Для всех остальных идем дальше.

Статьи в помощь

Пишем свой Cordova плагин для iOS на Swift – читать тут.

Пишем свой Cordova плагин для Android на Java – читать тут.

Пишем свой Cordova плагин для Android на Kotlin – читать тут.

Создаем Cordova проект

Создаем проект командой:

cordova create testapp com.vverh.testapp TestApp

Переходим в папку с проектом:

cd testapp

Добавляем Android платформу:

cordova platform add android

Добавляем iOS платформу:

cordova platform add ios

Внимание

Для работы плагина нужна версия платформ для Android не ниже 9, а для iOS не ниже 5. Проверьте свои версии в package.json:

Если вдруг у Вас не окажется нужной версии, удалите неактуальную платформу с помощью команды (демонстрируем на примере Android):

cordova platform rm android

Далее снова добавьте платформу, но укажите версию, например:

cordova platform add android@9.1.0

Добавляем плагин

С помощью npm добавляем нужный плагин:

cordova plugin add cordova-plugin-push-notifications

Теперь нам необходимо провести некоторые манипуляции в платформах iOS и Android для включения push-уведомлений.

Установка в Android

Идем в config.xml проекта и добавляем следующую строчку:

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

После отправляемся в Firebase и регистрируем свое приложение. Там все очень просто, и особых инструкций не нужно. Необходимо добавить новый проект, ввести его название, подключить Android приложение.

Чтобы подключить Android приложение, нужно нажать на иконку Android на главной страницы консоли:

После нужно ввести некоторые данные. Самое важное это package id, в нашем случае это com.vverh.testapp. Можете его поменять, главное в config.xml тоже это сделайте.

Когда Вы нажмете “Register”, Firebase Вам даст google-services.json, его нужно будет засунуть в уже готовый Android проект (скачайте файл и пройдите регистрацию до конца).

Чтобы каждый раз при сборке проекта вручную не засовывать google-services.json в Android приложение, мы сразу оптимизируем этот процесс. Создайте в проекте папку res и бросьте файл google-services.json туда. После добавьте следующий код в config.xml:

Основные настройки готовы, давайте запустим и проверим.

Добавляем JavaScript, который вызовет код плагина в нужное место нашего приложения:

Собираем и запускаем приложение:

cordova build android

Далее открываем проект в Android Studio и запускаем приложение (возможно, надо подождать, grandle будет подтягивать зависимости некоторое время). После запуска в консоль (или в виде уведомления, если вы активировали alert) будет отправлен токен устройства:

Если собираетесь искать в консоли Android Studio, будьте терпеливы, в разделе Logcat -> Info можно найти токен.

Теперь отправляемся в Firebase, идем в раздел Cloud Messaging, отсюда можно отправить тестовое уведомление:

Как видите, все работает. Важно, приложение должно быть свернуто во время получения пушей. Единственная проблема, которая тут существует – это отсутствие иконки приложения в уведомлении. Но это можно решить. Чтобы установить иконку для push-уведомлений, нужно создать новые графические элементы (assets) через Android Studio и в AndroidManifest.xml указать к ним путь.

Естественно, для людей, кто не знаком с Android разработкой, это кажется очень сложным, поэтому можете воспользоваться нашей универсальной иконкой. Для этого скачайте архив, распакуйте и положите папку drawable в папку res к google-services.json.

После добавьте этот код в config.xml:

Теперь снова пересоберите проект и запускайте приложение в Android Studio. Дальше все по старинке: сворачиваете приложение и отправляете второе push-уведомление.

Как видите, иконка встала идеально. Посмотрите, как мы реализовали иконки, по аналогии Вы сможете сделать так же и загрузить туда даже логотип.

Установка в iOS

Далее Вам нужен iMac или MacBook. Но я думаю, Вы уже и сами в курсе.

Здесь все намного проще. Собираем приложение под iOS сразу после добавления платформы и плагина:

cordova build ios

Далее открываем проект в Xcode, идем в раздел Signing & Capabilities, тут добавляем новую зависимость Push Notification и жмем Enter.

Теперь, если Вы запустите приложение в эмуляции, то в консоли (или alert) сможете увидеть токен устройства (если пользователь разрешил отправлять себе push-уведомления в диалоговом окне). Но сами push-уведомления не будут работать в эмуляции, политика Apple.

Поэтому Вам нужен подтвержденный (оплаченный) аккаунт Apple Developer и iPhone. Придется зайти в личный кабинет Apple и создать там сертификат для push-уведомлений. Вот подробная инструкция по созданию сертификата, делается это в течении 2 минут, там всего 7 пунктов.

После Вам нужно скачать Pusher (просто скачайте его zip-архивом) и добавить в него сертификат (который Вам Apple выдаст на 7 пункте), чтобы протестировать свои уведомления. Единственная сложность в настройке push-уведомлений на iOS – это возня с сертификатами. В первый раз это сложно и больно.

U.P.D от 13.11.2021: Пушеру плохо, он перестал работать. Вот альтернатива.

И снова код для статьи, для тех, кто судорожно его ищет – GitHub.

Бонус: отправка push-уведомлений на PHP

Ниже расположен пример кода, с помощью которого можно настроить отправку push-уведомлений на PHP.

Для iOS:

Для Android: