
- بواسطة x32x01 ||
عمرك فتحت موقع وفضل شغال عادي حتى بعد ما الإنترنت قطع؟
أو لاحظت إن في مواقع بتفتح بسرعة جدًا كأنها محفوظة على جهازك؟ السر كله في حاجة اسمها Service Workers
يعني إيه Service Worker؟
ببساطة، Service Worker هو سكربت (كود JavaScript) بيشتغل في الخلفية بين المتصفح والسيرفر.
مش بيظهر للمستخدم، لكنه بيخلّي الموقع:
يعني تقدر تعتبره "العقل المدبر" اللي بيخلي الموقع ذكي وسريع.
إزاي الـ Service Workers بتشتغل؟
تعال نوضحها خطوة بخطوة:
أول ما المستخدم يفتح الموقع، المتصفح بيسجل الـ Service Worker مرة واحدة.
في المرحلة دي بيبدأ الكود يحمّل ويحفظ الملفات اللي محتاجها في الكاش (زي الصور وملفات الـ CSS والـ JS).
كل مرة المستخدم يطلب صفحة أو صورة، الـ Service Worker بيقرر:
هل يجيبها من الكاش ولا من السيرفر؟
وده اللي بيخلي الموقع سريع حتى بدون إنترنت
مميزات استخدام Service Workers
أداء أسرع: لأن الملفات الأساسية بتكون محفوظة في الكاش.
تشغيل أوفلاين: تقدر تفتح الموقع حتى لو النت فصل.
أمان أعلى: بيشتغل فقط على المواقع اللي بتستخدم HTTPS.
تجربة مستخدم ممتازة: بدون تحميل تقيل أو انتظار طويل.
شوية ملاحظات مهمة
لازم تخطط للكاش كويس جدًا، عشان متحفظش ملفات زيادة عن اللزوم.
مش كل المتصفحات بتدعم كل خصائص الـ Service Workers، فراجع التوافق قبل ما تعتمد عليها كليًا.
إزاي تضيف Service Worker لموقعك؟
الكود بسيط جدًا!
أول خطوة، في ملف JavaScript الأساسي للموقع:
وبعدين في ملف sw.js:
الكود ده ببساطة بيخلّي الموقع يخزن الملفات ويستخدمها بعدين من الكاش لو النت مش موجود 
الخلاصة
الـ Service Workers غيرت طريقة شغل الويب حرفيًا 
بقت المواقع أسرع، أأمن، وتقدر تشتغل أوفلاين بدون مشاكل.
ولو بتطوّر موقع أو تطبيق ويب، لازم تبدأ تستخدمها النهارده!
أو لاحظت إن في مواقع بتفتح بسرعة جدًا كأنها محفوظة على جهازك؟ السر كله في حاجة اسمها Service Workers

يعني إيه Service Worker؟
ببساطة، Service Worker هو سكربت (كود JavaScript) بيشتغل في الخلفية بين المتصفح والسيرفر.مش بيظهر للمستخدم، لكنه بيخلّي الموقع:
- يشتغل حتى لو النت فاصل.
- يفتح أسرع جدًا بفضل Caching.
- يقدر يرسل إشعارات حتى وانت مش فاتح الموقع.

إزاي الـ Service Workers بتشتغل؟
تعال نوضحها خطوة بخطوة:
التسجيل (Registration)
أول ما المستخدم يفتح الموقع، المتصفح بيسجل الـ Service Worker مرة واحدة.
التثبيت (Installation)
في المرحلة دي بيبدأ الكود يحمّل ويحفظ الملفات اللي محتاجها في الكاش (زي الصور وملفات الـ CSS والـ JS).
التعامل مع الطلبات (Fetch Event)
كل مرة المستخدم يطلب صفحة أو صورة، الـ Service Worker بيقرر:هل يجيبها من الكاش ولا من السيرفر؟
وده اللي بيخلي الموقع سريع حتى بدون إنترنت

مميزات استخدام Service Workers




شوية ملاحظات مهمة


إزاي تضيف Service Worker لموقعك؟
الكود بسيط جدًا!أول خطوة، في ملف JavaScript الأساسي للموقع:
JavaScript:
// Register Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(() => {
console.log('Service Worker Registered!');
});
}
وبعدين في ملف sw.js:
JavaScript:
self.addEventListener('install', event => {
console.log('Service Worker Installed');
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});

الخلاصة
الـ Service Workers غيرت طريقة شغل الويب حرفيًا 
بقت المواقع أسرع، أأمن، وتقدر تشتغل أوفلاين بدون مشاكل.
ولو بتطوّر موقع أو تطبيق ويب، لازم تبدأ تستخدمها النهارده!

التعديل الأخير: