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