العمل مع عاملي الخدمة

جيف بوسنيك

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

التعرف على نموذج المشروع

الملفات الموجودة في نموذج المشروع الأكثر صلة بهذا الدرس التطبيقي حول الترميز هي:

• إنّ الحقل register-sw.js فارغ، ولكنّه سيحتوي على الرمز المستخدَم لتسجيل مشغّل الخدمات. يتم تحميلها بالفعل عبر علامة <script> داخل index.html للمشروع.
• كما أنّ الحقل service-worker.js فارغ. إنه الملف الذي سيحتوي على عامل الخدمة لهذا المشروع.

إضافة رمز تسجيل عامل الخدمات

لن يتم استخدام مشغّل الخدمات (حتى لو كان فارغًا، مثل ملف service-worker.js الحالي) ما لم يتم تسجيله أولاً. يمكنك إجراء ذلك من خلال الاتصال على الرقم التالي:

navigator.serviceWorker.register(
  '/service-worker.js'
)

داخل ملف register-sw.js.

قبل إضافة هذه التعليمة البرمجية، بالرغم من ذلك، هناك بعض النقاط التي يجب وضعها في الاعتبار.

أولاً، ليس كل المتصفحات متوافقة مع مشغّلي الخدمات. وهذا يحدث خصوصًا مع الإصدارات القديمة من المتصفحات التي لا يتم تحديثها تلقائيًا. لذلك، من أفضل الممارسات استدعاء navigator.serviceWorker.register() بشكل مشروط، بعد التحقق مما إذا كانت navigator.serviceWorker متاحة.

ثانيًا، عندما تسجِّل مشغّل خدمات، يشغِّل المتصفّح الرمز في ملف service-worker.js الخاص بك، وقد يبدأ على الأرجح في تنزيل عناوين URL لتعبئة ذاكرة التخزين المؤقت، وذلك استنادًا إلى الرمز في معالِجات أحداث install وactivate لدى مشغّل الخدمات.

قد يؤدي تشغيل رمز إضافي وتنزيل مواد العرض إلى استهلاك موارد قيّمة يستطيع المتصفّح استخدامها لعرض صفحة الويب الحالية. للمساعدة في تجنُّب هذا التداخل، من الممارسات الجيدة تأخير تسجيل مشغّل الخدمات إلى أن ينتهي المتصفِّح من عرض الصفحة الحالية. وهناك طريقة ملائمة لتقريب ذلك من خلال الانتظار إلى أن يتم تنشيط حدث window.load.

بوضع هاتين النقطتين معًا، أضِف رمز تسجيل مشغّل الخدمات للأغراض العامة هذا إلى ملف register-sw.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

إضافة بعض الرموز البرمجية لتسجيل مشغّل الخدمات

ملف service-worker.js هو المكان الذي يتم فيه عادةً تنفيذ جميع المنطق السليم لتنفيذ مشغّل الخدمات. عليك استخدام مزيج من أحداث مراحل نشاط عامل الخدمة وذاكرة التخزين المؤقت لواجهة برمجة التطبيقات ومعرفة عن حركة بيانات الشبكة لتطبيق الويب لإنشاء عامل خدمة مصمم بشكل مثالي، وجاهز للتعامل مع كل طلبات تطبيق الويب الخاص بك.

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

لتحقيق هذه الغاية، أضِف الرمز التالي إلى service-worker.js الذي سيعمل على تسجيل الرسائل في وحدة تحكُّم أدوات مطوّري البرامج استجابةً لأحداث مختلفة (ولكن لن يتم تسجيل أي إجراءات أخرى):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

التعرّف أكثر على لوحة "مشغِّلو الخدمات" في "أدوات مطوري البرامج"

الآن وبعد إضافة الرمز إلى ملفَّي register-sw.js وservice-worker.js، حان الوقت لزيارة الإصدار المباشر من نموذج المشروع ومراقبة عامل الخدمة أثناء العمل.

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
• اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
• انقر على علامة التبويب وحدة التحكم.

من المفترض أن ترى شيئًا مثل رسائل السجل التالية، موضحة أنه قد تم تثبيت عامل الخدمة وتنشيطه:

بعد ذلك، انتقِل إلى علامة التبويب التطبيقات واختَر لوحة مشغِّلو الخدمات. من المفترض أن يظهر لك ما يلي:

يوضِّح لك ذلك أنّ هناك مشغّل خدمات لديه عنوان URL المصدر هو service-worker.js، في ما يخص تطبيق الويب solar-donkey.glitch.me، الذي تم تفعيله والتشغيل حاليًا. وتخبرك أيضًا بأنّ هناك برنامجًا واحدًا (علامة تبويب مفتوحة) يتحكم فيه عامل الخدمة.

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

تشغيل عملية تعديل مشغّل الخدمات

تتمثل فكرة عملية التحديث في أحد المفاهيم الأساسية التي يجب فهمها عند تطويرها بالتعاون مع مشغِّلي الخدمات.

بعد انتقال المستخدمين إلى تطبيق ويب يسجِّل مشغّل الخدمات، سيظهر لهم رمز للنسخة الحالية من service-worker.js المثبَّتة على متصفّحهم المحلي. ولكن ماذا يحدث عند إجراء تحديثات على إصدار service- Worker.js المخزن على خادم الويب؟

عندما يعود زائر متكرّر إلى عنوان URL يقع ضمن نطاق مشغّل الخدمات، سيطلب المتصفّح تلقائيًا آخر service-worker.js ويتحقّق من حدوث أي تغييرات. إذا كان هناك أي شيء مختلف في النص البرمجي لمشغِّل الخدمات، فسيحصل عامل الخدمة الجديد على فرصة لتثبيت التطبيق وتفعيله والتحكم فيه في النهاية.

ويمكنك محاكاة عملية التحديث هذه من خلال الرجوع إلى محرّر الرموز لمشروعك وإجراء أي تغيير في الرمز. سيكون التغيير السريع هو استبدال

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

مع

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

بعد إجراء هذا التغيير، يمكنك الرجوع إلى الإصدار المباشر من نموذج التطبيق وإعادة تحميل الصفحة بحيث تظل علامة تبويب "تطبيق أدوات مطوّري البرامج" مفتوحة. من المفترض أن ترى شيئًا مثل ما يلي:

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

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

وخلاصة القول

من المفترَض أن تشعر الآن بالراحة تجاه عملية تسجيل عامل خدمات ومراقبة سلوك عامل الخدمات باستخدام أدوات مطوّري البرامج في Chrome.

أنت الآن في وضع جيد لبدء تنفيذ استراتيجيات التخزين المؤقت وجميع العناصر الجيدة التي ستساعد تطبيق الويب في تحميل التطبيق بسرعة وموثوقية.