Firebase Cloud Messaging Integration til Cordova Hybrid Apps

Dette er en grundlæggende ligetil gennemgang med hensyn til, hvordan man implementerer push-underretning i Android såvel som iOS ved hjælp af cordova-plugin til fcm og Google Firebase FCM fra bunden. Jeg bruger Ubuntu 16.04 LTS til dette, men OS, der bruges til udvikling, skal ikke have noget meget.

FCM-integration til Cordova Hybrid-apps

Android-implementering

Opret en tom mappe pushSample

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

Mens du tilføjer cordova FCM-pluginet, vises der en fejl:

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

Bemærk: Dette skyldes, at vi ikke har tilføjet filen google-services.json, som skal oprettes i de næste følgende trin.

Åbn derefter google firebase-konsollen og tilføj projekt (betyder grundlæggende at oprette et nyt projekt)

Når projektet er oprettet, skal du klikke på sektionen Meddelelser i panelet til venstre.

Klik nu på Android-ikonet for at tilføje Android- platformsupport til vores projekt.

I den næste popup-formular skal du udfylde detaljerne som følger: Navn på Android-pakke: Pakkenavn eller ID er den unikke id for en app i playbutikken. Bemærk, at det er en meget vigtig værdi, som ikke kan ændres for en app, når den er uploadet til playbutikken. Det vil være i omvendt domænenavnsyntaks: f.eks. Hello.pushSample.com vil have app-id: com.pushSample.hello. Også i config.xml- filen i dit cordova-projekt skal du indstille den samme app-id. For vores prøveprojekt vil det være i: pushSample / pushSample / config.xml f.eks. For mig er indholdet af denne fil:

  HelloCordova  A sample Apache Cordova application that responds to the deviceready event.   Apache Cordova Team                  

Bemærk taggen

Her er attribut-id pakke- id'et, der som standard vil være io.cordova.hellocordova ændre det til det app-id, du har angivet i firebase-konsollen. Jeg bruger com.pushSample.hello

Næste felt, der skal udfyldes i popup-firebase-konsol, er:

App-kaldenavn (valgfrit): Dette kan være det samme appnavn, der vises i menuen til appen, dette kan også ændres i config.xml, som standard vil det være HelloCordova, jeg opdaterer det til PushSample

Fejlsøgningsattest SHA-1 (valgfrit): Dette er valgfrit, lad det være tomt.

Klik derefter på Registrer app

Næste trin er at downloade Google Services json- filen.

Klik på knappen Download google-services.json , som skal downloade filen til din pc.

Når du først har fået filen, skal du indsætte den i rodmappen på dit cordova-projekt, i mit tilfælde:

/opt/lampp/htdocs/pushSample/pushSample

Bygg derefter projektet

cordova build android

Efter tilføjelse af google-services.json-filen skal den bygges med succes.

Derefter skal vi skrive klientsidekoden til håndtering af push-underretninger:

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)); // } }); });

Koden kalder dybest set først getToken- funktionen for at få et FCM-token fra firebase, og derefter registreres der i tilbagekaldelsen en anden tilbagekaldelse på Meddelelse for at håndtere, hvad der sker, når der modtages en push-meddelelse.

den onNotification funktion har en dataværdi, der indeholder de data anmeldelsen. data.wasTapped angiver, om meddelelsen sendes, når appen er i forgrunden eller baggrunden, så vi kan definere separat logik for hvert tilfælde. For at udløse en prøve push-besked skal du klikke på afsnittet Meddelelse i panelet til venstre, dette skal nu vise dig firebase-meddelelseskomponisten og vise listen over tidligere sendte meddelelser.

Hvis du ikke har sendt nogen push-meddelelser endnu. Du skal se en send din første underretningsknap .

Bemærk: Notifikationskomponisten vil se sådan ud:

Bemærk Når du sender push-besked ved hjælp af firebase-konsol, skal du vælge appnavn com.pushSample.hello i mit tilfælde.

For at sende de brugerdefinerede applikationsspecifikke data skal du vælge forhåndsindstillinger -> Nøgleværdipar.

Dataobjektet i onNotification tilbagekald ser ud som følger

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

Bemærk også, mens du sender push-underretninger ved hjælp af REST API'er fra din appserver i stedet for firebase-meddelelseskomponisten, skal du bruge følgende syntaks:

//POST: //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)

Bemærk: " klikhandling ": "FCM PLUGIN_ACTIVITY" -feltet er meget vigtigt, da det ikke nævnes, at det ikke udfører onNotification-tilbagekald i forgrundstilstand.

iOS-implementering

Til iOS-implementeringen vil vi kræve, at følgende ting genereres på Apple-udvikler-siden. Jeg bruger XCODE 8.3

App-id: com.example.app Apple Push Notification Authentication Key (APNs Auth Key) Udviklingsprovisionsprofil med Push Notifications aktiveret. APNs-certifikater

Also Firebase docs for push notifications is an excellent in depth starting point.

Note: You cannot run push notifications in the simulator, you will need an actual device.

Lets begin.

Firstly login to firebase developer’s console, and select an existing project or create a new project, we will be using the same pushSample project. In the project overview add another app with iOS as platform. In the popup that comes up, enter the following details :

• Step 1 Bundle id : this is the unique identifier which is used to identify an app in the apple appstore, this should be same as the bundle id you will specify in the config.xml file of the cordova project or the Bundle Id section in xCode. we will use com.pushSample.helloApp Name : This is the option identifier nick name, we will be using the same name which will display in the iOS app menu which is PushSample. App Store Id : Leave this blank.

Once you click on register app the iOS app step 2 appears.

• Step 2 Here click on the download Googleservice-info.plist button to download the file which we will use in the later steps.

Step3 and Step 4 we can skip as these will be handled internally by the cordova FCM plugin.

Once the iOS app is added to your project Click on the gear icon besides the overview label in the left side panel and select project settings. ( Refer below image. ) . This should by default open the General Tab of your project settings.

Next click on your iOS app in Your Apps -> iOS Apps. In the iOS app details update the App ID Prefix, the value for which you will get in the Apple Member Center under the membership tab.

Now switch to the Cloud Messaging tab -> iOS app configuration section.

Here as discussed earlier upload the APNs Auth Key you generated in the Apple member center. Next we do the client side app setup. Create a new folder sampleApp in your development folder, for me it is

/Volumes/Development/

so the new folder will be

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

Create a new cordova project, Note : Use sudo if required

cordova create pushSample cd pushSample

Now add the latest iOS platform

sudo cordova platform add ios

Now paste the Googleservice-info.plist file we downloaded earlier in the cordova project root folder, for me it is

/Volumes/Development/pushSample/pushSample

add the cordova fcm plugin.

cordova plugin add cordova-plugin-fcm

Update the default app id and app name with the bundle id we decided earlier while configuring firebase console and the app name.

 PushSample

At this point the sample code will have an app.js file, which you can modify and add the getToken and onNotification functions same as android. The javascript code is same for both platforms.

Next run cordova build command

sudo cordova build ios

Når cordova build-kommandoen er vellykket, skal du åbne appen i xcode. For at gøre dette skal du åbne xcode.proj-filen, som findes i

your_cordova_project/platforms/ios/app_name.xcodeproj

for mig er det

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

Derefter skal du aktivere Push Notifications i fanen Capabilities i projektet.

Tilslut en faktisk enhed, og kør appen.

Nu udløser push-meddelelsen fra firebase-meddelelseskomponisten, og alt skal fungere ...