تسجيل Service Worker من HTML

Service Worker هو ملف JavaScript يعمل في الخلفية بمعزل عن أي صفحة، ويعترض طلبات الشبكة ضمن النطاق الخاص به. وهو يوفّر دعم العمل دون اتصال، والإشعارات الفورية، والمزامنة في الخلفية، وتسريع عمليات التحميل المتكررة من خلال التخزين المؤقت.

سجّل Service Worker من خلال نص الصفحة باستخدام: navigator.serviceWorker.register("/sw.js"). يجلب المتصفح الملف /sw.js ويحلله، ثم يشغّل حدث التثبيت فيه ويبدأ باعتراض الطلبات ضمن نطاق التسجيل.

لا تدعم المتصفحات القديمة Service Worker. تحقّق دائمًا من توفر الميزة باستخدام "serviceWorker" in navigator قبل استدعاء register، وإلا فسيؤدي الاستدعاء إلى ظهور خطأ في المتصفحات التي تفتقد الواجهة البرمجية. ولا يُعد استخدام polyfill عمليًا، لأن Service Worker يتطلب تكاملًا على مستوى المتصفح.

النطاق هو بادئة المسار التي يتحكم بها Service Worker. ويكون النطاق افتراضيًا هو مجلد ملف العامل: إذ يتحكم /sw.js في جميع عناوين URL الموجودة ضمن /. ولتسجيل عامل ذي نطاق أعمق من موقع ملف مختلف، حدّد خيار scope، وقدّم أيضًا الترويسة Service-Worker-Allowed.

ضع sw.js في جذر التطبيق (/sw.js) حتى يغطي نطاقه الافتراضي الموقع بأكمله. أما المسارات الأعمق، مثل /app/sw.js، فتحصر النطاق في /app/ وما تحته، وهو أمر نادرًا ما تريده.

سجّل Service Worker بعد تحميل الصفحة لتجنب منافسته على النطاق الترددي أثناء العرض الأساسي: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). وتبدأ ميزات PWA بالعمل في الزيارات اللاحقة دون تأخير الزيارة الأولى.

يتحقق المتصفح تلقائيًا من وجود نسخة محدثة من sw.js، عادةً كل 24 ساعة وعند معظم عمليات تحميل الصفحات. إذا تغير محتوى الملف، يُنزّل العامل الجديد ويُثبّت، ثم ينتظر في حالة "waiting" حتى تُغلق جميع علامات التبويب الموجودة، وبعدها يُفعّل.

يؤدي registration.update() إلى تشغيل عملية تحقق من التحديث يدويًا. ويؤدي self.skipWaiting() داخل ملف sw.js الجديد إلى تفعيله فورًا دون انتظار إغلاق علامات التبويب. اجمع بينهما للحصول على سلوك «تشغيل أحدث عامل دائمًا»، مع احتمال إعادة جلب الموارد أثناء الجلسة.

يزيل registration.unregister() العامل. ويفيد ذلك أثناء التطوير إذا كان عامل معطوب يتسبب في مشكلات لموقعك. وفي Chrome DevTools، توفّر Application → Service Workers زر "Unregister" للغرض نفسه أثناء تصحيح الأخطاء.

يفشل تسجيل العامل بصمت عند استخدام HTTP دون HTTPS، لأن Service Worker يتطلب أصلًا آمنًا، مثل HTTPS أو localhost أثناء التطوير. تحقّق من وحدة التحكم بحثًا عن الرسالة "An SSL certificate error occurred" إذا لم يبدأ التسجيل بالعمل.

لا يمكن للعامل الوصول إلى DOM. ولتمرير الرسائل، استخدم navigator.serviceWorker.controller.postMessage() من الصفحة، واستخدم self.addEventListener("message", handler) في العامل، والعكس صحيح. ويفيد ذلك في إبطال التخزين المؤقت، والتحقق من الإصدارات، وإنشاء الأحداث المخصّصة.

في الزيارة الأولى، يُثبّت العامل ولا يبدأ بالتحكم في الصفحات إلا بعد إعادة تحميل الصفحة. وللتحكم في عملية التصفح الأولى فورًا، استدعِ self.clients.claim() في حدث activate، وهو أمر مفيد للتطبيقات التي تعتمد أسلوب العمل دون اتصال أولًا.

سجّل Service Worker من JavaScript الخاص بالصفحة باستخدام navigator.serviceWorker.register("/sw.js") بعد التحقق من توفر الميزة. ضع sw.js في جذر التطبيق للحصول على نطاق كامل. ونفّذ التسجيل عند التحميل لتجنب منافسة العرض الأساسي على الموارد. تتحقق المتصفحات تلقائيًا من التحديثات دوريًا؛ ويمكن فرضها باستخدام registration.update أو skipWaiting. ويتطلب ذلك HTTPS لمنع حقن عامل ضار.