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

Jeff Posnick

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

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

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

عرض مشغّل الخدمات الذي تم تثبيته وتفعيله

بعد ذلك، انتقِل إلى علامة التبويب التطبيقات، واختَر لوحة 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);
});

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

لعرض إصدارَين مثبّتَين من مشغّل الخدمات

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

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

تلخيص الأمور

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

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