Как да добавите Push Notifications във вашето приложение Cordova, използвайки Firebase

Тази статия ще ви преведе през целия процес на Push Notifications както за Android, така и за iOS платформи във вашето приложение Cordova, като използвате cordova-plugin-firebase.

Актуализация: Според някои коментари, описаният по-долу процес може да не работи вече в някои устройства с Android. Бъдете наясно с това, преди да се опитате да използвате следните инструкции. Съжалявам за тези хора. Надявам се, че част от тази информация все още може да бъде полезна, за съжаление това е животът на хибриден мобилен разработчик.

Нека бъдем честни, работата с Push Notifications с Cordova може да бъде болка в задника, особено ако не знаете много за средата на iOS и нейната конфигурация. Има няколко стъпки, които трябва да следвате, преди да добавите приставката към приложението си, надяваме се, че тази статия ще изясни нещата, така че нека започнем със скучната част: Конфигурирайте вашата iOs среда.

1. Конфигурация и подготовка на iOS среда

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

Добре, ако приемем, че вече имате платен акаунт за разработчици, продължете напред и влезте в акаунта си на Apple Developer. След като влезете, ще бъдете пренасочени към началната страница на Apple Developer. От там трябва да видите „Акаунт“ в горната лента за навигация. Кликнете върху тази опция.

Сега трябва да сте в профила си в Apple Developer.

Сега погледнете към лявата странична лента. Третият ред трябва да казва „Сертификати, идентификатори и профили.“ Изберете тази опция.

Сега, когато сте в страницата „Сертификати, идентификатори и профили“, погледнете в лявата странична лента и трябва да има раздел, наречен „Идентификатори“. Под този раздел има връзка, която казва „Идентификационни номера на приложението“. Натиснете това.

Трябва да видите всичките си идентификатори на приложение за iOS.

Сега горе вдясно трябва да видите бутон +. Натиснете това. След това трябва да сте на този етап:

Сега трябва да попълним следните действия:

  • Описание на приложението - Име. Тук трябва да поставите името на приложението си (например демонстрация за оповестяване на Firebase)
  • Суфикс за идентификатор на приложение - Изричен идентификационен номер на приложение - Идент. Номер на пакет Тук трябва да изберете уникален идентификатор на пакет за вашето приложение (например com.possible.firebasenotificationsdemo). Моля, уверете се, че използвате собствения си идентификационен номер на пакет, вместо да използвате моя.

След това под App Services, маркирайте „Push Notifications.“ Натиснете продължение.

След това ще бъдете пренасочени към страница „Потвърдете вашия идентификационен номер на приложението“. Регистър на печата.

Сега се върнахме към нашата страница „Идентификационни номера на приложението iOS“. Потърсете току-що създадения ID на приложението. Натиснете върху него и ще видите падащо меню на Application Services.

Превъртете надолу, докато стигнете до края на падащото меню и трябва да видите бутон „Редактиране“. Натиснете това.

Ще се покаже страницата „Настройки за идентификатор на iOS приложение“, превъртете докрай надолу, докато видите „Push Notifications“.

Време е да създадем „Клиентски SSL сертификат.“ Това ще позволи на нашия сървър за уведомяване (Firebase) да се свърже с Apple Push Notification Service. Под SSL сертификат за развитие натиснете бутона „Създаване на сертификат…“.

Сега ще видим това.

За да генерираме сертификат, ще ни трябва файл със заявка за подписване на сертификат (CSR) от нашия Mac. Ще се върнем на тази страница по-късно, но сега имаме нужда от CSR файла.

Генериране на CSR файл

За да генерирате CSR файл, натиснете cmd + интервал и извършете прожектор на прожекторите за „Keychain Access.“ Отворете Keychain Access и отидете до менюто, за да изберете Keychain Access> Certificate Assistant> Заявете сертификат от сертифициращия орган ...

Трябва да се появи „Assistant Certificate Assistant“.

Попълнете своя имейл адрес и име. Изберете „Запазени на диск“ и натиснете Продължи. След това запазете вашата CSR някъде на твърдия ви диск.

Качване на вашия CSR файл

След като генерираме нашата КСО, той е готов да се върне към страницата „Добавяне на сертификат за iOS“.

Превърти надолу. Натиснете продължение и след това кликнете върху бутона „Избор на файл…“. Изберете CSR файла, който току-що записахте на вашия твърд диск. След това щракнете отново за продължаване. След това на уеб страницата трябва да се каже „Вашият сертификат е готов.“

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

Подготовка на сертификата за APN

Сега, когато сте създали iOS сертификата, ще трябва да подготвите сертификата за APN (кратко за Apple Push Notifications), който ще бъде използван по-късно в конфигурацията на Firebase. Отворете Finder и намерете сертификата, който сте изтеглили по-рано.

Щракнете двукратно върху файла на сертификата (например aps_development.cer), за да добавите сертификата в Keychain Access.

Сега отворете Keychain Access. В категорията „Моите сертификати“ трябва да видите сертификата, който току-що добавихте. Кликнете върху стрелката за разгъване вляво от името на сертификата, за да разкриете опцията за частен ключ. Щракнете с десния бутон върху личния ключ и натиснете експортиране.

След като щракнете върху Експортиране, изскачащ прозорец ще ви подкани да запазите личния си ключ като .p12 файл. Продължете и щракнете върху запазване.

След това въведете парола, ако искате да защитите изнесения си сертификат. Щракнете върху OK, за да потвърдите.

Най-накрая! Току-що завършихме конфигурацията и подготовката за iOS. Сега сме готови да преминем към Firebase! Да започваме.

2. Конфигуриране на Firebase за Push Известия

Първо, преминете към конзолата Firebase. Влезте с вашия акаунт в Google, за да влезете в конзолата. Ако не знаете как да превключите към конзолата, в горния десен ъгъл има бутон, който гласи „Отиди на конзолата“.

След като сте на конзолата, кликнете върху бутона „Създаване на нов проект“.

Назовавам проекта си като „Демонстрация за оповестяване на Firebase“, но вие сте свободни да използвате каквото име искате. Просто натиснете бутона „Създаване на нов проект“, за да продължите.

След това сте пренасочени към страницата за преглед на проекта. Сега кликнете върху бутона „Добавяне на Firebase към вашия iOS“. Въведете своя идентификационен номер на iOS пакет, можете да го намерите в началото на config.xml файла на вашето приложение Cordova.

ID = "com.possible.firebasenotificationdemo"

След това щракнете върху бутона „ДОБАВЕТЕ ПРИЛОЖЕНИЕ“.

Следвайте инструкциите на екрана, за да изтеглите файла GoogleInfo.plist. Този файл ще ни трябва по-късно.

Кликнете върху „Продължи“, за да преминете към следващата стъпка. Ще видите инструкции, показващи как да добавите Firebase SDK в нашия проект. Тъй като не разработваме приложението първоначално, не е необходимо да следваме тази стъпка. Просто игнорирайте и щракнете върху „Продължи“, за да продължите. Накрая щракнете върху „Finish“, за да завършите конфигурацията. След това трябва да видите приложението си за iOS в страницата за преглед на Firebase.

За Android ще щракнете върху „Добавяне на Firebase към вашия Android“ и следвате същите стъпки, но вместо да изтеглите файла GoogleInfo.plist, ще изтеглите файла google-services.json.

Сега, обратно към iOS частта, трябва да добавим сертификата за APN, който създаваме за Push Notifications. Потърсете иконата за настройка горе вдясно. Щракнете върху иконата за настройки> Настройки на проекта.

Изберете раздела Облачни съобщения.

Превъртете надолу и кликнете върху бутона „Качване на сертификат“.

Тогава трябва да се появи поп, който да ви поиска сертификата ви за APN за развитие.

Кликнете върху „Преглед“ и изберете вашия APN сертификат (т.е. .p12 файл), който сте подготвили в по-ранния раздел. Ако сте конфигурирали файла с парола, въведете парола за сертификат, последвана от натискане на бутона Качване.

Сега трябва да видите файл със сертификати за разработка APN в настройката на Cloud Messaging.

За тази статия ще използваме сертификата за разработка на APN. Ако решите да поставите приложението си в App Store, уверете се, че имате файл за сертификат за производство APNs и за Firebase.

Страхотно! Най-накрая завършваме всички проклети конфигурации. Нека инсталираме приставката за известия в нашето приложение Кордова.

3. Използване на cordova-plugin-firebase

Знаехме известно време, за да стигнем до тук, знам, но не се притеснявайте, ще си заслужава.

Инсталация

Инсталирайте приставката, като я добавите config.xml на вашия проект:

или чрез стартиране:

добавка за кабел добавете cordova-plugin-firebase@0.1.20 --save

Вземете конфигурационните си файлове Firebase, GoogleService-Info.plist за ios и google-services.json за android, и ги поставете в основната папка на вашия проект на cordova:

- Моят проект/
    платформи /
    плъгини /
    WWW /
    config.xml
    google-services.json <-
    GoogleService-Info.plist <-
    ...

Можете да намерите повече подробности за това как да използвате приставката в страницата на проекта Github:

https://github.com/arnesson/cordova-plugin-firebase

4. Допълнителни бележки

Икона за известие

Приложението iOS ще използва иконата на приложението по подразбиране, но за новите версии на Android трябва да добавим отделен файл с икони.

Можете да намерите повече за спецификациите на иконата тук, има и този инструмент, който може да ви помогне да ги създадете.

След това можете да добавите иконите към папките / платформи / android / res / . Може да се извърши ръчно или да се създаде кука за автоматизиране на процеса.

Това е.

Ако тази статия ви харесва, моля, щракнете върху ❤, за да я препоръчате на Medium.

Щастливо кодиране.