إضافة إشعارات دفع إلى تطبيق Apache Cordova

مقالة
06/25/2019

نظرة عامة

في هذا البرنامج التعليمي، يمكنك إضافة إشعارات دفع إلى مشروع التشغيل السريع Apache Cordova بحيث يتم إرسال إشعار دفع إلى الجهاز في كل مرة يتم فيها إدراج سجل.

إذا لم تستخدم مشروع خادم التشغيل السريع الذي تم تنزيله، فستحتاج إلى حزمة ملحق الإعلامات المؤقتة. لمزيد من المعلومات، راجع العمل مع SDK الخادم الخلفي ل .NET لتطبيقات الأجهزة المحمولة.

المتطلبات الأساسية

يفترض هذا البرنامج التعليمي أن لديك تطبيق Apache Cordova الذي تم تطويره مع Visual Studio 2015. يجب تشغيل هذا الجهاز على Google Android Emulator أو جهاز Android أو جهاز Windows أو جهاز iOS.

لإكمال هذا البرنامج التعليمي، تحتاج إلى:

كمبيوتر شخصي مع مجتمع Visual Studio 2015 أو أحدث
أدوات Visual Studio ل Apache Cordova
حساب Azure نشط
مشروع التشغيل السريع ل Apache Cordova المكتمل
(Android) حساب Google بعنوان بريد إلكتروني تم التحقق منه
(iOS) عضوية برنامج مطور Apple وجهاز iOS (لا يدعم محاكي iOS الإعلامات المؤقتة)
(Windows) حساب مطور Microsoft Store وجهاز Windows 10

تكوين مركز إعلامات

تستخدم ميزة تطبيقات الأجهزة المحمولة في Azure App Service Azure Notification Hubs لإرسال الدفعات، لذلك ستقوم بتكوين مركز إعلام لتطبيق الأجهزة المحمولة.

في مدخل Microsoft Azure، انتقل إلى App Services، ثم حدد النهاية الخلفية للتطبيق. ضمن الإعدادات، حدد Push.
لإضافة مورد مركز إعلام إلى التطبيق، حدد الاتصال. يمكنك إما إنشاء مركز أو الاتصال بمركز موجود.

لقد قمت الآن بتوصيل مركز إعلام بمشروع الخلفية لتطبيقات الأجهزة المحمولة. يمكنك لاحقا تكوين مركز الإعلامات هذا للاتصال بنظام إعلام النظام الأساسي (PNS) للدفع إلى الأجهزة.

شاهد مقطع فيديو يعرض الخطوات الواردة في هذا القسم.

تحديث مشروع الخادم

في هذا القسم، يمكنك تحديث التعليمات البرمجية في مشروع الواجهة الخلفية ل Mobile Apps الحالي لإرسال إعلام دفع في كل مرة تتم فيها إضافة عنصر جديد. يتم تشغيل هذه العملية بواسطة ميزة القالب لمراكز إعلامات Azure، والتي تمكن الدفعات عبر الأنظمة الأساسية. يتم تسجيل العملاء المتنوعين للإشعارات المؤقتة باستخدام القوالب، ويمكن أن تصل دفعة عالمية واحدة إلى جميع الأنظمة الأساسية للعميل.

اختر أحد الإجراءات التالية التي تطابق نوع المشروع الخلفي — إما النهاية الخلفية ل .NET أو Node.js الخلفية.

مشروع .NET الخلفي

في Visual Studio، انقر بزر الماوس الأيمن فوق مشروع الخادم. ثم حدد إدارة حزم NuGet. ابحث Microsoft.Azure.NotificationHubsعن ، ثم حدد تثبيت. تثبت هذه العملية مكتبة مراكز الإعلامات لإرسال الإعلامات من النهاية الخلفية.
في مشروع الخادم، افتح Controllers>TodoItemController.cs. ثم أضف عبارات الاستخدام التالية:
```
using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;
```

في أسلوب PostTodoItem ، أضف التعليمات البرمجية التالية بعد استدعاء InsertAsync:

// Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the mobile app.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create a new Notification Hub client.
NotificationHubClient hub = NotificationHubClient
.CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Send the message so that all template registrations that contain "messageParam"
// receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
Dictionary<string,string> templateParams = new Dictionary<string,string>();
templateParams["messageParam"] = item.Text + " was added to the list.";

try
{
    // Send the push notification and log the results.
    var result = await hub.SendTemplateNotificationAsync(templateParams);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

ترسل هذه العملية إعلام قالب يحتوي على العنصر. نص عند إدراج عنصر جديد.

إعادة نشر مشروع الخادم.

Node.js مشروع خلفي

إعداد مشروع الواجهة الخلفية.

استبدل التعليمات البرمجية الموجودة في todoitem.js بالتعليمات البرمجية التالية:

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs.
logger.info('Running TodoItem.insert');

// Define the template payload.
var payload = '{"messageParam": "' + context.item.text + '" }';  

// Execute the insert. The insert returns the results as a promise.
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured.
        if (context.push) {
            // Send a template notification.
            context.push.send(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute().
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

ترسل هذه العملية إعلام قالب يحتوي على item.text عند إدراج عنصر جديد.

عند تحرير الملف على الكمبيوتر المحلي، أعد نشر مشروع الخادم.

تعديل تطبيق Cordova

للتأكد من أن مشروع تطبيق Apache Cordova الخاص بك جاهز للتعامل مع الإعلامات المؤقتة، قم بتثبيت المكون الإضافي للدفع Cordova بالإضافة إلى أي خدمات دفع خاصة بالنظام الأساسي.

تحديث إصدار Cordova في مشروعك.

إذا كان مشروعك يستخدم إصدارا من Apache Cordova أقدم من الإصدار 6.1.1، فقم بتحديث مشروع العميل. لتحديث المشروع، اتبع الخطوات التالية:

لفتح مصمم التكوين، انقر بزر الماوس الأيمن فوق config.xml.
حدد علامة التبويب Platforms .
في مربع النص Cordova CLI ، حدد 6.1.1.
لتحديث المشروع، حدد Build، ثم حدد Build Solution.

تثبيت المكون الإضافي للدفع

لا تتعامل تطبيقات Apache Cordova مع قدرات الجهاز أو الشبكة في الأصل. يتم توفير هذه الإمكانات من خلال المكونات الإضافية التي يتم نشرها إما على npm أو على GitHub. يعالج phonegap-plugin-push المكون الإضافي إعلامات دفع الشبكة.

يمكنك تثبيت المكون الإضافي للدفع بإحدى الطرق التالية:

من موجه الأوامر:

شغِّل الأمر التالي:

cordova plugin add phonegap-plugin-push

من داخل Visual Studio:

في مستكشف الحلول، فتح ملف config.xml. بعد ذلك، حدد المكونات> الإضافيةالمخصصة. ثم حدد Git كمصدر التثبيت.
أدخل https://github.com/phonegap/phonegap-plugin-push كمصدر.
حدد السهم الموجود بجانب مصدر التثبيت.
في SENDER_ID، إذا كان لديك بالفعل معرف مشروع رقمي لمشروع Google Developer Console، يمكنك إضافته هنا. وإلا، أدخل قيمة عنصر نائب، مثل 777777. إذا كنت تستهدف Android، يمكنك تحديث هذه القيمة في ملف config.xml لاحقا.

ملاحظة

اعتبارا من الإصدار 2.0.0، يجب تثبيت google-services.json في المجلد الجذر لمشروعك لتكوين معرف المرسل. لمزيد من المعلومات، راجع وثائق التثبيت.
حدد ⁧⁩إضافة⁧⁩.

تم الآن تثبيت المكون الإضافي للدفع.

تثبيت المكون الإضافي للجهاز

اتبع نفس الإجراء الذي استخدمته لتثبيت المكون الإضافي للدفع. أضف المكون الإضافي للجهاز من قائمة المكونات الإضافية الأساسية. (للعثور عليه، حدد المكونات> الإضافية Core.) تحتاج إلى هذا المكون الإضافي للحصول على اسم النظام الأساسي.

تسجيل جهازك عند بدء تشغيل التطبيق

في البداية، نقوم بتضمين بعض التعليمات البرمجية الدنيا لنظام Android. يمكنك لاحقا تعديل التطبيق لتشغيله على نظام التشغيل iOS أو Windows 10.

أضف مكالمة إلى registerForPushNotifications أثناء رد الاتصال لعملية تسجيل الدخول. بدلا من ذلك، يمكنك إضافته في أسفل أسلوب onDeviceReady :

// Log in to the service.
client.login('google')
    .then(function () {
        // Create a table reference.
        todoItemTable = client.getTable('todoitem');

        // Refresh the todoItems.
        refreshDisplay();

        // Wire up the UI Event Handler for the Add Item.
        $('#add-item').submit(addItemHandler);
        $('#refresh').on('click', refreshDisplay);

            // Added to register for push notifications.
        registerForPushNotifications();

    }, handleError);

يوضح هذا المثال استدعاء registerForPushNotifications بعد نجاح المصادقة. يمكنك الاتصال registerForPushNotifications() بقدر ما هو مطلوب.

أضف أسلوب registerForPushNotifications الجديد كما يلي:

// Register for push notifications. Requires that phonegap-plugin-push be installed.
var pushRegistration = null;
function registerForPushNotifications() {
    pushRegistration = PushNotification.init({
        android: { senderID: 'Your_Project_ID' },
        ios: { alert: 'true', badge: 'true', sound: 'true' },
        wns: {}
    });

// Handle the registration event.
pushRegistration.on('registration', function (data) {
    // Get the native platform of the device.
    var platform = device.platform;
    // Get the handle returned during registration.
    var handle = data.registrationId;
    // Set the device-specific message template.
    if (platform == 'android' || platform == 'Android') {
        // Register for GCM notifications.
        client.push.register('gcm', handle, {
            mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'iOS') {
        // Register for notifications.
        client.push.register('apns', handle, {
            mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'windows') {
        // Register for WNS notifications.
        client.push.register('wns', handle, {
            myTemplate: {
                body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                headers: { 'X-WNS-Type': 'wns/toast' } }
        });
    }
});

pushRegistration.on('notification', function (data, d2) {
    alert('Push Received: ' + data.message);
});

pushRegistration.on('error', handleError);
}

(Android) في التعليمات البرمجية السابقة، استبدل Your_Project_ID بمعرف المشروع الرقمي لتطبيقك من وحدة تحكم مطور Google.

(اختياري) تكوين التطبيق وتشغيله على Android

أكمل هذا القسم لتمكين الإعلامات المؤقتة لنظام التشغيل Android.

تمكين Firebase Cloud Messaging

نظرا لأنك تستهدف النظام الأساسي ل Google Android في البداية، يجب عليك تمكين Firebase Cloud Messaging.

تسجيل الدخول إلىوحدة تحكم Firebase. إنشاء مشروع Firebase جديد إذا لم يكن لديك بالفعل واحد.
بعد إنشاء المشروع حدد إضافة Firebase إلى تطبيق Android.
في صفحة إضافة مشروع Firebase إلى تطبيق Android، اتخذ الخطوات التالية:
1. للحصول على اسم حزمة الروبوت، نسخ قيمة التطبيق الخاص بك في ملف build.gradle التطبيق الخاص بك. في هذا المثال، هو com.fabrikam.fcmtutorial1app.
2. حدد Register app.
حدد تنزيل google-services.json⁦، ثم احفظ الملف في مجلد التطبيق الخاص بالمشروع، ثم حدد التالي.
قم بإجراء تغييرات التكوين التالية على مشروعك في Android Studio.
1. في ملف build.gradle مستوى المشروع < (مشروع > /build.gradle)، إضافة العبارة التالية إلى قسم التبعيات.
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. في ملف build.gradle على مستوى التطبيق (<project>/<app-module>/build.gradle)، أضف العبارات التالية إلى قسم التبعيات .
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. إضافة السطر التالي إلى نهاية الملف build.gradle مستوى التطبيق بعد قسم التبعيات.
```
apply plugin: 'com.google.gms.google-services'
```
4. حدد أيقونة المزامنة الآن في شريط الأدوات.
حدد "Next".
حدد تخطي هذه الخطوة.
في وحدة تحكم Firebase حدد ترس للمشروع الخاص بك. ثم حدد إعدادات المشروع.
إذا لم تكن قد قمت بتنزيل الملف google-services.json إلى مجلد التطبيق لمشروع Android Studio، يمكنك القيام بذلك على هذه الصفحة.
انتقل إلى علامة التبويب Cloud Messaging في الأعلى.
انسخكلمة مرور الخادم واحفظه للاستخدام لاحقًا. يمكنك استخدام هذه القيمة لتكوين لوحة الوصل الخاصة بك.

تكوين الواجهة الخلفية لتطبيق الأجهزة المحمولة لإرسال طلبات الدفع باستخدام FCM

في مدخل Microsoft Azure، حدد Browse All>App Services. ثم حدد النهاية الخلفية لتطبيقات الأجهزة المحمولة.
ضمن الإعدادات، حدد Push. ثم حدد Configure push notification services.
انتقل إلى Google (GCM). أدخل مفتاح الخادم القديم FCM الذي حصلت عليه من وحدة تحكم Firebase، ثم حدد حفظ.

تم تكوين خدمتك الآن للعمل مع Firebase Cloud Messaging.

تكوين تطبيق Cordova لنظام التشغيل Android

في تطبيق Cordova، افتح config.xml. ثم استبدل Your_Project_ID بمعرف المشروع الرقمي لتطبيقك من وحدة تحكم مطور Google.

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

افتح ⁧⁩⁩index.js⁧⁩. ثم قم بتحديث التعليمات البرمجية لاستخدام معرف المشروع الرقمي.

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

تكوين جهاز Android لتصحيح أخطاء USB

قبل أن تتمكن من نشر تطبيقك على جهاز Android الخاص بك، تحتاج إلى تمكين تصحيح أخطاء USB. اتبع الخطوات التالية على هاتف Android:

انتقل إلى هاتف الإعدادات>About. ثم اضغط على رقم الإنشاء حتى يتم تمكين وضع المطور (حوالي سبع مرات).
مرة أخرى في الإعدادات>خيارات المطور، قم بتمكين تصحيح أخطاء USB. ثم قم بتوصيل هاتف Android بجهاز الكمبيوتر الخاص بالتطوير باستخدام كبل USB.

لقد اختبرنا هذا باستخدام جهاز Google Nexus 5X يعمل بنظام Android 6.0 (Marshmallow). ومع ذلك، فإن التقنيات شائعة عبر أي إصدار Android حديث.

تثبيت خدمات Google Play

يعتمد المكون الإضافي للدفع على Android Google Play Services للإشعارات المنبثقة.

في Visual Studio، حدد Tools>Android>Android SDK Manager. ثم قم بتوسيع مجلد الإضافات . حدد المربعات المناسبة للتأكد من تثبيت كل مجموعة SDK التالية:
- Android 2.3 أو أعلى
- مراجعة مستودع Google 27 أو أعلى
- Google Play Services 9.0.2 أو أعلى
حدد تثبيت الحزم. ثم انتظر حتى ينتهي التثبيت.

يتم سرد المكتبات المطلوبة الحالية في وثائق تثبيت phonegap-plugin-push.

اختبار الإعلامات المنبثقة في التطبيق على Android

يمكنك الآن اختبار الإعلامات المؤقتة عن طريق تشغيل التطبيق وإدراج العناصر في جدول TodoItem. يمكنك الاختبار من نفس الجهاز أو من جهاز ثان، طالما أنك تستخدم نفس الواجهة الخلفية. اختبر تطبيق Cordova على النظام الأساسي لنظام Android بإحدى الطرق التالية:

على جهاز فعلي: قم بإرفاق جهاز Android بكمبيوتر التطوير الخاص بك باستخدام كبل USB. بدلا من Google Android Emulator، حدد Device. يقوم Visual Studio بنشر التطبيق على الجهاز وتشغيل التطبيق. يمكنك بعد ذلك التفاعل مع التطبيق على الجهاز.

يمكن أن تساعدك تطبيقات مشاركة الشاشة مثل Mobizen في تطوير تطبيقات Android. يعرض Mobizen شاشة Android إلى مستعرض ويب على جهاز الكمبيوتر الخاص بك.
على محاكي Android: هناك خطوات تكوين إضافية مطلوبة عند استخدام محاكي.

تأكد من النشر على جهاز ظاهري تم تعيين واجهات برمجة تطبيقات Google كهدف، كما هو موضح في مدير جهاز Android الظاهري (AVD).

إذا كنت تريد استخدام محاكي x86 أسرع، فقم بتثبيت برنامج تشغيل HAXM، ثم قم بتكوين المحاكي لاستخدامه.

أضف حساب Google إلى جهاز Android عن طريق تحديد Apps>الإعدادات>إضافة حساب. ثم اتبع المطالبات.

تشغيل تطبيق todolist كما كان من قبل وإدراج عنصر todo جديد. هذه المرة، يتم عرض أيقونة إعلام في منطقة الإعلام. يمكنك فتح درج الإعلام لعرض النص الكامل للإعلام.

(اختياري) تكوين وتشغيل على iOS

هذا القسم لتشغيل مشروع Cordova على أجهزة iOS. إذا كنت لا تعمل مع أجهزة iOS، فيمكنك تخطي هذا القسم.

تثبيت وتشغيل عامل الإنشاء عن بعد لنظام التشغيل iOS على جهاز Mac أو خدمة سحابية

قبل أن تتمكن من تشغيل تطبيق Cordova على نظام التشغيل iOS باستخدام Visual Studio، انتقل إلى الخطوات الواردة في دليل إعداد iOS لتثبيت عامل الإنشاء البعيد وتشغيله.

تأكد من أنه يمكنك إنشاء التطبيق لنظام التشغيل iOS. الخطوات الواردة في دليل الإعداد مطلوبة لإنشاء التطبيق لنظام التشغيل iOS من Visual Studio. إذا لم يكن لديك جهاز Mac، يمكنك إنشاء لنظام التشغيل iOS باستخدام عامل الإنشاء عن بعد على خدمة مثل MacInCloud. لمزيد من المعلومات، راجع تشغيل تطبيق iOS في السحابة.

ملاحظة

مطلوب Xcode 7 أو أحدث لاستخدام المكون الإضافي للدفع على iOS.

البحث عن المعرف المراد استخدامه كمعرف التطبيق

قبل تسجيل تطبيقك للإشعارات المنبثقة، افتح config.xml في تطبيق Cordova، وابحث عن قيمة السمة id في عنصر عنصر واجهة المستخدم، ثم انسخها لاستخدامها لاحقا. في XML التالي، المعرف هو io.cordova.myapp7777777.

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="https://schemas.microsoft.com/appx/2014/htmlapps">

لاحقا، استخدم هذا المعرف عند إنشاء معرف تطبيق على مدخل مطور Apple. إذا قمت بإنشاء معرف تطبيق مختلف على مدخل المطور، فيجب عليك اتخاذ بضع خطوات إضافية لاحقا في هذا البرنامج التعليمي. يجب أن يتطابق المعرف في عنصر عنصر واجهة المستخدم مع معرف التطبيق على مدخل المطور.

تسجيل التطبيق للإشعارات المنبثقة على مدخل مطور Apple

تسجيل معرف تطبيق لتطبيقك. قم بإنشاء معرف تطبيق صريح (وليس معرف تطبيق البدل)، وبالنسبة لمعرف المجموعة، استخدم معرف المجموعة الدقيق الموجود في مشروع التشغيل السريع ل Xcode. من المهم أيضا تحديد خيار الإعلامات المنبثقة .
بعد ذلك، للتحضير لتكوين الإعلامات المنبثقة، قم بإنشاء شهادة SSL "تطوير" أو "توزيع".

شاهد مقطع فيديو يعرض خطوات مماثلة

تكوين Azure لإرسال إعلامات الدفع

على جهاز Mac، قم بتشغيل Keychain Access. على شريط التنقل الأيمن، ضمن الفئة، افتح شهاداتي. ابحث عن شهادة SSL التي قمت بتنزيلها في القسم السابق، ثم قم بالكشف عن محتوياتها. حدد الشهادة فقط (لا تحدد المفتاح الخاص). ثم قم بتصديره.
في مدخل Microsoft Azure، حدد Browse All>App Services. ثم حدد النهاية الخلفية لتطبيقات الأجهزة المحمولة.
ضمن الإعدادات، حدد App Service Push. ثم حدد اسم مركز الإعلامات.
انتقل إلى Apple Push Notification Services>Upload Certificate. Upload ملف .p12، وتحديد الوضع الصحيح (اعتمادا على ما إذا كانت شهادة SSL للعميل من وقت سابق هي الإنتاج أو بيئة الاختبار المعزولة). احفظ أي تغييرات.

تم تكوين خدمتك الآن للعمل مع الإعلامات المنبثقة على iOS.

تحقق من تطابق معرف التطبيق مع تطبيق Cordova

إذا كان معرف التطبيق الذي قمت بإنشائه في حساب مطور Apple يطابق بالفعل معرف عنصر عنصر واجهة المستخدم في ملف config.xml، فيمكنك تخطي هذه الخطوة. ومع ذلك، إذا لم تتطابق المعرفات، فاتبع الخطوات التالية:

احذف مجلد الأنظمة الأساسية من مشروعك.
احذف مجلد المكونات الإضافية من مشروعك.
احذف مجلد node_modules من مشروعك.
قم بتحديث سمة المعرف لعنصر عنصر واجهة المستخدم في ملف config.xml لاستخدام معرف التطبيق الذي قمت بإنشائه في حساب مطور Apple الخاص بك.
أعد إنشاء مشروعك.

اختبار الإعلامات المنبثقة في تطبيق iOS

في Visual Studio، تأكد من تحديد iOS كهدف للتوزيع. ثم حدد الجهاز لتشغيل الإعلامات المنبثقة على جهاز iOS المتصل.

يمكنك تشغيل الإعلامات المؤقتة على جهاز iOS متصل بجهاز الكمبيوتر الخاص بك باستخدام iTunes. لا يدعم iOS Simulator الإعلامات المنبثقة.
حدد الزر Run أو F5 في Visual Studio لإنشاء المشروع وبدء تشغيل التطبيق في جهاز iOS. ثم حدد موافق لقبول الإعلامات المنبثقة.

ملاحظة

يطلب التطبيق تأكيد الإعلامات أثناء التشغيل الأول.
في التطبيق، اكتب مهمة، ثم حدد أيقونة علامة الجمع (+).
تحقق من تلقي إعلام. ثم حدد موافق لتجاهل الإعلام.

(اختياري) تكوين وتشغيل على Windows

يصف هذا القسم كيفية تشغيل مشروع تطبيق Apache Cordova على أجهزة Windows 10 (يتم دعم المكون الإضافي لدفع PhoneGap على Windows 10). إذا كنت لا تعمل مع أجهزة Windows، يمكنك تخطي هذا القسم.

تسجيل تطبيق Windows الخاص بك للإشعارات المؤقتة باستخدام WNS

لاستخدام خيارات المتجر في Visual Studio، حدد هدفا Windows من قائمة الأنظمة الأساسية للحلول، مثل Windows-x64 أو Windows-x86. (تجنب Windows-AnyCPU للإشعارات المنبثقة.)

في Visual Studio مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع تطبيق Windows Store. ثم حدد Store>Associate App مع Store.
في المعالج، حدد التالي. ثم سجل الدخول باستخدام حساب Microsoft الخاص بك. في حجز اسم تطبيق جديد، اكتب اسما لتطبيقك، ثم حدد حجز.
بعد إنشاء تسجيل التطبيق بنجاح، حدد اسم التطبيق الجديد. حدد التالي، ثم حدد إقران. تضيف هذه العملية معلومات تسجيل Windows Store المطلوبة إلى بيان التطبيق.
كرر الخطوين 1 و3 لمشروع تطبيق Windows Phone Store باستخدام نفس التسجيل الذي قمت بإنشائه مسبقا لتطبيق Windows Store.
انتقل إلى Windows مركز التطوير، ثم سجل الدخول باستخدام حساب Microsoft الخاص بك. في تطبيقاتي، حدد تسجيل التطبيق الجديد. ثم قم بتوسيعالإعلامات المنبثقة للخدمات>.
في صفحة Push notifications، ضمن Windows Push Notification Services (WNS) وMicrosoft Azure Mobile Apps، حدد Live Services site. دون قيم Package SID والقيمة الحالية في Application Secret.

هام

يعد كل من سر التطبيق وحزمة SID من بيانات اعتماد الأمان المهمة. لا تشارك هذه القيم مع أي شخص أو وزعها مع تطبيقك.

شاهد مقطع فيديو يعرض خطوات مماثلة

تكوين مركز الإعلامات ل WNS

في مدخل Microsoft Azure، حدد Browse All>App Services. ثم حدد النهاية الخلفية لتطبيقات الأجهزة المحمولة. ضمن الإعدادات، حدد App Service Push. ثم حدد اسم مركز الإعلامات.
انتقل إلى Windows (WNS). ثم أدخل مفتاح الأمان (سر العميل) وحزمة SID التي حصلت عليها من موقع Live Services. بعد ذلك، حدد حفظ.

تم تكوين الواجهة الخلفية الآن لاستخدام WNS لإرسال إعلامات الدفع.

تكوين تطبيق Cordova لدعم الإعلامات المنبثقة Windows

افتح مصمم التكوين بالنقر بزر الماوس الأيمن فوقconfig.xml. ثم حدد View Designer. بعد ذلك، حدد علامة التبويب Windows، ثم حدد Windows 10 ضمن Windows Target Version.

لدعم الإعلامات المؤقتة في الإصدارات الافتراضية (تتبع الأخطاء)، افتح الملف build.json . ثم انسخ تكوين "الإصدار" إلى تكوين تتبع الأخطاء.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

بعد التحديث، يجب أن يحتوي ملف build.json على التعليمات البرمجية التالية:

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

أنشئ التطبيق وتحقق من عدم وجود أخطاء لديك. يجب أن يسجل تطبيق العميل الخاص بك الآن للحصول على الإعلامات من الواجهة الخلفية لتطبيقات الأجهزة المحمولة. كرر هذا القسم لكل مشروع Windows في الحل الخاص بك.

اختبار الإعلامات المنبثقة في تطبيق Windows

في Visual Studio، تأكد من تحديد نظام أساسي Windows كهدف للتوزيع، مثل Windows-x64 أو Windows-x86. لتشغيل التطبيق على جهاز كمبيوتر Windows 10 يستضيف Visual Studio، اختر الجهاز المحلي.

حدد الزر Run لإنشاء المشروع وبدء تشغيل التطبيق.
في التطبيق، اكتب اسما ل todoitem جديد، ثم حدد رمز علامة الجمع (+) لإضافته.

تحقق من تلقي إعلام عند إضافة العنصر.

الخطوات التالية

اقرأ عن مراكز الإعلامات للتعرف على الإعلامات المنبثقة.
إذا لم تكن قد فعلت ذلك بالفعل، فتابع البرنامج التعليمي عن طريق إضافة المصادقة إلى تطبيق Apache Cordova.

تعرف على كيفية استخدام SDKs التالية:

مشاركة عبر

إضافة إشعارات دفع إلى تطبيق Apache Cordova

نظرة عامة

المتطلبات الأساسية

تكوين مركز إعلامات

تحديث مشروع الخادم

مشروع .NET الخلفي

Node.js مشروع خلفي

تعديل تطبيق Cordova

تحديث إصدار Cordova في مشروعك.

تثبيت المكون الإضافي للدفع

تثبيت المكون الإضافي للجهاز

تسجيل جهازك عند بدء تشغيل التطبيق

(اختياري) تكوين التطبيق وتشغيله على Android

تمكين Firebase Cloud Messaging

تكوين الواجهة الخلفية لتطبيق الأجهزة المحمولة لإرسال طلبات الدفع باستخدام FCM

تكوين تطبيق Cordova لنظام التشغيل Android

تكوين جهاز Android لتصحيح أخطاء USB

تثبيت خدمات Google Play

اختبار الإعلامات المنبثقة في التطبيق على Android

(اختياري) تكوين وتشغيل على iOS

تثبيت وتشغيل عامل الإنشاء عن بعد لنظام التشغيل iOS على جهاز Mac أو خدمة سحابية

البحث عن المعرف المراد استخدامه كمعرف التطبيق

تسجيل التطبيق للإشعارات المنبثقة على مدخل مطور Apple

تكوين Azure لإرسال إعلامات الدفع

تحقق من تطابق معرف التطبيق مع تطبيق Cordova

اختبار الإعلامات المنبثقة في تطبيق iOS

(اختياري) تكوين وتشغيل على Windows

تسجيل تطبيق Windows الخاص بك للإشعارات المؤقتة باستخدام WNS

تكوين مركز الإعلامات ل WNS

تكوين تطبيق Cordova لدعم الإعلامات المنبثقة Windows

اختبار الإعلامات المنبثقة في تطبيق Windows

الخطوات التالية

الموارد الإضافية