يعني إيه PWA؟ · مذكرات سعيد

موقع بيتصرف زي تطبيق

الـ Progressive Web App مش framework ولا مكتبة. هو موقع عادي زوّدناه بحاجات بتخليه:

يتسطّب على الـ home screen بأيقونةيفتح في شباك لوحده من غير شريط المتصفحيشتغل من غير نت أو بنت ضعيفيفتح أسرع لأن الحاجات محفوظة عنده

وكلمة Progressive معناها إن الموقع بيشتغل عادي في أي متصفح، واللي بيدعم المميزات دي بياخدها زيادة. مفيش حد بيتحرم من الموقع.

🔒 HTTPS

الـ Service Worker بيقدر يغيّر أي رد راجع للصفحة، فالمتصفح مش بيسمح بيه غير على اتصال آمن. (localhost مستثنى عشان التطوير.)

📄 Manifest

ملف JSON فيه اسم التطبيق وأيقوناته ولونه وبيفتح إزاي. ده اللي بيخلّيه يتسطّب.

⚙️ Service Worker

ملف JavaScript بيشتغل في الخلفية، منفصل عن الصفحة، وبيعدّي عليه كل request الصفحة بتعمله. ده اللي بيخلّي الموقع يشتغل offline.

ده أهم سطر في المذكرة: الـ Service Worker proxy بين صفحتك والنت. أي fetch أو صورة أو صفحة جديدة بتطلبها، بتعدّي عليه الأول، وهو يقرر يرد منين.

الريكوست بيعدّي على الـ Service Worker الأول

النقط اللي بتتحرك على الأسهم دي الـ requests والـ responses وهي ماشية. الصفحة مش عارفة الرد جه من التلاجة ولا من المطبخ. هي بس طلبت وجالها رد.

المتصفح عنده أصلًا HTTP cache بيمشي على headers زي Cache-Control. الفرق:

	HTTP cache	Cache Storage
مين بيتحكم؟	المتصفح، على حسب headers السيرفر	إنت بالكود جوه الـ Service Worker
بيتمسح إمتى؟	المتصفح يقرر	لما إنت تمسحه (أو المساحة تخلص)
offline	مش مضمون	مضمون طول ما الملف محفوظ

🧠 اختبر نفسك

١) أنهي مكوّن بيخلي الموقع يتسطّب، وأنهي بيخليه يشتغل offline؟

الـ manifest للتسطيب، والـ service worker للـ offline.

٢) الصفحة بتعرف إن الرد جه من الكاش؟

لأ. الـ SW بيرجّع Response عادي، والصفحة مش فارق معاها جه منين.

٣) ينفع أعدّل الـ DOM من جوه الـ Service Worker؟

لأ. مفيش document هناك. ابعت رسالة للصفحة وهي تعدّل.