استراتيجيات الكاش — الريكوست بيروح فين؟

كل استراتيجية هي إجابة على سؤال واحد: لما ييجي request، أسأل مين الأول؟ الأرقام على الأسهم هي ترتيب الخطوات.

١. Cache First — التلاجة الأول

لو الملف في الكاش، مفيش نت خالص. أسرع حاجة ممكنة، بس لو الملف اتغير على السيرفر مش هتعرف.

مناسبة لـ: ملفات اسمها فيه hash (app.3f9a1c.js)، والخطوط، والصور اللي مبتتغيرش.

async function cacheFirst(request) {  const cached = await caches.match(request);  if (cached) return cached;  const response = await fetch(request);  if (response.ok) {    const cache = await caches.open("assets-v1");    cache.put(request, response.clone()); // clone: الـ body بيتقري مرة واحدة بس  }  return response;}

٢. Network First — المطبخ الأول

دايمًا بتحاول تجيب الأحدث، والكاش احتياطي. العيب: على نت بطيء المستخدم بيستنى لحد ما الشبكة ترد أو تفشل. حط timeout عشان متستناش للأبد.

مناسبة لـ: داتا لازم تبقى حديثة، زي API الرسايل أو الطلبات.

٣. Stale-While-Revalidate — ادّيله القديم وهات الجديد

المستخدم بياخد رد فوري من الكاش، وفي نفس اللحظة بنحدّث الكاش من النت. يعني بيشوف الجديد المرة الجاية، مش دلوقتي.

مناسبة لـ: حاجات مش مشكلة لو اتأخرت مرة: الـ avatar، فهرس البحث، الـ config.

async function staleWhileRevalidate(event, request) {  const cache = await caches.open("static-v1");  const cached = await cache.match(request);  const network = fetch(request).then((res) => {    if (res.ok) cache.put(request, res.clone());    return res;  });  if (cached) {    event.waitUntil(network.catch(() => {})); // كمّل التحديث حتى بعد ما رديت    return cached;  }  return network;}

٤ و ٥. Network Only و Cache Only

إزاي تختار؟

خلّصت الفصل لما

• ترسم خطوات Cache First و Network First و SWR بالترتيب
• تعرف ليه لازم response.clone() قبل cache.put
• تعرف ليه Network First محتاج timeout
• تختار الاستراتيجية حسب نوع الملف