أحداث الدفع

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

حدث الدفع

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

يجب أن يكون رمز إعداد أداة معالجة حدث الدفع مشابهًا إلى حد كبير لأي حدث آخر. مستمع قد تكتبه باستخدام 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

لن يعرض 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().

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

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

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