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

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 هو المكان الذي يتم فيه عادةً تضمين كل منطق تنفيذ worker الخدمة. ويمكنك استخدام مزيج من أحداث دورة حياة worker الخدمة، وCache Storage API، ومعلومات عن عدد الزيارات الواردة من الشبكة إلى تطبيق الويب لإنشاء worker خدمة مصمّم بشكلٍ مثالي ومستعد للتعامل مع جميع طلبات تطبيق الويب.

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

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

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

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

تعرِض هذه السمة تفاصيل عامل الخدمة في لوحة عامل الخدمة.

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

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