تسجيل Service Worker ودورة حياته
سجّل script الخاص بـ Service Worker، وافهم أحداث دورة حياة install وactivate وfetch، واستخدم skipWaiting وclients.claim
تسجيل Service Worker ودورة حياته درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو Service Worker؟
Service Worker هو ملف JavaScript يعمل في عامل متصفح منفصل، وليس في الخيط الرئيسي، ويعترض طلبات الشبكة الخاصة بـ origin الخاص بكم. وهو المحرك الذي يقف وراء تطبيقات PWA التي تعمل دون اتصال، والإشعارات الفورية، والمزامنة في الخلفية.
تسجيل Service Worker
سجّلوه من النص البرمجي الرئيسي. تتطلب Service Workers استخدام HTTPS، باستثناء localhost.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}النطاق
يتحكم Service Worker في الطلبات الموجودة ضمن نطاقه، أي الدليل الذي يُخدَم منه. يتحكم /sw.js الموجود في الجذر في كل شيء. أما SW الموجود في /app/sw.js فلا يتحكم إلا في /app/*.
دورة الحياة: install → activate → fetch
ثلاثة أحداث أساسية: install (يحدث مرة واحدة لإعداد ذاكرات التخزين المؤقت)، وactivate (يحدث مرة واحدة لتنظيف ذاكرات التخزين المؤقت القديمة)، وfetch (مع كل طلب، لاتخاذ قرار استخدام الذاكرة المؤقتة أو الشبكة).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
افتراضيًا، ينتظر SW المحدّث إغلاق جميع علامات التبويب قبل تفعيله. يؤدي self.skipWaiting() داخل معالج التثبيت إلى فرض التفعيل الفوري، ما يسرّع التحديثات لكنه قد يخلط بين الأصول القديمة والجديدة.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
بعد التفعيل، لا يتحكم SW الجديد في الصفحات التي حُمّلت قبله. يتولى self.clients.claim() داخل معالج التفعيل التحكم فورًا.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});تحديث Service Worker
تتحقق المتصفحات من وجود sw.js جديد عند كل انتقال (بحد أقصى لعمر التخزين يبلغ 24 ساعة). إذا تغير محتوى الملف (باختلاف البايتات)، يُثبّت كـ SW جديد وينتظر التفعيل. أعيدوا التحميل لبدء التفعيل.
اكتشاف التحديثات من التطبيق
استمعوا إلى updatefound لعرض مطالبة بالتحديث.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});إلغاء التسجيل
لإيقاف Service Worker خرج عن السيطرة (بسبب خطأ أثناء التطوير)، ألغوا تسجيله.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});أدوات DevTools في المتصفح
يعرض Chrome DevTools ← Application ← Service Workers وحدات SW المسجّلة، ويتيح إلغاء تسجيلها، ومحاكاة التحديث عند إعادة التحميل، وتتبع أحداث دورة الحياة خطوةً بخطوة.
الأخطاء الشائعة
1) يجب أن يكون ملف SW في نطاق الجذر أو في مستوى أعلى. 2) يلزم استخدام HTTPS. 3) تحتاج تغييرات SW إلى إعادة تحميل قسرية أثناء التطوير. 4) خزّنوا المحتوى مرة واحدة ثم حدّثوه باستخدام إصدار، بدلًا من زيادة حجم الذاكرة المؤقتة بلا نهاية. 5) لا تخزّنوا طلبات POST مؤقتًا، فهي غير مدعومة.
Workbox — مكتبة الإنتاجية
تجرّد Workbox دورة الحياة وتوفّر استراتيجيات جاهزة للتخزين المؤقت. تستخدم معظم تطبيقات PWA الإنتاجية Workbox بدلًا من كتابة كود SW يدويًا.
تحقق سريع
ماذا تفعل self.skipWaiting() داخل معالج install في Service Worker؟
مراجعة: دورة حياة Service Worker
عامل JavaScript يعترض طلبات الشبكة الخاصة بـ origin الخاص بكم. سجّلوه باستخدام navigator.serviceWorker.register. دورة الحياة: install (إعداد ذاكرات التخزين المؤقت)، ثم activate (التنظيف)، ثم fetch (اعتراض الطلبات). استخدموا skipWaiting وclients.claim للتحديثات الفورية. استمعوا إلى updatefound لعرض مطالبة للمستخدمين. يجرّد Workbox الكود التمهيدي. يلزم HTTPS، باستثناء localhost.
الأسئلة الشائعة
هل درس «تسجيل Service Worker ودورة حياته» مجاني؟
نعم — نص درس «تسجيل Service Worker ودورة حياته» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «تسجيل Service Worker ودورة حياته»؟
سجّل script الخاص بـ Service Worker، وافهم أحداث دورة حياة install وactivate وfetch، واستخدم skipWaiting وclients.claim تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تسجيل Service Worker ودورة حياته»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بيان تطبيق الويب
- تسجيل Service Worker ودورة حياته
- استراتيجيات التخزين المؤقت دون اتصال: CacheFirst وNetworkFirst
- الإشعارات الفورية