Jak přidat oznámení Push do vaší aplikace Cordova pomocí Firebase

Tento článek vás provede celým procesem vytváření oznámení Push pro platformy Android i iOS ve vaší aplikaci Cordova pomocí Cordova-plugin-firebase.

AKTUALIZACE: Podle některých komentářů nemusí být popsaný proces v některých zařízeních Android již funkční. Než se pokusíte použít následující pokyny, uvědomte si to. Omlouvám se za lidi. Doufám, že některé z těchto informací mohou být stále užitečné, bohužel to je život hybridního mobilního vývojáře.

Buďme upřímní, práce pomocí Push Oznámení s Cordovou může být bolest v zadku, zvláště pokud toho o prostředí iOS a jeho konfiguraci moc nevíš. Než přidáte plugin do své aplikace, je třeba postupovat podle několika kroků. Doufejme, že tento článek věci objasní, takže začněme nudnou částí: Nakonfigurujte prostředí iOs.

1. Konfigurace a příprava prostředí iOS

Mimochodem, nemusíte nic dělat, pokud pracujete pouze s platformami Android, pro Android je tento proces mnohem jednodušší. (Díky Apple)

Dobře, za předpokladu, že již máte placený účet vývojáře, pokračujte a přihlaste se ke svému účtu Apple Developer. Po přihlášení budete přesměrováni na domovskou stránku Apple Developer. Odtud byste měli vidět „Účet“ na horním navigačním panelu. Klikněte na tuto možnost.

Nyní byste měli být ve svém účtu Apple Developer.

Nyní se podívejte do levé postranní lišty. Třetí řádek by měl říkat „Certifikáty, ID a profily“. Vyberte tuto možnost.

Nyní, když jste na stránce „Certifikáty, identifikátory a profily“, podívejte se na levou postranní lištu a měla by tam být sekce nazvaná „Identifikátory“. V této sekci je odkaz, který říká „ID aplikací“.

Měli byste vidět všechna vaše ID aplikací pro iOS.

Nyní v pravém horním rohu byste měli vidět tlačítko +. Stiskněte to. Poté byste měli být v této fázi:

Nyní musíme vyplnit následující položky:

  • Popis ID aplikace - Název. Zde byste měli uvést název aplikace (např. Ukázku oznámení Firebase)
  • Přípona ID aplikace - Explicitní ID aplikace - ID balíčku. Zde musíte vybrat jedinečný identifikátor balíčku pro vaši aplikaci (např. Com.possible.firebasenotificationsdemo). Ujistěte se, že místo mého používáte vlastní ID balíčku.

Poté v části App Services zaškrtněte políčko Push Push.

Poté budete přesměrováni na stránku „Potvrďte ID aplikace“. Stiskněte zaregistrovat.

Nyní se vracíme na naši stránku „ID aplikací pro iOS“. Vyhledejte ID aplikace, které jste právě vytvořili. Stiskněte na něj a měla by se zobrazit rozbalovací nabídka aplikačních služeb.

Přejděte dolů, dokud nedosáhnete konce rozevíracího seznamu a mělo by se zobrazit tlačítko „Upravit“. Stiskněte to.

Zobrazí se stránka „Nastavení ID aplikace pro iOS“ a posuňte se úplně dolů, dokud se nezobrazí „Oznámení Push“.

Je na čase, abychom vytvořili „Klientský SSL certifikát“. To umožní nášmu oznamovacímu serveru (Firebase) připojit se k Apple Push Notification Service. V části Vývojový certifikát SSL stiskněte tlačítko „Vytvořit certifikát…“.

Teď to uvidíme.

K vygenerování certifikátu potřebujeme soubor s požadavkem na podepsání certifikátu (CSR) od našeho počítače Mac. Na tuto stránku se vrátíme později, ale nyní potřebujeme soubor CSR.

Generování souboru CSR

Chcete-li vygenerovat soubor CSR, stiskněte cmd + mezeru a proveďte vyhledávání v hledáčku „Keychain Access“. Otevřete Keychain Access a přejděte do nabídky a vyberte Keychain Access> Certificate Assistant> Vyžádejte si certifikát od certifikační autority…

Objeví se vyskakovací okno „Asistent certifikátu“.

Vyplňte svou e-mailovou adresu a jméno. Vyberte „Uloženo na disk“ a stiskněte Pokračovat. Poté uložte CSR někde na pevný disk.

Nahrávání souboru CSR

Nyní, když máme vygenerovaný CSR, je připraven se vrátit na stránku „Přidat certifikát iOS“.

Posunout dolů. Stiskněte pokračovat a potom klikněte na tlačítko „Vybrat soubor…“. Vyberte soubor CSR, který jste právě uložili na pevný disk. Dále klikněte znovu na pokračovat. Poté by měla webová stránka říkat „Váš certifikát je připraven.“

Nyní můžete pokračovat a klepnutím na modré tlačítko stáhnout certifikát stáhnout.

Příprava certifikátu APN

Nyní, když jste vytvořili certifikát iOS, budete muset připravit certifikát APN (zkratka pro Apple Push Notifications), který bude později použit v konfiguraci Firebase. Otevřete Finder a vyhledejte certifikát, který jste stáhli dříve.

Dvojitým kliknutím na soubor certifikátu (např. Aps_development.cer) přidejte certifikát do přístupu ke klíčovým klíčům.

Nyní otevřete přístup Keychain. V kategorii „Moje certifikáty“ byste měli vidět právě přidaný certifikát. Kliknutím na šipku rozbalení vlevo od názvu certifikátu zobrazíte možnost soukromého klíče. Klikněte pravým tlačítkem na soukromý klíč a stiskněte export.

Po klepnutí na tlačítko Export zobrazí vyskakovací okno výzvu k uložení soukromého klíče jako souboru .p12. Pokračujte a klikněte na Uložit.

Pokud chcete exportovaný certifikát chránit, zadejte heslo. Potvrďte kliknutím na OK.

Konečně! Právě jsme dokončili konfiguraci a přípravu pro iOS. Nyní jsme připraveni přejít na Firebase! Začněme.

2. Konfigurace Firebase pro oznámení Push

Nejprve přejděte na konzolu Firebase. Chcete-li vstoupit do konzole, přihlaste se pomocí svého účtu Google. Pokud nevíte, jak přepnout na konzolu, je v pravém horním rohu tlačítko, které říká „Přejít na konzoli“.

Jakmile jste na konzole, klikněte na tlačítko „Vytvořit nový projekt“.

Pojmenuji svůj projekt jako „Ukázka oznámení Firebase“, ale můžete použít libovolné jméno. Pokračujte kliknutím na tlačítko „Vytvořit nový projekt“.

Poté budete přesměrováni na stránku s přehledem projektu. Nyní klikněte na tlačítko „Přidat Firebase do vašeho iOS“. Zadejte své ID svazku iOS a najdete jej na začátku souboru config.xml vaší aplikace Cordova.

id = "com.possible.firebasenotificationdemo"

Poté klikněte na tlačítko „PŘIDAT APP“.

Postupujte podle pokynů na obrazovce a stáhněte soubor GoogleInfo.plist. Tento soubor budeme potřebovat později.

Kliknutím na „pokračovat“ přejdete na další krok. Uvidíte pokyny ukazující, jak přidat Firebase SDK do našeho projektu. Protože aplikaci nevyvíjíme nativně, nemusíme tento krok sledovat. Jednoduše ignorujte a pokračujte kliknutím na „Pokračovat“. Nakonec dokončete konfiguraci kliknutím na „Dokončit“. Pak byste měli vidět svou aplikaci pro iOS na stránce Přehled Firebase.

Pro Android klikněte na „Přidat Firebase do vašeho Androidu“ a postupujte přesně podle stejných kroků, ale místo stahování souboru GoogleInfo.plist stáhnete soubor google-services.json.

Nyní, zpět k části iOS, musíme přidat certifikát APN, který vytváříme pro oznámení push. Vyhledejte ikonu nastavení vpravo nahoře. Klikněte na ikonu nastavení> Nastavení projektu.

Vyberte kartu Cloud Messaging.

Přejděte dolů a klikněte na tlačítko „Odeslat certifikát“.

Pak by se mělo objevit vyskakovací okno s žádostí o certifikát APN pro vývoj.

Klikněte na procházení a vyberte si certifikát APN (tj. Soubor .p12), který jste připravili v předchozí části. Pokud jste soubor nakonfigurovali pomocí hesla, zadejte heslo k certifikátu a poté klikněte na tlačítko Nahrát.

Nyní byste měli vidět soubor certifikátů Development APN v nastavení Cloud Messaging.

V tomto článku budeme používat certifikát APN pro vývoj. Pokud se rozhodnete umístit aplikaci do obchodu App Store, ujistěte se, že máte také soubor certifikátů APN Production Production pro Firebase.

Skvělý! Nakonec dokončíme všechny zatracené konfigurace. Nainstalujte si plugin pro oznámení do naší aplikace Cordova.

3. Použití základny cordova-plugin-firebase

Chvíli jsme se sem dostali, vím, ale nebojte se, bude to za to stát.

Instalace

Nainstalujte si plugin přidáním jeho config.xml projektu:

nebo spuštěním:

plugin pro Cordova přidat cordova-plugin-firebase@0.1.20 - uložit

Získejte konfigurační soubory Firebase, GoogleService-Info.plist pro ios a google-services.json pro Android, a umístěte je do kořenové složky vašeho projektu Cordova:

- Můj projekt/
    platformy /
    pluginy /
    www /
    config.xml
    google-services.json <-
    GoogleService-Info.plist <-
    ...

Další podrobnosti o použití pluginu naleznete na stránce projektu Github:

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

4. Extra poznámky

Ikona oznámení

Aplikace iOS použije výchozí ikonu aplikace, ale pro nové verze systému Android musíme přidat oddělený soubor ikon.

Více informací o specifikacích této ikony najdete zde. K dispozici je také tento nástroj, který vám pomůže s jejich vytvořením.

Poté můžete ikony přidat do složek / Platform / android / res / . To lze provést ručně nebo vytvořit háček pro automatizaci procesu.

A je to.

Pokud se vám tento článek líbí, klikněte na ❤ a doporučte jej na Střední.

Šťastné kódování.