استخدام عامل الخدمات لإدارة الإشعارات

Kate Jeffreys

في هذا الدرس التطبيقي حول الترميز، ستستخدم عامل خدمة لإدارة الإشعارات. تفترض التعليمات الواردة هنا أنّك على دراية بخدمات العاملين الأساسية وبأساسيات طلب إذن عرض الإشعارات وإرسالها. إذا كنت بحاجة إلى تذكير بشأن الإشعارات، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز البدء في استخدام Notifications API. لمزيد من المعلومات حول مشغّلات الخدمات، يمكنك الاطّلاع على مقدمة حول مشغّلات الخدمات التي أعدّها Matt Gaunt.

التعرّف على التطبيق النموذجي ورمز البدء

ابدأ بالاطّلاع على التطبيق المباشر في علامة تبويب Chrome الجديدة:

1. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".

2. انقر على علامة التبويب وحدة التحكم.

3. تأكَّد من تحديد الخيار المعلومات في القائمة المنسدلة المستويات بجانب مربّع الفلتر.

4. في وحدة تحكّم "أدوات مطوّري البرامج" لتطبيقك المباشر، من المفترض أن تظهر لك رسالة وحدة تحكّم:

   TODO: Implement getRegistration().

   هذه رسالة من رمز أولي للدالة ستنفّذه في هذا الدرس العملي.

لنلقِ الآن نظرة على الرمز البرمجي للتطبيق النموذجي.

1. اطّلِع على public/index.js:

   • هناك أربعة رموز أساسية للدوال التي ستنفّذها: registerServiceWorker وgetRegistration وunRegisterServiceWorker وsendNotification.

   • تطلب الدالة requestPermission من المستخدم منح الإذن بإرسال الإشعارات. إذا كنت قد نفّذت التدريب العملي حول واجهة برمجة التطبيقات Notifications API، ستلاحظ أنّه يتم استخدام الدالة requestPermission هنا. والفرق الوحيد هو أنّه يتم الآن أيضًا تعديل واجهة المستخدم بعد حلّ طلب الإذن.

   • تعمل الدالة updateUI على إعادة تحميل جميع أزرار التطبيق ورسائله.

   • تنفّذ الدالة initializePage عملية رصد الميزات المتوافقة مع مشغّل الخدمات في المتصفّح وتعدّل واجهة مستخدم التطبيق.

   • ينتظر النص البرمجي إلى أن يتم تحميل الصفحة ثم يبدأ في إعدادها.

2. فتح "public/service-worker.js"

   وكما يشير الاسم، عليك إضافة رمز إلى التطبيق لتسجيل هذا الملف كـ عامل خدمة.

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

   ستضيف رمزًا إلى public/service-worker.js للتعامل مع الإشعارات عندما يتلقّاها عامل الخدمة.

تسجيل مشغّل الخدمات

في هذه الخطوة، ستكتب رمزًا برمجيًا يتم تنفيذه عندما ينقر المستخدم على تسجيل عامل الخدمة في واجهة مستخدم التطبيق. سيسجّل هذا الرمز public/service-worker.js كبرنامج لتنفيذ الخدمات في الخلفية.

1. فتح "public/index.js" استبدِل الدالة registerServiceWorker بالرمز التالي:

   // Use the Service Worker API to register a service worker.
   async function registerServiceWorker() {
     await navigator.serviceWorker.register('./service-worker.js')
     updateUI();
   }
   

   يُرجى العِلم أنّ registerServiceWorker تستخدم تعريف async function لتسهيل التعامل مع الوعود. يتيح لك ذلك await القيمة التي تمّت تسويتها Promise. على سبيل المثال، تنتظر الدالة أعلاه نتيجة تسجيل مشغّل خدمة قبل تعديل واجهة المستخدم. راجِع await على MDN لمزيد من المعلومات.

2. بعد أن يتمكّن المستخدم من تسجيل عامل خدمة، يمكنك الحصول على مرجع إلى عنصر تسجيل عامل الخدمة. في public/index.js، استبدِل الدالة getRegistration بالرمز التالي:

   // Get the current service worker registration.
   function getRegistration() {
     return navigator.serviceWorker.getRegistration();
   }
   

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

• لإكمال وظيفة تسجيل مشغّل الخدمات، أضِف رمزًا لإلغاء تسجيل مشغّل الخدمات. استبدِل الدالة unRegisterServiceWorker بالرمز التالي:

  // Unregister a service worker, then update the UI.
  async function unRegisterServiceWorker() {
    // Get a reference to the service worker registration.
    let registration = await getRegistration();
    // Await the outcome of the unregistration attempt
    // so that the UI update is not superceded by a
    // returning Promise.
    await registration.unregister();
    updateUI();
  }
  

في علامة التبويب التي تشاهد فيها التطبيق المباشر، أعِد تحميل الصفحة. من المفترض أن يعمل الزرّان تسجيل مشغّل الخدمات وإلغاء تسجيل مشغّل الخدمات الآن.

إرسال إشعارات إلى عامل الخدمة

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

افتح public/index.js واستبدِل الدالة sendNotification بالتعليمة البرمجية التالية:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

في ما يلي ما تفعله هذه التعليمة البرمجية:

• ‫sendNotification هي دالة غير متزامنة، لذا يمكنك استخدام await للحصول على مرجع لتسجيل عامل الخدمة.

• ترسل طريقة postMessage في عامل الخدمة البيانات من التطبيق إلى عامل الخدمة. لمزيد من المعلومات، راجِع مستندات MDN حول postMessage.

• يتحقّق الرمز من توفّر السمة navigator.serviceWorker.controller قبل محاولة الوصول إلى الدالة postMessage. ستكون قيمة navigator.serviceWorker.controller هي null إذا لم يكن هناك مشغّل خدمات نشط، أو إذا تمت إعادة تحميل الصفحة بالقوة (Shift+إعادة التحميل). يمكنك الاطّلاع على مستندات وحدة التحكّم ServiceWorker على MDN للحصول على مزيد من المعلومات.

التعامل مع الإشعارات في عامل الخدمة

في هذه الخطوة، ستكتب رمزًا في عامل الخدمة يعالج الرسائل التي يتم نشرها إليه ويعرض الإشعارات للمستخدم.

فتح "public/service-worker.js" أضِف الرمز التالي إلى نهاية الملف:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

في ما يلي شرح سريع:

• ‫self هو مرجع إلى عامل الخدمة نفسه.

• على الرغم من أنّ عامل الخدمة يتعامل الآن مع عرض الإشعارات، تظل واجهة المستخدم الرئيسية للتطبيق مسؤولة عن الحصول على إذن الإشعارات من المستخدم. إذا لم يتم منح الإذن، سيتم رفض الوعد الذي تم إرجاعه من خلال showNotification. يستخدم الرمز أعلاه الحظر catch لتجنُّب خطأ رفض Promise غير معالَج والتعامل مع هذا الخطأ بشكل أفضل قليلاً.

انتقِل إلى الدرس العملي التالي في هذه السلسلة: إنشاء خادم للإشعارات الفورية.