إزاي المواقع بتشتغل من غير إنترنت ؟

عمرك فتحت موقع وفضل شغال عادي حتى بعد ما الإنترنت قطع؟
أو لاحظت إن في مواقع بتفتح بسرعة جدًا كأنها محفوظة على جهازك؟ السر كله في حاجة اسمها Service Workers 💡

يعني إيه Service Worker؟ ⚙️​

ببساطة، Service Worker هو سكربت (كود JavaScript) بيشتغل في الخلفية بين المتصفح والسيرفر.
مش بيظهر للمستخدم، لكنه بيخلّي الموقع:

• يشتغل حتى لو النت فاصل.
• يفتح أسرع جدًا بفضل Caching.
• يقدر يرسل إشعارات حتى وانت مش فاتح الموقع.

👨‍💻 يعني تقدر تعتبره "العقل المدبر" اللي بيخلي الموقع ذكي وسريع.

---

إزاي الـ Service Workers بتشتغل؟ 🔁​

تعال نوضحها خطوة بخطوة:

1️⃣ التسجيل (Registration)​

أول ما المستخدم يفتح الموقع، المتصفح بيسجل الـ Service Worker مرة واحدة.

2️⃣ التثبيت (Installation)​

في المرحلة دي بيبدأ الكود يحمّل ويحفظ الملفات اللي محتاجها في الكاش (زي الصور وملفات الـ CSS والـ JS).

3️⃣ التعامل مع الطلبات (Fetch Event)​

كل مرة المستخدم يطلب صفحة أو صورة، الـ Service Worker بيقرر:
هل يجيبها من الكاش ولا من السيرفر؟
وده اللي بيخلي الموقع سريع حتى بدون إنترنت 🌐

---

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

✨ أداء أسرع: لأن الملفات الأساسية بتكون محفوظة في الكاش.
✨ تشغيل أوفلاين: تقدر تفتح الموقع حتى لو النت فصل.
✨ أمان أعلى: بيشتغل فقط على المواقع اللي بتستخدم HTTPS.
✨ تجربة مستخدم ممتازة: بدون تحميل تقيل أو انتظار طويل.

---

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

⚠️ لازم تخطط للكاش كويس جدًا، عشان متحفظش ملفات زيادة عن اللزوم.
⚠️ مش كل المتصفحات بتدعم كل خصائص الـ Service Workers، فراجع التوافق قبل ما تعتمد عليها كليًا.

---

إزاي تضيف Service Worker لموقعك؟ 💻​

الكود بسيط جدًا!
أول خطوة، في ملف JavaScript الأساسي للموقع:

// Register Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(() => {
console.log('Service Worker Registered!');
});
}

وبعدين في ملف sw.js:

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 غيرت طريقة شغل الويب حرفيًا 🌍
بقت المواقع أسرع، أأمن، وتقدر تشتغل أوفلاين بدون مشاكل.
ولو بتطوّر موقع أو تطبيق ويب، لازم تبدأ تستخدمها النهارده! 🚀