Prin t1tan1um

Aceasta este o plimbare directă de bază în ceea ce privește modul de implementare a notificării push în Android, precum și iOS folosind plugin cordova pentru fcm și Google Firebase FCM de la zero. Voi folosi Ubuntu 16.04 LTS pentru aceasta, dar sistemul de operare utilizat pentru dezvoltare nu ar trebui să conteze prea mult.

Integrare FCM pentru aplicațiile hibride Cordova

Implementare Android

Creați un folder gol pushSample

cd '/opt/lampp/htdocs'
mkdir pushSample
cd pushSample
cordova create pushSample
cd pushSample
cordova platform add android
cordova plugin add cordova-plugin-FCM

În timp ce adăugați pluginul cordova FCM va apărea o eroare:

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.

Notă: acest lucru se datorează faptului că nu am adăugat fișierul google-services.json care trebuie creat în următorii pași următori.

Apoi deschideți consola google firebase și Adăugare proiect (practic înseamnă a crea un proiect nou)

Odată ce proiectul este creat, faceți clic pe secțiunea Notificări din panoul lateral stâng.

Acum faceți clic pe pictograma Android pentru a adăuga Android suport platformă pentru proiectul nostru.

În următorul formular pop-up completați detaliile după cum urmează: Numele pachetului Android: Numele pachetului sau ID-ul este identificatorul unic pentru o aplicație din magazinul Play. Rețineți că este o valoare foarte importantă, care nu poate fi modificată pentru o aplicație după ce este încărcată în magazinul Play. Va fi în sintaxă inversă a numelui de domeniu: de exemplu, hello.pushSample.com va avea codul aplicației: com.pushSample.hello. De asemenea, în config.xml fișierul din proiectul dvs. cordova setați același id al aplicației. Pentru proiectul nostru eșantion va fi în: pushSample / pushSample / config.xml, de exemplu pentru mine conținutul acestui fișier este:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Rețineți eticheta

<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Aici atributul id este pachetul id care va fi implicit io.cordova.hellocordova schimbați-l cu ID-ul aplicației pe care l-ați specificat în consola Firebase. Voi folosi com.pushSample.hello

Următorul câmp care va fi completat în fereastra pop-up a consolei Firebase este:

Pseudonimul aplicației (opțional): Acesta poate fi același nume de aplicație care este afișat în meniul aplicației, acesta poate fi modificat și în config.xml, în mod implicit va fi HelloCordova, îl voi actualiza la PushSample

Certificat de semnare a depanării SHA-1 (opțional): Acest lucru este opțional, vă rugăm să îl lăsați necompletat.

Apoi faceți clic pe Înregistrați aplicația

Următorul pas este să descărcați fișierul serviciile google json fişier.

descărcați serviciile google json

Faceți clic pe Descărcați google-services.json , care ar trebui să descarce fișierul pe computer.

Odată ce ați obținut fișierul, lipiți-l în folderul rădăcină al proiectului dvs. cordova, în cazul meu:

/opt/lampp/htdocs/pushSample/pushSample

Apoi construiți proiectul

cordova build android

După adăugarea fișierului google-services.json ar trebui să se construiască cu succes.

Apoi trebuie să scriem codul clientului pentru gestionarea notificărilor push:

FCMPlugin.getToken(function(token) {
    //this is the FCM token which can be used
    //to send notification to specific device 
    console.log(token);
    //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
    //Here you define your application behaviour based on the notification data.
    FCMPlugin.onNotification(function(data) {
        console.log(data);
        //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
        //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
        // if (data.wasTapped) {
        //     //Notification was received on device tray and tapped by the user.
        //     alert(JSON.stringify(data));
        // } else {
        //     //Notification was received in foreground. Maybe the user needs to be notified.
        //     alert(JSON.stringify(data));
        // }
    });
});

Codul apelează în primul rând la getToken funcție pentru a obține un jeton FCM din firebase, apoi în callback înregistrează un alt callback pe Notificare pentru a gestiona ceea ce se întâmplă când se primește o notificare push.

pe Notificare funcția are o valoare de date care conține datele de notificare. data.wasTapped indică dacă notificarea este trimisă atunci când aplicația este în prim-plan sau în fundal, astfel încât să putem defini o logică separată pentru fiecare caz. Acum, pentru a declanșa un eșantion de notificare push, faceți clic pe secțiunea Notificare din panoul lateral stâng, acesta ar trebui să vă arate acum compozitorul de notificări firebase, afișând lista notificărilor anterioare trimise.

În cazul în care nu ați trimis încă notificări push. Ar trebui să vedeți un trimite prima notificare buton.

Notă: Compozitorul de notificări va arăta astfel:

trimite prima notificare

Notă În timp ce trimiteți notificări push utilizând consola firebase, trebuie să selectați numele aplicației com.pushSample.bună În cazul meu.

Pentru a trimite datele specifice aplicației personalizate, selectați opțiuni avansate -> Perechi de valori cheie.

opțiuni avansate

Obiectul de date din apelul de apel onNotification va arăta după cum urmează

{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}

De asemenea, rețineți că, în timp ce trimiteți notificări push utilizând API-urile REST de pe serverul de aplicații în locul compozitorului de notificări firebase, trebuie să utilizați următoarea sintaxă:

//POST: https://fcm.googleapis.com/fcm/send
//HEADER: Content-Type: application/json
//HEADER: Authorization: key=AIzaSy*******************
{
  "notification":{
    "title":"Notification title",
    "body":"Notification body",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"fcm_push_icon"
  },
  "data":{
    "param1":"value1",
    "param2":"value2"
  },
    "to":"/topics/topicExample",
    "priority":"high",
    "restricted_package_name":""
}
//sound: optional field if you want sound with the notification
//click_action: must be present with the specified value for Android
//icon: white icon resource name for Android >5.0
//data: put any "param":"value" and retreive them in the JavaScript notification callback
//to: device token or /topic/topicExample
//priority: must be set to "high" for delivering notifications on closed iOS apps
//restricted_package_name: optional field if you want to send only to a restricted app package (i.e: com.myapp.test)

Notă: „faceți clicacțiune ”:” FCMPLUGIN_ACTIVITY ” câmpul este foarte important, deoarece nu menționăm că nu va executa apelul de apel onNotification în modul prim-plan.

realizat cu implementarea Android

Implementarea iOS

Pentru implementarea iOS vom solicita următoarele lucruri pentru a fi generate în pagina dezvoltatorului Apple. Folosesc XCODE 8.3

ID aplicație: com.example.app Profilul de furnizare a dezvoltării Apple Push Notification Authentication Key (cheie de autentificare APN) cu notificări push activate. Certificate APN

De asemenea Firebase documente pentru notificări push este un punct de plecare excelent în profunzime.

Notă: Nu puteți rula notificări push în simulator, veți avea nevoie de un dispozitiv real.

Sa incepem.

În primul rând conectați-vă la consola dezvoltatorului Firebase și selectați un proiect existent sau creați un proiect nou, vom folosi același proiect pushSample. În prezentarea generală a proiectului, adăugați o altă aplicație cu iOS ca platformă. În fereastra pop-up care apare, introduceți următoarele detalii:

  • Pasul 1 ID pachet: acesta este identificatorul unic care este utilizat pentru a identifica o aplicație în magazinul de aplicații Apple, acesta ar trebui să fie același cu ID-ul pachetului pe care îl veți specifica în fișierul config.xml al proiectului cordova sau în secțiunea Id pachet în xCode. noi vom folosi com.pushSample.bună Numele aplicatiei : Acesta este numele de identificator al opțiunii, vom folosi același nume care va fi afișat în meniul aplicației iOS, care este PushSample. Codul magazinului de aplicații : Lăsați acest lucru necompletat.

După ce faceți clic pe Înregistrați aplicația, apare pasul 2 al aplicației iOS.

  • Pasul 2 Aici faceți clic pe descărcare Googleservice-info.plist pentru a descărca fișierul pe care îl vom folosi în pașii ulteriori.

Pasul 3 și Pasul 4 putem sări, deoarece acestea vor fi tratate intern de pluginul cordova FCM.

Odată ce aplicația iOS este adăugată la proiectul dvs. Faceți clic pe pictograma roată pe lângă eticheta de prezentare generală din panoul lateral stâng și selectați setările proiectului. (Consultați imaginea de mai jos.). Aceasta ar trebui să deschidă în mod implicit fila Generală a setărilor proiectului.

Setări proiect

Apoi faceți clic pe aplicația iOS din Aplicațiile dvs. -> Aplicații iOS. În detaliile aplicației iOS actualizați fișierul Prefix ID aplicație, valoarea pentru care veți obține în Centrul pentru membri Apple din fila de membru.

Acum treceți la Mesagerie în cloud fila -> secțiunea de configurare a aplicației iOS.

mesagerie cloud

Aici, după cum sa discutat anterior, încărcați cheia de autentificare APN pe care ați generat-o în centrul de membri Apple. Apoi facem configurarea aplicației pentru partea clientului. Creați un nou eșantion de folder în folderul de dezvoltare, pentru mine este

/Volumes/Development/

deci noul folder va fi

/Volumes/Development/pushSample
cd /Volumes/Development/pushSample

Creați un nou proiect cordova, Notă: Utilizați sudo, dacă este necesar

cordova create pushSample
cd pushSample

Acum adăugați cea mai recentă platformă iOS

sudo cordova platform add ios

Acum lipiți Googleservice-info.plist fișier pe care l-am descărcat mai devreme în folderul rădăcină al proiectului cordova, pentru mine este

/Volumes/Development/pushSample/pushSample

adăugați pluginul cordova fcm.

cordova plugin add cordova-plugin-fcm

Actualizați ID-ul aplicației implicit și numele aplicației cu ID-ul pachetului pe care l-am decis mai devreme în timp ce configurați consola Firebase și numele aplicației.

<widget id="com.pushSample.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>PushSample</name>

În acest moment, exemplul de cod va avea un fișier app.js, pe care îl puteți modifica și adăuga funcțiile getToken și onNotification la fel ca Android. Codul javascript este același pentru ambele platforme.

Apoi rulați comanda de construire cordova

sudo cordova build ios

Odată ce comanda cordova build are succes, deschideți aplicația în xcode. Pentru aceasta deschideți fișierul xcode.proj, care va fi localizat în

your_cordova_project/platforms/ios/app_name.xcodeproj

pentru mine este

/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj
Proiectul Xcode

Apoi activați notificările push în fila Capabilități a proiectului.

Conectați un dispozitiv real și rulați aplicația.

Acum declanșați notificarea push de la compozitorul de notificări firebase și totul ar trebui să funcționeze …

fericit steve