Vue Academy · درس

استراتيجيات Service Worker

‏Cache-first وnetwork-first وstale-while-revalidate — اختيار الاستراتيجية حسب نوع المورد

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

نظرة عامة على استراتيجيات التخزين المؤقت

يعترض service worker طلبات الشبكة ويقرر ما إذا كان سيخدمها من ذاكرة التخزين المؤقت أو الشبكة أو كليهما. ويسمي Workbox أربع استراتيجيات أساسية، تناسب كل منها نوعًا مختلفًا من الموارد.

CacheFirst

يخدم CacheFirst المحتوى من ذاكرة التخزين المؤقت، ولا يصل إلى الشبكة إلا عند عدم العثور عليه. وهو مناسب للأصول التي نادرًا ما تتغير وتستخدم عناوين URL ذات تجزئة للمحتوى، مثل الخطوط والصور.

// serve cached, fall back to network on miss

NetworkFirst

يجرب NetworkFirst الشبكة أولًا، ثم يعود إلى ذاكرة التخزين المؤقت عند عدم الاتصال أو انتهاء المهلة. وهو مناسب لاستجابات API التي تهم حداثتها مع الرغبة في إتاحتها دون اتصال.

// try network, fall back to cache when offline

StaleWhileRevalidate

يعيد StaleWhileRevalidate النسخة المخزنة مؤقتًا فورًا لتحقيق السرعة، بينما يجلب نسخة حديثة في الخلفية لتحديث ذاكرة التخزين المؤقت. وهو مناسب جدًا لحزم JavaScript وCSS.

// return cache now, update cache in background

NetworkOnly وCacheOnly

يمثلان الطرفين المتباعدين: يجلب NetworkOnly دائمًا من الشبكة دون تخزين مؤقت، بينما يخدم CacheOnly المحتوى المخزن مسبقًا فقط. استخدمهما لطلبات POST غير القابلة للتخزين المؤقت أو للأصول المخزنة مسبقًا حصرًا.

مصفوفة runtimeCaching

في إعداد Workbox، تكون runtimeCaching مصفوفة من القواعد. تطابق كل قاعدة عناوين URL للطلبات وتعيّن استراتيجية واسمًا لذاكرة التخزين المؤقت.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

قاعدة urlPattern

تحتوي كل قاعدة على urlPattern (تعبير نمطي أو دالة)، وhandler (اسم الاستراتيجية)، وoptions مثل اسم ذاكرة التخزين المؤقت.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

تخزين الأصول الثابتة باستخدام CacheFirst

طابق الصور والخطوط وقدّمها باستخدام CacheFirst، لأن عناوين URL ذات تجزئة المحتوى الخاصة بها تتغير عند تغيّر الملف.

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

تخزين حزم JS باستخدام StaleWhileRevalidate

قدّم حزم البرامج النصية والأنماط فورًا من ذاكرة التخزين المؤقت، مع تحديثها في الخلفية.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

إضافة Expiration

تنمو ذاكرات التخزين المؤقت بلا حدود من دون قيود. ويحدّ الخيار expiration من عدد الإدخالات وعمرها الأقصى، مع حذف الأقدم أولًا.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

تخزين الاستجابات غير الشفافة

بالنسبة إلى استجابات API من مصادر أخرى، غالبًا ما تضيف cacheableResponse مع حالات مسموحة، بحيث لا تُخزَّن إلا الاستجابات الناجحة.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

تحقق سريع

أي استراتيجية تناسب استجابات API التي ينبغي أن تكون حديثة ومتاحة دون اتصال؟

مراجعة

تتوافق استراتيجيات Workbox مع أنواع الموارد: CacheFirst للأصول الثابتة، وNetworkFirst لاستجابات API، وStaleWhileRevalidate لحزم JS/CSS. عرّفها في مصفوفة runtimeCaching باستخدام urlPattern وhandler وoptions، مثل إضافة expiration للحد من حجم ذاكرة التخزين المؤقت.

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

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

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

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

‏Cache-first وnetwork-first وstale-while-revalidate — اختيار الاستراتيجية حسب نوع المورد تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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