المستوى المطلوب: متوسط — هتحتاج فهم أساسي لـ JavaScript و Promises و HTTP caching headers. لو لسه ما تعاملتش مع fetch() أو async/await، ابدأ بمقال أبسط الأول.
الزائر اللي بيرجع لموقعك المرة التانية المفروض يفتحه أسرع من المرة الأولى بـ 5 أضعاف على الأقل. لو بيستنّى نفس الـ 2.8 ثانية تاني، انت بتحرق ميزانية CDN وbounce rate في نفس الوقت.
Service Worker Caching: السيطرة الكاملة على ما يحمّله المتصفح
Service Worker هو سكربت JavaScript بيشتغل في background منفصل عن الصفحة، بيقدر يعترض كل request شبكة قبل ما يطلع للسيرفر. ده بيخلّيك تتحكم في كل byte بيحمّله المتصفح، بدون ما تعتمد على HTTP cache headers اللي بيتحكم فيها السيرفر.
المشكلة باختصار
على موقع e-commerce عربي بـ 84,000 زائر شهريًا، 47% من الترافيك زوار عائدين. لما قسنا P75 لـ Largest Contentful Paint (LCP) عليهم، طلع 2,840ms على شبكة 4G مصرية. السبب مش السيرفر — هو إن المتصفح بيعيد تنزيل نفس ملفات JS و CSS و الخطوط في كل زيارة لأن Cache-Control: max-age انتهى أو إن الصفحة فُتحت في tab جديد.
بعد تفعيل Service Worker بـ Workbox 7 واستراتيجية cache-first على الأصول الثابتة، نزل P75 لـ 410ms. ده توفير 86% من زمن التحميل بدون لمس السيرفر.
تشبيه للمبتدئ: أمين المخزن في المصنع
تخيّل مصنع فيه عمّال بيطلبوا أدوات من المخزن المركزي البعيد. كل طلب بياخد 10 دقائق رايح جاي. المهندس قرّر يحط أمين مخزن صغير جنب خط الإنتاج. الأمين ده عنده نسخة من الأدوات الأكثر استخدامًا. لما عامل يطلب مفتاح ربط، الأمين يدّيهوله من على الرف فورًا. لما يطلب حاجة نادرة، الأمين يروح للمخزن الكبير ويرجع.
Service Worker هو أمين المخزن ده. الصفحة بتطلب الأدوات (CSS، JS، صور)، والـ Service Worker بيقرّر: عندي نسخة قريبة؟ يبعتها فورًا (0.4 ثانية). مش عندي؟ يروح للسيرفر، يرجع، ويحتفظ بنسخة للمرة الجاية.
التعريف العلمي الدقيق
وفقًا لـ Service Worker specification من W3C، الـ Service Worker هو نوع من Web Workers يعمل كـ programmable network proxy بين الصفحة والشبكة. بيعمل في worker thread منفصل بـ event-driven model. الـ events الأساسية: install, activate, fetch, message, push. بيتخزّن في الـ Service Worker registry بتاع الـ origin، وبيستمر شغّال حتى لو كل tabs الموقع اتقفلت (لمدة محدودة).
الـ Cache API المرتبط بيه (CacheStorage) هو key-value store بيخزّن Request/Response pairs. مش زي HTTP cache التقليدي اللي بيشتغل بـ headers بس، Cache API بتديك full control: انت بتحدّد بالكود متى تخزّن، متى ترجّع من الذاكرة، ومتى تحدّث.
3 استراتيجيات caching — متى تستخدم كل واحدة
- Cache-First: ابحث في cache أولاً، لو موجود ارجع بيه فورًا. لو لأ، اطلب من السيرفر واحفظ نسخة. مناسب للأصول الثابتة (logo، fonts، JS bundles بـ hash في الاسم).
