Полное пошаговое руководство, которое поможет вам встать на правильный путь для iOS и Android.

Настройка push-уведомлений может быть по-настоящему утомительной и отнимать много времени. Итак, я прошел через все настройки и подготовил для вас это руководство.

Предварительное условие

Ionic 4 уже должен быть установлен.

Навигация по разделам

  1. Установка пакета
  2. Настройка Firebase для Android и iOS
  3. Реализация кода push-уведомлений
  4. Проверить push-уведомления на Android
  5. Предварительная настройка push-уведомлений iOS
  6. Проверить push-уведомления на iOS

1. Установка пакета

Откройте свой проект Ionic в редакторе кода по вашему выбору, а также откройте свой терминал. Перейдите в папку своего проекта.

Сначала мы установим все необходимые пакеты.

Что нам нужно установить:

  • Плагин Cordova для firebase: ionic cordova plugin add cordova-plugin-firebase
  • Собственный пакет Firebase: поскольку Ionic 4 находится в стадии бета-тестирования, проверьте свои собственные пакеты Ionic в package.json и установите ту же версию, что и другие собственные пакеты Ionic. Наконец, введите: npm install --save @ionic-native/[email protected]

  • Последний пакет, AngularFire 2. Это библиотека для Angular и Firebase: npm install --save angularfire2 firebase

Пакеты установлены, готово! Переходим ко второму разделу.

2. Настройка Firebase для iOS и Android.

Прежде чем мы начнем всю настройку, я должен предупредить вас, что вы не можете тестировать свои push-уведомления на эмуляторе iOS. Чтобы проверить это, вам нужна учетная запись Apple Developer, которая стоит около 99 долларов США в год. Я предлагаю вам в любом случае пройти настройку iOS, чтобы вы могли лучше понять будущие проекты.

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

iOS

Перейдите на страницу Firebase и войдите в консоль. Если у вас еще нет проекта, сделайте это сейчас. Вы должны увидеть этот экран.

Нажмите кнопку iOS, и вы увидите следующее:

Теперь нам нужно предоставить идентификатор нашего пакета iOS, и он должен быть таким же, как в вашем проекте Ionic. Допустим, я хочу получить имя пакета com.filipjerga.angularcourse, тогда мне нужно сделать следующее:

Откройте свои проекты Ionic и перейдите к файлу config.xml. Давайте проверим элемент виджета. Атрибут Id содержит уникальный идентификатор вашего приложения . Я уже говорил, что если вы указали имя пакета com.filipjerga.angularcourse в Firebase, то id в вашем проекте Ionic должен быть таким же! Вы также можете оставить id в том виде, в котором он уже есть в вашем проекте Ionic, но затем вам нужно будет изменить его в Firebase.

Получив значение id, не забудьте указать его своему приложению Firebase в качестве идентификатора пакета.

Это должно быть все на первом этапе регистрации приложения. Этот шаг очень важен, поэтому дважды проверьте значение id виджета и идентификатора пакета вашего приложения Firebase .

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

Теперь нам нужно скачать «GoogleService-Info.plist».

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

Мы можем пропустить все дальнейшие шаги, так как они не требуются для настройки проекта Ionic. У вас должно быть готово приложение для iOS.

Android

Следующие шаги для Android почти такие же, как и для настройки iOS:

  • Нажмите «Добавить приложение» для Android, как мы делали это раньше в iOS.
  • Имя пакета Android должно совпадать с нашим идентификатором виджета, в моем случае: com.filipjerga.angularcourse
  • Затем загрузите google-services.json . Как и раньше, с файлом iOS, нам нужно скопировать его в базовую папку наших приложений.
  • Нажимайте «Далее», пока не дойдете до последнего шага, который можно пропустить, и в итоге у вас должны появиться оба приложения.

Ура! Поздравляю! Но радоваться пока рано.

3. Реализация кода push-уведомлений.

Импорт пакетов

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

  1. Go to app.module.ts
  2. Ваш файл должен выглядеть так:

Вы можете увидеть Firebase в массиве поставщиков и AngularFirestoreModule и AngularFireModule в импорте.

Но откуда взялся объект config? Вы можете увидеть там много информации как «apiKey, authDomain» и так далее.

Чтобы ответить на этот вопрос, нам нужно вернуться в нашу консоль Firebase и создать веб-приложение.

Вам нужно щелкнуть значок веб-платформы справа от значка Android (см. Изображение выше). Когда выбрано веб-приложение, вам будет представлен ваш собственный объект config.

Пришло время скопировать весь объект config в app.module.ts в наших проектах Ionic. Пожалуйста, убедитесь, что вы изменили его для своего объекта конфигурации! Моя не подойдет вам.

Теперь можно приступить к реализации сервиса push-уведомлений.

Сервис push-уведомлений

Давайте создадим новую услугу. Называйте это как хотите. Я назову свой fcm.service.ts. FCM расшифровывается как Firebase Cloud Messaging.

Во-первых, давайте посмотрим на реализацию сервиса. Я объясню это строка за строкой.

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

Нам нужно проверить устройство, зависящее от платформы, из-за дополнительного шага в настройке iOS. iOS требует явных разрешений для получения push-уведомлений.

Теперь нам нужно где-то хранить этот токен, а где? Мы будем хранить токены в базе данных Firebase. Как видите, я создаю коллекции устройств и заполняю их data , содержащим token и просто тестирую UserId. Идеально! Теперь мы сохранили наш токен и можем подписаться на уведомления.

Подписка на уведомления на самом деле очень проста. Нам просто нужно позвонить this.firebase.onNotificationOpen()

Удивительный. Сервис проверен!

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

Перейдите в свой app.component.ts и напишите следующее:

Особенно важна здесь функция notificationSetup.

Сначала мы получаем уникальный токен устройства.

Мы также подписываемся на входящие уведомления от Firebase.

Когда сообщение получено, нам нужно снова проверить наличие конкретных платформ. В iOS текст вашего сообщения находится под aps.alert. На Android - до body.

Тогда мы просто отобразим полученное сообщение как Toast.

Теперь настройка кода завершена. Мы очень близко! Пришло время проверить это.

4. Протестируйте push-уведомления на Android.

Все необходимые настройки для Android должны быть выполнены прямо сейчас. Вы можете начать эмуляцию своего приложения:

ionic cordova emulate android

or

ionic cordova build android и откройте свою сборку вручную в Android Studio.

Давайте запустим наши приложения и перейдем в главное меню, чтобы увидеть там push-уведомление. Убедитесь, что ваше приложение правильно запустилось в эмуляторе и у вас нет ошибок.

Вернитесь в браузеры к приложениям Firebase. Пришло время проверить нашу базу данных Firebase. Вы можете найти опцию базы данных на левой панели в категории Разработка.

После того, как ваше приложение было запущено в эмуляторах, запустился код из app.component.ts, который мы написали несколько минут назад. Не зря наша база заполнена. В функции «saveToken» мы указали коллекцию «devices» и сохранили токен с идентификатором пользователя как документ в этой коллекции устройств. Это то, что мы видим в нашей базе данных.

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

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

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

Теперь нам нужно заполнить необходимые данные. Введите текст сообщения и укажите токен устройства из только что скопированной базы данных.

Когда вы отправляете сообщение, одновременно откройте эмулируемое устройство и посмотрите, что произойдет.

Отправьте сообщение, ааааи Поздравляю! Теперь настройка Android завершена, и вы можете отправлять push-уведомления! Разве это не круто?

5. Предварительная настройка push-уведомлений iOS.

Пристегнитесь, ребята, идет настройка iOs. Давайте разделим эту настройку на несколько этапов, чтобы не было панической атаки. Давайте копаться!

Сначала создайте приложение для iOS: ionic cordova build ios

Откройте свой Xcode и найдите свое созданное приложение в platforms/ios/nameofyourapp.xcodeproj. Открой это.

Это должно открыть древовидную структуру вашего приложения с левой стороны. Дважды щелкните корневой файл этой структуры. Это откроет дополнительное меню с дополнительными настройками для вашего приложения.

Войдите в свою учетную запись разработчика.

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

6. Перейдите на свою страницу учетной записи разработчика Apple. В разделе Сертификаты выберите Все и нажмите «+", чтобы добавить новый сертификат.

Включите службу Apple Push Notification и перейдите к следующему шагу.

Теперь давайте выберем ваше приложение.

Нам нужно запросить сертификат. На вашем Mac перейдите в «Связка ключей» - ›« Помощник по сертификации »-› «Запросить сертификат в центре сертификации».

Заполните всю необходимую информацию - ваш адрес электронной почты и обычное имя - и сохраните ее на диске.

В Apple Console перейдите к следующему шагу и загрузите запрос на сертификат.

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

Теперь нам нужно создать служебный ключ, чтобы включить push-уведомления Apple. В разделе «Ключи» выберите «Все». Выберите свое ключевое имя. Включите «Службу push-уведомлений Apple (APN)».

Нажмите «Продолжить» и подтвердите свой ключ. Никогда не делитесь такими данными с другими. Теперь вы можете скачать свой ключ.

Теперь нам нужно вернуться к Firebase.

В Firebase откройте приложение iOS и перейдите в «Облачный обмен сообщениями».

Нам нужно загрузить наш ключ аутентификации APN, который мы сгенерировали некоторое время назад. Щелкните «Загрузить».

Предоставьте всю информацию и загрузите ключ.

Сначала загрузите файл «.p8», загруженный с консоли Apple ранее. Введите свой идентификатор ключа. Вы можете получить префикс идентификатора приложения в консоли Apple в разделе «Идентификаторы» - ›« Идентификаторы приложений »-› «Ваше приложение» - ›« Префикс ».

Вот и все. Слезы радости текут по моему лицу.

Мы можем протестировать Push-уведомления на iOS. Не забываем, что нам нужно использовать настоящее устройство.

6. Протестируйте push-уведомление на iOS.

Во-первых, нам нужно создать наши приложения, поэтому давайте запустим: ionic cordova build ios

В Xcode вы можете запускать свое приложение на устройстве, подключенном через USB к вашему компьютеру.

Подождем пока все запустится. Теперь мы можем повторить шаги для отправки push-уведомлений из Раздела 4, потому что он такой же, как и на Android.

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

Надеюсь, вам удалось настроить push-уведомления. Чтобы все сделать правильно, нужно время и терпение, но результат и преимущества потрясающие.

Если вам нравится мой учебник и вы заинтересованы в большем, вы можете ознакомиться с моим курсом по Udemy: Ускоренный курс Ionic 4 с Heartstone API и Angular.

Полный текст проекта см. В my Github Repo.

Удачного кодирования!

Филип