مثال حقيقي: الكاش في مذكرات سعيد

الموقع اللي إنت بتقرا عليه دلوقتي PWA. الكود في src/pwa/sw.js، والإعدادات في src/lib/pwa.ts. هنفكّكه هنا.

٣ أنواع ملفات، ٣ قرارات

الصفحات: Cache First بس “طازة”

لو الصفحة مش موجودة والنت شغال، بتتجاب من النت وتتحفظ عادي. الرسمة بتوضح الحالة الصعبة بس.

إزاي بيعرف إن الصفحة من deploy قديم؟

فكرة من ٣ حتت: رقم لكل build، مكتوب في sw.js، ومختوم على كل صفحة.

// على GitHub Actions = الـ commit hash، وعلى جهازك = الوقتexport const BUILD_ID = process.env.GITHUB_SHA?.slice(0, 12) ?? Date.now().toString(36);

وقت الـ build، src/pages/sw.js.ts بيبدّل __BUILD__ في الكود بالرقم ده. فكل deploy بيطلّع sw.js مختلف، والمتصفح بيلاحظ. وكل صفحة بتتحفظ بختم:

async function stamp(res) {  const headers = new Headers(res.headers);  headers.set("x-sw-cached-at", String(Date.now()));  headers.set("x-sw-build", BUILD);  return new Response(await res.blob(), { status: res.status, statusText: res.statusText, headers });}function isFresh(res) {  if (res.headers.get("x-sw-build") !== BUILD) return false; // من deploy قديم  return Date.now() - Number(res.headers.get("x-sw-cached-at")) < PAGE_MAX_AGE;}

ليه stamp بيعمل Response جديد؟

لو السيرفر عمل redirect (مثلًا /docker ← /docker/)، الرد بيبقى redirected: true. المتصفح بيرفض يستخدم رد redirected كرد على navigation جاي من Service Worker. نسخ الـ body في new Response(...) بيعمل رد جديد نضيف، ومعاه بنحط الختم.

🧪 Lab: شوفه بعينك

1. افتح الموقع، وبعدين DevTools ← Application ← Cache storage. هتلاقي pages-v1 و assets-v1 و static-v1 و shell-....
2. افتح أي صفحة في pages-v1، وبص على الـ headers: هتلاقي x-sw-build و x-sw-cached-at.
3. في Service workers علّم على Offline، وافتح صفحة زرتها قبل كده: هتفتح. وافتح صفحة جديدة: هتلاقي صفحة “النت مقطوع” وفيها لستة اللي محفوظ عندك.

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

• تشرح الـ ٣ أنواع والاستراتيجية بتاعة كل واحد
• تشرح إزاي BUILD_ID بيوصل لـ sw.js
• تعرف x-sw-build بيتقارن بإيه
• تعرف ليه أول صفحة بعد الـ deploy لسه قديمة
• تشوف الكاش والختم من DevTools