Cheat Sheet: الـ PWA في صفحة · مذكرات سعيد

عايز الموقع يتسطّبmanifest فيه name و start_url و display وأيقونة 192 و 512 + HTTPS

الأيقونة صغيرة جوه دايرةأيقونة maskable، والمهم في الـ 80% اللي في النص

عايز الموقع يفتح offlineService Worker يمسك fetch ويرد من Cache Storage

فين أحفظ الملفات الأساسية؟في install بـ cache.addAll

الطلب موجود في الصندوق؟cache.match

احفظ رد بعد ما تعدّلهResponse جديد ثم cache.put

امسح طلب واحدcache.delete

امسح الصندوق كلهcaches.delete

فين أمسح الكاش القديم؟في activate، بعد caches.keys()

النسخة الجديدة مستنيةwaiting لحد ما التابات تتقفل، أو skipWaiting()

الـ SW مش ماسك الصفحة الحاليةclients.claim()

المتصفح عرف التحديث إزاي؟قارن sw.js بايت ببايت

JS و CSS باسم فيه hashCache First من غير صلاحية

داتا لازم تبقى حديثةNetwork First + timeout

سرعة أهم من الحداثة اللحظيةStale-While-Revalidate

POST أو دفعNetwork Only

HTML ومحتوى بيتحدثCache First بصلاحية + build id (زي الموقع ده)

صفحة مش محفوظة والنت مقطوعرجّع offline.html اتحفظت في install

الرد فاضي بعد الكاشresponse.clone()

بتختبر offline بـ Playwrightاقفل السيرفر، setOffline مش بيأثر على الـ SW

الخريطة كلها في رسمة

خلّصت المذكرة لما

🧠 اختبر نفسك

١) الفرق في جملة بين Cache First و SWR؟

الاتنين بيردوا من الكاش. SWR بيحدّث في الخلفية كل مرة، و Cache First مش بيلمس النت لو لقى.

٢) ليه HTML محتاج build id ومش مدة بس؟

عشان التحديث يبان أول ما ينزل deploy، مش بعد ما المدة تخلص.