Ez egy alapvető áttekintés arról, hogy miként valósíthatjuk meg a push értesítést az Android-ban és az iOS-ben is, az FCC-s cordova plugin és a Google Firebase FCM segítségével. Ehhez Ubuntu 16.04 LTS-t fogok használni, de a fejlesztéshez használt operációs rendszernek nem kell sokat számítania.
FCM integráció a Cordova hibrid alkalmazásokhoz
Android-megvalósítás
Hozzon létre egy üres mappát pushSample
cd '/opt/lampp/htdocs' mkdir pushSample cd pushSample cordova create pushSample cd pushSample cordova platform add android cordova plugin add cordova-plugin-FCMA cordova FCM bővítmény hozzáadása közben hiba jelenik meg:
Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.Megjegyzés: Ez azért van, mert nem adtuk hozzá a google-services.json fájlt, amelyet a következő lépésekben kell létrehozni.
Ezután nyissa meg a Google firebase konzolt és a Projekt hozzáadása (alapvetően egy új projekt létrehozását jelenti)
A projekt létrehozása után kattintson a bal oldali panel Értesítések szakaszára.
Most kattintson az Android ikonra az Android platform támogatásának hozzáadásához a projektünkhöz.
A következő felugró űrlapon töltse ki a részleteket az alábbiak szerint: Android-csomag neve: A csomag neve vagy azonosítója a Play Áruházban található alkalmazás egyedi azonosítója. Ne feledje, hogy ez egy nagyon fontos érték, amelyet nem lehet megváltoztatni egy alkalmazásnál, miután feltöltötték a Play Áruházba. Ez fordított tartománynév-szintaxisban lesz: pl. A hello.pushSample.com alkalmazásazonosítója: com.pushSample.hello lesz. A cordova projekt config.xml fájljában is állítsa be ugyanazt az alkalmazásazonosítót. A mintaprojektünkben a következő lesz: pushSample / pushSample / config.xml, például nekem a fájl tartalma:
HelloCordova A sample Apache Cordova application that responds to the deviceready event. Apache Cordova Team Jegyezze fel a címkét
Itt az id attribútuma a csomag azonosító , amely alapértelmezés szerint io.cordova.hellocordova változtassa meg az azonosítót megadta a firebase konzolon. A com.pushSample.hello fájlt fogom használni
A Firebase konzol felugró ablakában a következő kitöltendő mező:
Alkalmazás beceneve (opcionális): Ez lehet ugyanaz az alkalmazás neve, amely megjelenik az alkalmazás menüjében, ez a config.xml fájlban is megváltoztatható, alapértelmezés szerint ez HelloCordova lesz, frissítem PushSample-ra
Hibakeresési aláírás-tanúsítvány SHA-1 (opcionális): Ez nem kötelező, hagyja üresen.
Ezután kattintson az Alkalmazás regisztrálása elemre
A következő lépés a google services json fájl letöltése .
Kattintson a google-services.json letöltése gombra, amelynek le kell töltenie a fájlt a számítógépére.
Miután megkapta a fájlt, illessze be a cordova projekt gyökérmappájába, esetemben:
/opt/lampp/htdocs/pushSample/pushSampleKövetkező építeni a projektet
cordova build androidA google-services.json fájl hozzáadása után sikeresen fel kell építenie.
Ezután meg kell írnunk az ügyféloldali kódot a push értesítések kezeléséhez:
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)); // } }); });A kód alapvetően először meghívja a getToken funkciót kap egy FCM jelzőt firebase, majd a visszahívás nyilvántartások másik visszahívás onNotification kezelni, hogy mi történik, amikor egy push értesítés érkezett.
az onNotification függvény adatértéke tartalmazza az értesítési adatokat. A data.wasTapped azt jelzi, hogy az értesítést akkor küldik-e, amikor az alkalmazás előtérben vagy háttérben van, így minden esetben külön logikát határozhatunk meg. Most, hogy kiválasszon egy minta leküldéses értesítést, kattintson a bal oldali panel Értesítés szakaszára. Ez most megmutatja a firebase értesítések összeállítóját, bemutatva a korábban elküldött értesítések listáját.
Abban az esetben, ha még nem küldött push értesítéseket. Látnia kell az első értesítés elküldése gombot.
Megjegyzés: A Notification Composer így fog kinézni:
Megjegyzés A leküldéses értesítés küldése során a Firebase konzol használatával az esetemben ki kell választania a com.pushSample.hello alkalmazás nevét .
Az egyedi alkalmazásspecifikus adatok elküldéséhez válassza az előbbi lehetőségeket -> Kulcsérték-párok.
Az onNotification visszahívás adatobjektuma a következőképpen fog kinézni
{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}Vegye figyelembe azt is, hogy amikor a REST API-k segítségével push-értesítéseket küld az alkalmazásszerveréről a firebase értesítések írója helyett, a következő szintaxist kell használnia:
//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)Megjegyzés: „click action”: „FCM PLUGIN_ACTIVITY” mező nagyon fontos, mivel annak meg nem említése nem hajtja végre az onNotification visszahívást előtérben.
iOS implementáció
Az iOS bevezetéséhez a következő dolgokat kell előállítanunk az apple fejlesztői oldalon. Az XCODE 8.3-at használom
Alkalmazásazonosító: com.example.app Apple Push Notification Authentication Key (APNs Auth Key) Fejlesztési Szolgáltató Profil engedélyezve a Push értesítéseket. APN tanúsítványok
A leküldéses értesítések Firebase-dokumentumai is kiváló alapos kiindulópontot jelentenek.
Megjegyzés: A szimulátorban nem lehet futtatni a push értesítéseket, tényleges eszközre lesz szüksége.
Kezdjük.
Először jelentkezzen be a firebase fejlesztői konzoljába, és válasszon ki egy meglévő projektet, vagy hozzon létre egy új projektet, ugyanazt a pushSample projektet fogjuk használni. A projekt áttekintésében adjon hozzá egy másik alkalmazást, amelynek platformja iOS. A megjelenő felugró ablakban írja be a következő részleteket:
- 1. lépés Csomagazonosító: ez az az egyedi azonosító, amelyet az alkalmazás azonosításához használnak az apple appstore-ban. Ennek meg kell egyeznie a kötegazonosítóval, amelyet a cordova projekt config.xml fájljában vagy az xCode Csomagazonosító szakaszában fog megadni. . a com.pushSample.hello alkalmazást használjuk : Ez az opcióazonosító becenév, ugyanazt a nevet fogjuk használni, amely megjelenik az iOS alkalmazásmenüben, amely a PushSample. App Store azonosító : Hagyja ezt üresen.
Ha rákattint a regisztrációs alkalmazásra, megjelenik az iOS alkalmazás 2. lépése.
- 2. lépés Itt kattintson a letöltés Googleservice-info.plist gombra a fájl letöltéséhez, amelyet a későbbi lépésekben használunk.
A 3. és 4. lépést kihagyhatjuk, mivel ezeket a cordova FCM plugin belsőleg kezeli.
Miután hozzáadta az iOS alkalmazást a projekthez Kattintson a fogaskerék ikonra az áttekintő címke mellett a bal oldali panelen, és válassza ki a projekt beállításait. (Lásd az alábbi képet.). Ennek alapértelmezés szerint meg kell nyitnia a projekt beállításainak Általános lapját.
Ezután kattintson az iOS alkalmazásra az Alkalmazások menüben -> iOS alkalmazások. Az iOS alkalmazás részleteiben frissítse az App ID előtagot , amelynek értékét megkapja az Apple Tagközpontban a tagság lapon.
Most váltson a Cloud Messaging fülre -> iOS alkalmazás konfigurációs szakaszra.
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/pushSampleCreate a new cordova project, Note : Use sudo if required
cordova create pushSample cd pushSampleNow add the latest iOS platform
sudo cordova platform add iosNow paste the Googleservice-info.plist file we downloaded earlier in the cordova project root folder, for me it is
/Volumes/Development/pushSample/pushSampleadd the cordova fcm plugin.
cordova plugin add cordova-plugin-fcmUpdate the default app id and app name with the bundle id we decided earlier while configuring firebase console and the app name.
PushSampleAt 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 iosMiután a cordova build parancs sikeres volt, nyissa meg az alkalmazást xcode-ban. Ehhez nyissa meg az xcode.proj fájlt, amely a
your_cordova_project/platforms/ios/app_name.xcodeprojnekem ez az
/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj
Ezután engedélyezze a Push Notifications alkalmazást a projekt Képességek lapján.
Csatlakoztasson egy tényleges eszközt, és futtassa az alkalmazást.
Most indítsa el a leküldéses értesítést a firebase értesítési zeneszerzőtől, és minden működjön ...
