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

Kate Jeffreys

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخطأ في علامة تبويب ثانية في علامة تبويب ثانية.

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

إنشاء ريمكس من نموذج التطبيق وعرضه في علامة تبويب جديدة

يتم حظر الإشعارات تلقائيًا من تطبيق Glitch المضمن، لذا لن تتمكن من معاينة التطبيق على هذه الصفحة. إليك ما يجب فعله بدلاً من ذلك:

1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
2. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة

من المفترض أن يتم فتح الخطأ في علامة تبويب جديدة في Chrome.

أثناء العمل على هذا الدرس التطبيقي حول الترميز، عليك إجراء تغييرات على الرمز البرمجي الوارد في أداة Glitch المضمَّنة في هذه الصفحة. يُرجى إعادة تحميل علامة التبويب الجديدة باستخدام التطبيق المباشر للاطّلاع على التغييرات.

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

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

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

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

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

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

   TODO: Implement getRegistration().

   هذه رسالة من كعب دالة ستنفذه في هذا الدرس التطبيقي حول الترميز.

لنلقِ الآن نظرة على رمز التطبيق البرمجي ضمن رمز تعبيري مضمَّن في هذه الصفحة.

1. في الخطأ المُضمّن، يمكنك الاطّلاع على public/index.js:

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

   • تطلب الدالة requestPermission إذن المستخدم لإرسال إشعارات. إذا كنت قد أجريت بدء استخدام الدرس التطبيقي حول ترميز واجهة برمجة التطبيقات للإشعارات، ستلاحظ أنّ وظيفة 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 غير معروف، والتعامل مع هذا الخطأ بشكل أكثر سلاسة.

إذا واجهتك مشكلة، انتقِل إلى glitch.com/edit/#!/codelab-notifications-service-worker-completed للاطّلاع على الرمز المكتمل.

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