أحداث الدفع

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

حدث Push

فعند استلام رسالة، سيتم إرسال حدث إرسال إلى مشغّل الخدمات.

ينبغي أن يكون الرمز الخاص بإعداد أداة معالجة أحداث الدفع مشابهًا إلى حد كبير لأي مستمع آخر للفعاليات تكتبه في JavaScript:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

أغرب جزء في هذا الرمز بالنسبة إلى معظم المطورين الجدد في ما يتعلق بعاملي الخدمات هو المتغيّر self. يشيع استخدام self في Web Workers، أي مشغّل الخدمات. يشير self إلى النطاق العام، مثل window في صفحة ويب. أما بالنسبة إلى العاملين على الويب ومشغّلي الخدمات، يشير self إلى العامل نفسه.

في المثال أعلاه، يمكن اعتبار self.addEventListener() إضافة مستمع للحدث إلى عامل الخدمة نفسه.

داخل مثال حدث الإرسال، نتحقق مما إذا كانت هناك أي بيانات ونطبع شيئًا إلى وحدة التحكّم.

هناك طرق أخرى يمكنك من خلالها تحليل البيانات من حدث فوري:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

يستخدم معظم المستخدمين json() أو text() اعتمادًا على ما يتوقّعونه من تطبيقاتهم.

يوضح هذا المثال كيفية إضافة أداة معالجة حدث الدفع وكيفية الوصول إلى البيانات، ولكنه يفتقر إلى قسمين مهمين جدًا من الوظائف. وهو لا يعرض إشعارًا ولا يستخدم "event.waitUntil()".

الانتظار حتى

أحد الأمور التي يجب فهمها بشأن مشغّلي الخدمات هو أنّ لديك القليل من التحكّم في وقت تشغيل رمز مشغّل الخدمات. ويقرر المتصفح وقت تنشيطه ومتى ينهيه. الطريقة الوحيدة التي يمكنك بها أن تطلب من المتصفِّح أن تقول "مرحبًا، أنا مشغول جدًا بأمور مهمة"، وهي أن تنفّذ وعدًا في طريقة event.waitUntil(). بهذه الطريقة، سيحافظ المتصفّح على تشغيل مشغّل الخدمات حتى يستقر الوعد الذي نفّذته.

مع أحداث الدفع، هناك شرط إضافي يجب أن يعرض إشعارًا قبل تسوية الوعد الذي قدّمتَه.

في ما يلي مثال أساسي على عرض إشعار:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

استدعاء self.registration.showNotification() هو الطريقة التي تعرض إشعارًا للمستخدم، وتعرض وعدًا سيتم حله بمجرد عرض الإشعار.

من أجل إبقاء هذا المثال واضحًا قدر الإمكان، تم تعيين هذا الوعد لمتغير يسمى promiseChain. يتم تمرير هذا الرقم بعد ذلك إلى "event.waitUntil()". أعلم أنّ هذه الإجابة مطولة جدًا، لكنني لاحظت عددًا من المشاكل التي انطلقت نتيجة سوء فهم ما يجب تمريره إلى waitUntil() أو نتيجة عدم اكتمال سلاسل الوعود.

قد يبدو المثال الأكثر تعقيدًا مع طلب الشبكة للبيانات وتتبّع حدث الدفع باستخدام الإحصاءات على النحو التالي:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

وهنا نسمي دالة تعرض وعدًا pushReceivedTracking()، وعلى سبيل المثال، يمكننا التظاهر بتقديم طلب شبكة إلى مزود التحليلات لدينا. نجري أيضًا طلب الشبكة، ونحصل على الرد ونعرض إشعارًا باستخدام بيانات الردود لعنوان الإشعار ورسالته.

يمكننا ضمان الحفاظ على مشغّل الخدمات أثناء تنفيذ هاتين المهمتَين من خلال الجمع بين هذه الوعود مع "Promise.all()". يتم تمرير الوعد الناتج إلى event.waitUntil()، ما يعني أنّ المتصفّح سينتظر إلى أن يتم تنفيذ الوعدَين قبل التحقّق من عرض إشعار وإنهاء عمل مشغّل الخدمات.

يرجع السبب في قلقنا بشأن waitUntil() وكيفية استخدامه إلى أنّ إحدى المشاكل الأكثر شيوعًا التي يواجهها المطوّرون هي أنّه عندما تكون سلسلة الوعد غير صحيحة أو معطّلة، سيعرض Chrome هذا الإشعار "التلقائي":

سيعرض Chrome فقط الإشعار "تم تحديث هذا الموقع الإلكتروني في الخلفية". عند تلقّي رسالة فورية ولا يعرض حدث الدفع في مشغّل الخدمات إشعارًا بعد انتهاء الوعد إلى event.waitUntil().

السبب الرئيسي الذي يجعل المطوّرين يُدركون هذا أنّ الرمز البرمجي الخاص بهم غالبًا ما يستدعي الرمز self.registration.showNotification()، ولكنّهم لن يتخذون أي إجراء بالوعد الذي سيعود إليه. يؤدي هذا بشكل متقطع إلى عرض الإشعار الافتراضي. على سبيل المثال، يمكننا إزالة إرجاع self.registration.showNotification() في المثال أعلاه، ونخاطر بظهور هذا الإشعار.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

يمكنك التعرّف على مدى سهولة تفويتها.

تذكير: إذا ظهر لك هذا الإشعار، تحقَّق من سلاسل الوعود و"event.waitUntil()".

في القسم التالي، سنلقي نظرة على ما يمكننا فعله بشأن نمط الإشعارات والمحتوى الذي يمكننا عرضه.

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

• نظرة عامة على الإشعارات الفورية على الويب
• طريقة عمل ميزة Push
• الاشتراك لمستخدم
• تجربة المستخدم للأذونات
• إرسال الرسائل باستخدام مكتبات Web Push
• بروتوكول إرسال البيانات على الويب
• التعامل مع أحداث الدفع
• عرض إشعار
• سلوك الإشعارات
• أنماط الإشعارات الشائعة
• الأسئلة الشائعة حول الإشعارات الفورية
• المشاكل الشائعة وأخطاء إعداد التقارير

الدروس التطبيقية حول الترميز

• إنشاء عميل للإشعارات الفورية
• إنشاء خادم إشعارات فورية