أدوات التشخيص
🛠️ Application tab
Service workers: الحالة، Update، Unregister، و Offline. و Bypass for network وإنت بتطوّر عشان الكاش ميلخبطكش. و Cache storage تشوف وتمسح منه.
📡 Network tab
الرد اللي جه من الـ SW مكتوب جنبه (ServiceWorker). لو مش شايفه، يبقى الـ SW مش ماسك الصفحة.
المطبات
المستخدمين عالقين على نسخة قديمةمتعملش Cache First لـ HTML من غير صلاحية أو build id
sw.js نفسه بيتكاشخدمه من غير Cache-Control طويل، ومتحطوش في الكاش بتاعك
الصفحة فاضية بعد ما اتجابت من الكاشنسيت
response.clone() قبل cache.putخطأ redirected response في navigationاعمل
new Response(body) جديد قبل ما تحفظهالكاش بيكبر من غير حدودtrim بعدد أو بتاريخ، وامسح الكاش القديم في activate
حفظت رد 404 أو 500احفظ بس لو
response.okصورة من دومين تاني حجمها كبير في الكاشده opaque response (CORS). المتصفح بيحسبه بحجم كبير، فخليه network أو اطلب بـ CORS
Safari مسح الكاشiOS بيمسح التخزين لو الموقع متفتحش فترة. اطلب
navigator.storage.persist()مش عارف فاضل مساحة قد إيه
navigator.storage.estimate()الـ SW مش بيمسك الصفحة أول زيارةطبيعي. نادِ
clients.claim() في activateعايز تقول للمستخدم في تحديثاسمع
updatefound واعرض زرار، وابعت رسالة للـ SW ينادي skipWaiting()رسالة “في تحديث جديد”
main.js
const reg = await navigator.serviceWorker.register("/sw.js");reg.addEventListener("updatefound", () => { const next = reg.installing; next?.addEventListener("statechange", () => { // اتسطّب وفي SW قديم ماسك الصفحة = في نسخة جديدة مستنية if (next.state === "installed" && navigator.serviceWorker.controller) { showToast("في نسخة جديدة", () => next.postMessage("SKIP_WAITING")); } });});// لما الجديد يمسك، اعمل reload مرة واحدةlet reloaded = false;navigator.serviceWorker.addEventListener("controllerchange", () => { if (!reloaded) { reloaded = true; location.reload(); }});sw.js
self.addEventListener("message", (event) => { if (event.data === "SKIP_WAITING") self.skipWaiting();});خلّصت الفصل لما
🧠 اختبر نفسك
١) المستخدم بيشوف النسخة القديمة رغم إنك نزّلت تعديل. أول حاجة تشيّك عليها؟
هل الـ HTML Cache First من غير صلاحية، وهل sw.js نفسه اتغير واتكاش.
٢) ليه opaque responses مشكلة في الكاش؟
المتصفح مش عارف حجمها ولا حالتها، فبيحسبها بحجم كبير وممكن تكون error.