JavaScript Academy · درس

تسجيل Service Worker

ثبّتوا Service Worker ونشّطوه.

تسجيل Service Worker درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما هو Service Worker؟

إن Service Worker عبارة عن برنامج نصي يشغّله المتصفح في الخلفية بشكل منفصل عن الصفحة. ويعمل كوكيل شبكة قابل للبرمجة؛ إذ يمكنه اعتراض الطلبات وتقديم الاستجابات المخزنة مؤقتًا وتمكين العمل دون اتصال.

اكتشاف الميزات

لا تدعم جميع البيئات Service Workers. تحققوا من وجود navigator.serviceWorker قبل التسجيل، حتى تتعامل المتصفحات الأقدم مع الميزة بشكل ملائم عند عدم دعمها.

if ('serviceWorker' in navigator) {
  // safe to register
}

التسجيل

سجّلوا Service Worker بتمرير عنوان URL الخاص بالبرنامج النصي إلى navigator.serviceWorker.register. وتعيد هذه الدالة وعدًا يُحلّ إلى كائن التسجيل.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

نطاق التسجيل

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

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

تحديد نطاق صريح

يمكنكم تضييق النطاق باستخدام خيار، لكن لا يمكنكم توسيعه إلى ما يتجاوز دليل البرنامج النصي إلا إذا عُيّن رأس خاص على الخادم.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

متطلب HTTPS

تتطلب Service Workers سياقًا آمنًا: أي HTTPS في بيئة الإنتاج. ويُعامل localhost على أنه آمن أثناء التطوير. ويمنع ذلك المهاجمين من اختطاف وكيل الشبكة.

الحدث install

في المرة الأولى التي يُسجَّل فيها العامل، يشغّل حدث install. ويُستخدم هذا الموضع عادةً لتخزين الأصول الأساسية مؤقتًا مسبقًا، حتى يعمل التطبيق دون اتصال.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

الحدث activate

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

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

دورة الحياة

يمر Service Worker بالمراحل التالية:

installing — تشغيل معالج التثبيت
installed/waiting — جاهز وينتظر تولّي التحكم
activating / activated — يتحكم الآن في الصفحات

ينتظر العامل الجديد، افتراضيًا، حتى تُغلق الصفحات القديمة قبل تفعيله.

اعتراض الطلبات

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

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

مراجعة التسجيل

لتسجيل Service Worker: اكتشفوا دعم الميزة، واستدعوا register باستخدام عنوان URL لبرنامج نصي، وانتبهوا إلى النطاق ومتطلب HTTPS، وعالجوا أحداث install وactivate وfetch داخل البرنامج النصي للعامل.

اختبار سريع

اختبروا مدى فهمكم لتسجيل Service Worker.

مراجعة

لقد تعلمتم تسجيل Service Worker:

اكتشفوا دعم الميزة باستخدام 'serviceWorker' in navigator.
تعيد register(url, { scope }) وعدًا.
يكون النطاق افتراضيًا دليل البرنامج النصي، كما أن HTTPS مطلوب.
عالجوا أحداث install وactivate وfetch داخل العامل.

التالي: Cache API.

الأسئلة الشائعة

هل درس «تسجيل Service Worker» مجاني؟

نعم — نص درس «تسجيل Service Worker» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تسجيل Service Worker»؟

ثبّتوا Service Worker ونشّطوه. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تسجيل Service Worker»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy