16 KiB
| title | localeTitle |
|---|---|
| Firebase Cloud Messaging Integration for Cordova Hybrid Apps | Firebase Cloud Messaging Integration for Cordova Hybrid Apps |
Firebase Cloud Messaging Integration for Cordova Hybrid Apps
هذه خطوة أساسية إلى الأمام مباشرة من خلال كيفية تنفيذ إشعار الدفع في Android وكذلك iOS باستخدام المكوّن الإضافي cordova لـ fcm و Google Firebase FCM من البداية. سأستخدم Ubuntu 16.04 LTS لهذا ، ولكن نظام التشغيل المستخدم في التطوير لا ينبغي أن يكون له أهمية كبيرة.
دمج FCM لتطبيقات كوردوفا الهجينة
تنفيذ Android
قم بإنشاء مجلد فارغ pushSample
cd '/opt/lampp/htdocs' mkdir pushSample cd pushSample cordova create pushSample cd pushSample cordova platform add android cordova plugin add cordova-plugin-FCM
أثناء إضافة المكوّن الإضافي Cordova FCM ، سيظهر خطأ:
Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.
ملاحظة: يرجع ذلك إلى أننا لم نضف ملف google-services.json الذي يجب إنشاؤه في الخطوات التالية.
بعد ذلك افتح وحدة التحكم في google firebase وأضف مشروعًا (يعني أساسًا إنشاء مشروع جديد)
بمجرد إنشاء المشروع ، انقر على قسم الإشعارات في اللوحة الجانبية اليسرى.
انقر الآن على رمز Android لإضافة دعم نظام Android إلى مشروعنا.
في النموذج المنبثق التالي ، املأ التفاصيل كما يلي: اسم حزمة Android: اسم الحزمة أو معرفها هو المعرف الفريد لأحد التطبيقات في متجر Play. لاحظ أنها قيمة مهمة جدًا لا يمكن تغييرها لأحد التطبيقات بمجرد تحميلها إلى متجر Play. سيكون في بناء جملة اسم النطاق العكسي: على سبيل المثال ، سيكون لدى hello.pushSample.com معرف التطبيق: com.pushSample.hello. أيضا في ملف config.xml في مشروع كوردوفا الخاص بك تعيين معرف التطبيق نفسه. لمشروع العينة لدينا سيكون في: pushSample / pushSample / config.xml على سبيل المثال بالنسبة لي محتويات هذا الملف هي:
<?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>
لاحظ العلامة
<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">
هنا هوية السمة هو معرف حزمة والتي سوف يكون افتراضيا io.cordova.hellocordova تغييره إلى معرف التطبيق الذي قمت بتحديده في وحدة تحكم firebase. سوف أستخدم com.pushSample.hello
الحقل التالي المراد ملؤه في النافذة المنبثقة لوحدة التحكم في firebase هو:
لقب التطبيق (اختياري): يمكن أن يكون هذا هو نفس اسم التطبيق الذي يتم عرضه في قائمة التطبيق ، ويمكن أيضًا تغيير هذا في config.xml ، بشكل افتراضي سيكون HelloCordova ، سأقوم بتحديثه إلى PushSample
شهادة توقيع Debug SHA-1 (اختياري): هذا اختياري ، يرجى تركه فارغًا.
انقر بعد ذلك على تطبيق التسجيل
الخطوة التالية هي تنزيل ملف google services json .
انقر فوق الزر تنزيل google-services.json ، والذي يجب أن يقوم بتنزيل الملف على جهاز الكمبيوتر الخاص بك.
بمجرد حصولك على الملف ، الصقه في المجلد الجذر لمشروع Cordova الخاص بك ، في حالتي:
/opt/lampp/htdocs/pushSample/pushSample
المقبل بناء المشروع
cordova build android
بعد إضافة ملف google-services.json ، يجب أن يتم إنشاؤه بنجاح.
بعد ذلك ، يتعين علينا كتابة رمز جانب العميل للتعامل مع إشعارات الدفع:
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)); // } }); });
يقوم الرمز أولاً باستدعاء الدالة getToken للحصول على رمز FCM المميز من firebase ، ثم في معاودة الاتصال يقوم بتسجيل رد اتصال آخر على Notification لمعالجة ما يحدث عند تلقي إعلام الدفع.
تحتوي الدالة onNotification على قيمة بيانات تحتوي على بيانات الإشعار. data.wasTapped يشير إلى ما إذا كان يتم إرسال الإشعار عندما يكون التطبيق في المقدمة أو الخلفية ، بحيث يمكننا تحديد منطق منفصل لكل حالة. الآن لإطلاق نموذج إخطار الدفع ، انقر على قسم الإشعارات في اللوحة الجانبية اليسرى ، يجب أن يعرض عليك الآن ملحن إخطار Firebase ، ويعرض قائمة بالإعلامات السابقة المرسلة.
في حال لم ترسل أي إشعارات دفع بعد. سترى زر إرسال إشعارك الأول .
ملاحظة: سيبدو ملحن الإشعار بالشكل التالي:
ملاحظة أثناء إرسال إعلام الدفع باستخدام وحدة التحكم في firebase ، يجب تحديد اسم التطبيق com.pushSample.hello في حالتي.
لإرسال بيانات مخصصة للتطبيق المخصص ، حدد خيارات التقدم -> أزواج القيم الرئيسية.
سيظهر كائن البيانات في رد الاتصال onNotification على النحو التالي
{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}
لاحظ أيضًا أنه عند إرسال إشعارات الدفع باستخدام واجهات برمجة تطبيقات REST من خادم تطبيقاتك بدلاً من ملحن إخطار Firebase ، يجب عليك استخدام البنية التالية:
//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 (ie: com.myapp.test)
ملاحظة: " إجراء النقر ": يُعد حقل "FCM PLUGIN_ACTIVITY" مهمًا جدًا لأن عدم الإشارة إليه لن يؤدي إلى تنفيذ معاودة onNotification في وضع المقدمة.
تطبيق iOS
بالنسبة إلى تطبيق iOS ، سنحتاج إلى إنشاء الأشياء التالية في صفحة مطور Apple. أنا أستخدم XCODE 8.3
معرف التطبيق: com.example.app مفتاح مصادقة إخطار الدفع من Apple (مفتاح مصادقة APN) تم توفير ملف تخصيص التزويد مع إعلامات الدفع. شهادات APNs
كما تعد مستندات Firebase لإشعارات الدفع نقطة بداية ممتازة في العمق.
ملاحظة: لا يمكنك تشغيل إشعارات الدفع في المحاكي ، ستحتاج إلى جهاز فعلي.
هيا نبدأ.
أولاً ، سجّل الدخول إلى وحدة تحكم مطور البرامج ، وحدد مشروعًا حاليًا أو أنشئ مشروعًا جديدًا ، وسنستخدم نفس مشروع pushSample. في نظرة عامة على المشروع ، أضف تطبيقًا آخر باستخدام نظام التشغيل iOS كنظام أساسي. في النافذة المنبثقة التي تظهر ، أدخل التفاصيل التالية:
- الخطوة 1 معرِّف الحزمة: هذا هو المعرِّف الفريد الذي يتم استخدامه لتحديد تطبيق في متجر apple ، يجب أن يكون هذا هو نفس معرف الحزمة الذي ستحدده في ملف config.xml لملف Cordova أو قسم Bundle Id في xCode. سنستخدم com.pushSample.hello اسم التطبيق : هذا هو اسم معرف معرف الخيار ، سنستخدم نفس الاسم الذي سيتم عرضه في قائمة تطبيق iOS وهو PushSample. رقم تعريف متجر التطبيقات : اترك هذا فارغًا.
بمجرد النقر على تطبيق السجل ، تظهر خطوة تطبيق iOS 2.
- الخطوة 2 انقر هنا على زر تنزيل Googleservice-info.plist لتنزيل الملف الذي سنستخدمه في الخطوات التالية.
الخطوة 3 والخطوة 4 يمكننا التخطي حيث سيتم التعامل مع هذه داخليا بواسطة البرنامج المساعد Cordova FCM.
بمجرد إضافة تطبيق iOS إلى مشروعك ، انقر فوق رمز الترس إلى جانب الملصقة العامة في اللوحة الجانبية اليسرى وحدد إعدادات المشروع. (راجع الصورة أدناه.). يجب أن يتم فتح علامة التبويب "عام" الخاصة بإعدادات المشروع بشكل افتراضي.
انقر بعد ذلك على تطبيق iOS الخاص بك في تطبيقاتك -> تطبيقات iOS. في تفاصيل تطبيق iOS ، قم بتحديث بادئة معرف التطبيق ، وهي القيمة التي ستحصل عليها في مركز أعضاء Apple ضمن علامة التبويب العضوية.
انتقل الآن إلى علامة التبويب Cloud Messaging -> قسم تهيئة تطبيق iOS.
هنا ، كما ناقشنا سابقًا ، قم بتحميل مفتاح APNs Auth الذي أنشأته في مركز عضو Apple. بعد ذلك نقوم بإعداد تطبيق جانب العميل. إنشاء مجلد جديد sampleApp في مجلد التطوير الخاص بك ، بالنسبة لي هو
/Volumes/Development/
لذلك سيكون المجلد الجديد
/Volumes/Development/pushSample cd /Volumes/Development/pushSample
إنشاء مشروع جديد Cordova ، ملاحظة: استخدم sudo إذا لزم الأمر
cordova create pushSample cd pushSample
أضف الآن أحدث نظام iOS
sudo cordova platform add ios
الآن قم بلصق ملف Googleservice-info.plist الذي تم تنزيله مسبقًا في المجلد الجذر لمشروع Cordova ، وهو كذلك
/Volumes/Development/pushSample/pushSample
إضافة البرنامج المساعد Cordova FCM.
cordova plugin add cordova-plugin-fcm
حدِّث معرف التطبيق الافتراضي واسم التطبيق بمعرف الحزمة الذي قررناه سابقًا أثناء تهيئة وحدة التحكم في Firebase واسم التطبيق.
<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>
في هذه المرحلة ، سيحتوي نموذج التعليمة البرمجية على ملف app.js ، والذي يمكنك تعديله وإضافة وظائف getToken و onNotification مثل android. شفرة javascript هي نفسها لكلا المنصتين.
التالي تشغيل الأمر بناء cordova
sudo cordova build ios
بمجرد نجاح أمر بناء cordova ، افتح التطبيق في xcode. للقيام بذلك ، افتح الملف xcode.proj الذي سيكون موجودًا في
your_cordova_project/platforms/ios/app_name.xcodeproj
بالنسبة لي هو
/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj
التالي تمكين إعلامات الدفع في علامة التبويب قدرات المشروع.
قم بتوصيل جهاز فعلي وتشغيل التطبيق.
الآن إطلاق إشعار الدفع من الملحن الإخطار firebase وكل شيء يجب أن تعمل ... 