Как да получите push известия, работещи с Ionic 4 и Firebase

Пълен урок стъпка по стъпка, който ще ви изведе на правилния път за iOS и Android

Настройването на push известия може да бъде наистина разочароващо и отнема много време. Така преминах през всички настройки и подготвих този урок за вас.

предпоставка

Ionic 4 вече трябва да бъде инсталиран.

Секция навигация

  1. Инсталиране на пакети
  2. Настройка на Firebase за Android и iOS
  3. Push внедряване на код за уведомяване
  4. Тествайте push известия на Android
  5. Предварително настройване на iOS push известия
  6. Тествайте push известия на iOS

1. Инсталиране на пакети

Отворете проекта си Ionic в редактора на кодиране по ваш избор и отворете и вашия терминал. Отворете папката на вашия проект.

Първо, ще инсталираме всички необходими пакети.

Какво трябва да инсталираме:

  • Cordova плъгин за firebase: йонна кордова приставка добави cordova-plugin-firebase
  • Народен пакет Firebase: тъй като Ionic 4 е в бета версия, проверете вашите собствени Ionic пакети в package.json и инсталирайте същата версия като другите оригинални Ionic пакети. И накрая, нека въведете: npm install --save @ ionic-native / firebase @ 5.0.0-beta.14
Имам версия на beta.14
  • Последен пакет, AngularFire 2. Това е библиотека за Angular и Firebase: npm install - запазване на ъгловата база oggularfire2

Пакетите се инсталират, готово! Да преминем към втория раздел.

2. Настройка на Firebase за iOS и Android

Преди да започнем цялата настройка, трябва да ви предупредя, че не можете да тествате своите push известия на iOS емулатор. За да го тествате, трябва да имате акаунт на Apple Developer, който струва около $ 99USD годишно. Предлагам ви да преминете през настройката на iOS така или иначе, така че ще ви даде по-добро разбиране за бъдещи проекти.

Забележка: Стъпките, започвайки от тук, са много важни, така че моля бъдете търпеливи. Четете бавно и се уверете, че ще получите всичко както трябва. Търсенето на проблеми, след като цялата настройка може да бъде много смущаваща, повярвайте ми - говоря от собствен опит.

IOS

Отворете страницата Firebase и влезте в конзола. Ако все още нямате създаден проект, направете го сега. Трябва да видите този екран.

Кликнете върху бутона iOS и ще видите това:

Сега трябва да предоставим идентификационния си пакет за iOS и това трябва да бъде същото като във вашия проект на Ionic. Нека кажем, че искам да имам името на пакета com.filipjerga.angularcourse, тогава трябва да направя следното:

Отворете вашите проекти на Ionic и отидете до файла config.xml. Нека да проверим елемента на джаджа. Атрибутът Id съдържа уникалния идентификатор на вашето приложение. Казах преди, ако сте посочили името на пакета си на com.filipjerga.angularcourse в Firebase, идентификаторът във вашия проект на Ionic трябва да бъде същият! Можете също да оставите идентификационния номер такъв, какъвто го имате вече във вашия проект на Ionic, но след това трябва да го промените в Firebase.

id на елемента на джаджа е това, което трябва да посочим в Firebase

След като получите стойността на id, не забравяйте да го предоставите на приложението си Firebase като идентификационен номер на пакета.

Идент. № на пакет трябва да е същият като идентификатора на джаджа ви

Това трябва да е всичко в първата стъпка на регистриране на заявлението. Тази стъпка е от решаващо значение, така че проверете двойно стойността на id на идентификатора на джаджа и пакет на вашето приложение Firebase.

Оставете другите полета празни и кликнете върху „Регистрирайте приложението“.

Сега трябва да изтеглим „GoogleService-Info.plist“.

Когато се изтегли, го поставете в основна папка на вашите проекти. Можете да видите структурата на папките в моя проект тук.

Можем да пропуснем всички следващи стъпки, тъй като те не са необходими за настройката на проекта на Ionic. Трябва да имате готово приложение за IOS.

Пропуснете тази стъпка

андроид

Следващите стъпки за Android са почти същите като за настройката на iOS:

  • Кликнете върху „добавяне на приложение“ за Android, същото както преди в iOS.
  • Името на пакета за Android трябва да бъде същото като нашия идентификатор на джаджа, в моя случай: com.filipjerga.angularcourse
  • След това изтеглете google-services.json. Същото като преди с iOS файла, трябва да го копираме в основната папка на нашите приложения
  • Кликнете върху „Напред“, докато не сте на последната стъпка, която можете да пропуснете и трябва да приключите и с двете създадени приложения.

Супер! Поздравления! Но все още е рано да се веселим.

Създадени са както приложения за iOS, така и Angular.

3. Реализиране на кода за известие

Внос на пакети

Дойде време най-накрая да загреем пръстите си, като напишем някакъв код. Ще започнем с импортирането на пакетите, които сме инсталирали преди.

  1. Отидете на app.module.ts
  2. Вашият файл трябва да изглежда така:

Можете да видите Firebase в масива от доставчици и AngularFirestoreModule и AngularFireModule при внос.

Но откъде дойде обектът config? Можете да видите много информация там като „apiKey, authDomain“ и т.н.

За да отговорим на това, трябва да се върнем към конзолата ни Firebase и да създадем уеб приложение.

Изберете уеб платформа

Трябва да кликнете върху иконата на уеб платформата вдясно от иконата на Android (вижте изображението по-горе). Когато е избрано уеб приложението, ще бъдете представени със собствен конфигурационен обект.

Моят конфигурационен обект за Firebase след избиране на уеб приложение.

Сега е време да копираме целия конфигурационен обект в app.module.ts в нашите проекти на Ionic. Моля, уверете се, че сте го променили за вашия конфигурационен обект! Моят няма да работи за вас.

Предоставете конфигурация на app.module.ts

Сега можем да започнем да работим по внедряването на услугата за известяване чрез push.

Push услуга за уведомяване

Нека създадем нова услуга. Наречете го каквото ви харесва. Ще се обадя на моята fcm.service.ts. FCM означава Firebase Cloud Messaging.

Първо, нека да разгледаме внедряването на услугата. Ще го обясня по ред.

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

Трябва да проверим за конкретно платформа устройство, поради допълнителна стъпка в настройката на iOS. iOS изисква изрични разрешения за получаване на push известия.

Сега трябва да съхраним този маркер някъде, но къде? Ще съхраняваме жетони в базата данни на Firebase. Виждате ли, аз създавам колекции от устройства и ги изпълвам с данни, които съдържат маркера и просто тестващ UserId. Чудесно! Сега ние запазихме маркера си и можем да се абонираме за известия.

Абонирането за известия всъщност е много просто. Просто трябва да се обадим на this.firebase.onNotificationOpen ()

Невероятно. Сервизът проверен!

Всичко това е хубаво, но някак безполезно, тъй като все още не използваме нашата услуга. Нека го поправим!

Преминете към своя app.component.ts и напишете следното:

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

Първо получаваме уникален знак на устройството.

Ние също така се абонираме за входящи известия от Firebase.

Когато съобщението бъде получено, трябва отново да проверим за конкретни платформи. В iOS текстът на съобщението ви е под aps.alert. На Android е под тяло.

Тогава просто ще покажем полученото съобщение като тост.

Сега настройката на кода е извършена. Ние сме много близо! Време е да го тестваме.

4. Тествайте известия за натискане на Android

Всички необходими настройки за Android трябва да бъдат направени в момента. Можете да започнете да подражавате на приложението си чрез:

йонна кордова емулира андроид

или

йонна кордова изграждане на android и отворете вашата сграда ръчно в Android Studio.

Да стартираме нашите приложения и да отидем в начално меню, така че ще видим натискане известие там. Уверете се, че приложението ви е стартирано правилно в емулатор и нямате грешки.

Върнете се към браузърите си към вашите приложения за Firebase. Сега е време да проверим нашата база данни Firebase. Можете да намерите опцията за база данни в левия панел под категория Разработване.

База данни на Firebase

След стартирането на приложението ви в емулатори, кодът от app.component.ts, който написахме преди няколко минути, изтича. Не е чудно, че нашата база данни е населена. В функцията „saveToken“ посочихме колекцията „устройства“ и запазихме токена с идентификатора на потребителя като документ в тази колекция от устройства. Това виждаме в нашата база данни.

В моя случай имам няколко маркера в моята база данни, но трябва да имате само един, тъй като стартирахме приложението ни за първи път. Ще създадете нов документ за уникално устройство / емулатор, на което използвате приложението си.

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

Firebase база данни колекция, Ще видите само един документ

Придвижете се до левия панел до раздела за разрастване и кликнете върху облачни съобщения.

Кликнете върху Cloud Messaging

Сега трябва да попълним необходимите данни. Въведете текста на вашето съобщение и предоставете маркера на устройството от базата данни, която току-що копирахме.

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

Изпратете съобщение, aaaaand Поздравления! Сега настройката ви за Android е завършена и вие сте в състояние да изпращате push известия! Не е ли страхотно?

Push известие на Android.

5. Предварително настройване на iOS push известия

Пристегнете момчета, идва настройка на iOs. Нека разделим тази настройка на няколко стъпки, така че няма да имаме паник атака. Нека копаем!

Първо, изградете приложението си за iOS: ionic cordova build ios

Отворете своя Xcode и намерете вграденото си приложение в платформи / ios / nameofyourapp.xcodeproj. Отвори го.

Отворете своя .xcodeproj

Това трябва да отвори дърво структура на приложението ви отляво. Кликнете два пъти върху коренния файл на тази структура. Това ще отвори допълнително меню с повече настройки за приложението ви.

Още настройки

Влезте с вашия акаунт на програмист.

Влезте с акаунт на програмист

5. Отворете горния раздел „Възможности“ и активирайте „Изпращане на известия“.

Активиране на Push Известия

6. Придвижете се до страницата на вашия акаунт за програмисти на Apple. Под „Сертификати“ изберете „Всички“ и щракнете върху „+“, за да добавите нов сертификат.

Щракнете върху знака плюс.

Активирайте услугата Apple Push Notification и преминете към следващата стъпка.

Сега нека изберем приложението ви.

Трябва да поискаме сертификат. На вашия Mac отидете на „Keychain Access“ -> „Assistant Certificate Assistant“ -> „Заявка на сертификат от сертифициращия орган“.

Попълнете цялата необходима информация - вашия имейл и общо име - и го запишете на диск.

В конзолата на Apple преминете към следващата стъпка и качете заявката си за сертификат.

На следващата стъпка вашият сертификат трябва да бъде създаден и можете да го изтеглите. Ще ви трябва по-късно.

Сега трябва да създадем сервизен ключ, за да активираме Apple известия. Под „Клавиши“ изберете „Всички“. Изберете името на вашия ключ. Активирайте „Apple Push Notifications Service (APNs)“.

Кликнете върху „Продължи“ и потвърдете вашия ключ. Никога не споделяйте такива данни с други. Сега можете да изтеглите вашия ключ.

Сега трябва да се върнем към Firebase.

В Firebase отворете приложението си за iOS и отворете „Облачни съобщения“.

Трябва да качим нашия ключ за удостоверяване на APN, който генерирахме преди време. Кликнете върху „Качване“.

Предоставете цялата информация и качете ключа.

Първо, качете вашия .p8 файл, изтеглен от конзолата на Apple по-рано. Въведете своя идентификационен номер на ключ. Можете да получите префикса на идентификационния номер на приложението от конзолата на Apple в „Идентификатори“ -> „Идентификатор на приложения“ -> „Вашето приложение“ -> „Префикс“.

Качете p8 файл и вземете префикс за keyID и ID

Това е. Сълзи на радост текат по лицето ми.

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

6. Тествайте известието за натискане на iOS

Първо, ние трябва да изградим нашите приложения, така че нека да стартираме: ionic cordova build ios

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

Изберете вашето устройство

Нека изчакаме, докато всичко се стартира. Вече можем да повторим стъпките за изпращане на push известия от Раздел 4, тъй като е същото като в Android.

Не забравяйте, че сега трябва да използвате нов маркер, генериран за вашето iOS устройство. Отидете в Бази данни, вземете нов маркер и изпратете известие за натискане. Резултатът ви трябва да изглежда така.

Надявам се да сте успели с настройката на своите push известия. Отнема известно време и търпение, за да се оправи всичко, но резултатът и ползите са невероятни.

Ако ви харесва урока ми и се интересувате от повече, можете да разгледате курса ми по Udemy: Ionic 4 Crash Course с Heartstone API и Angular.

За пълен проект вижте моето Github Repo.

Честито кодиране!

Filip