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

Jeff Posnick

يوضّح لك هذا الدليل التعليمي كيفية تسجيل عامل خدمة من داخل تطبيق الويب واستخدام "أدوات مطوّري البرامج في Chrome" لمراقبة سلوكه. ويتناول أيضًا بعض تقنيات تصحيح الأخطاء التي قد تجدها مفيدة عند التعامل مع خدمة workers.

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

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

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

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

من المفترض أن تظهر لك رسائل السجلّ التالية، التي تشير إلى أنّه تم تثبيت عامل الخدمة وتفعيله:

تعرِض هذه الحالة أنّه تم تثبيت عامل الخدمة وتفعيله.

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

تعرض تفاصيل مشغّل الخدمات في لوحة مشغّل الخدمات.

يُعلمك هذا بأنّ هناك عامل خدمة بعنوان 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);
});

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

تعرِض هذه السمة إصدارَين من مشغّل الخدمة المثبَّتَين.

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

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

ملخّص

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

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