الـ PWA: إزاي تخلي موقعك يشتغل بدون إنترنت ويتثبت على الموبايل

أغلب اللي بيسمع «تطبيق» بيفتكر لازم متجر وشركة وحساب مطور. الحقيقة إن معظم اللي محتاجه المستخدم من التطبيق موجود في الويب: يفتح بسرعة، يشتغل وهو مش متصل، ويبقى ليه أيقونة على الشاشة.

الاسم التقني للحكاية دي PWA — تطبيق ويب تقدمي. وهو مش إطار عمل ولا مكتبة، ده تلات حاجات بس بتضيفها لموقع موجود.

الحاجة الأولى: ملف manifest

ملف JSON صغير بيقول للمتصفح: اسم التطبيق، والأيقونات، ولون الشريط، وإزاي يفتح. من غيره المتصفح مش هيعرف إن الموقع «قابل للتثبيت».

• الأيقونات: لازم ١٩٢ و٥١٢ بكسل على الأقل، ومنهم نسخة maskable عشان أندرويد ميقصّهاش وحش.
• display: standalone — يخلي التطبيق يفتح من غير شريط المتصفح.
• start_url — الصفحة اللي يتفتح عليها.

الحاجة التانية: Service Worker

ده الملف اللي بيشتغل في الخلفية وبيمسك طلبات الشبكة. من غيره الموقع مجرد صفحة عادية، وبوجوده يقدر يخزّن الملفات ويعرضها لو النت قطع.

أهم تلات أحداث فيه:

1. install — هنا بتحدد الملفات الأساسية اللي تتخزن أول مرة (الواجهة، الأيقونات، الخطوط).
2. activate — بتنضّف الكاش القديم.
3. fetch — هنا بتقرر لكل طلب: نجيب من النت ولا من الكاش؟

أخطر غلطة: تخزّن كل حاجة وتنسى تحدّثها. بعدها المستخدم بيفضل شايف نسخة قديمة من موقعك ومش فاهم ليه.

الحاجة التالتة: إستراتيجية كاش صح

مفيش إستراتيجية واحدة صح لكل حاجة. القاعدة اللي بتشتغل:

• الواجهة (HTML): الشبكة الأول، والكاش لو النت قطع. عشان المستخدم يشوف الجديد.
• الأصول الثابتة (صور، أصوات، خطوط): الكاش الأول. مش بتتغير كل يوم.
• البيانات المتغيرة: ماتخزنهاش أبدًا، أو خزّنها بمدة صلاحية قصيرة جدًا.

مشكلة التحديث — وهي اللي بتوجع

لما ترفع نسخة جديدة، الـService Worker القديم بيفضل مسيطر لحد ما الصفحات المفتوحة تتقفل. النتيجة: المستخدم مش شايف تحديثك وممكن يقولك «الموقع باظ».

الحل البسيط والفعّال:

1. حط رقم إصدار جوه ملف الـService Worker، وغيّره مع كل رفعة.
2. لما يكتشف نسخة جديدة، اعرض للمستخدم زرار «تحديث» بدل ما تجبره.
3. على الضغط، ابعته رسالة SKIP_WAITING واعمل reload.

ده بالظبط اللي عملته في تطبيق نور الصغار: كل رفعة برقم بناء جديد، والمستخدم بياخد التحديث لما يدوس بنفسه — مش فجأة في نص الاستخدام.

٣ اخطاء بتخلي التثبيت مش بيظهر

• مفيش HTTPS: شرط إجباري. محليًا localhost بيشتغل استثناء.
• الـmanifest مش مربوط: لازم وسم <link rel="manifest"> في الـhead.
• مفيش Service Worker بيسجّل: لازم سطر تسجيل في الجافاسكريبت، وإلا المتصفح مش هيعتبره تطبيق.

هل تستاهل؟

لو موقعك بيتزار من الموبايل أكتر من مرة — أيوه. الفرق في سرعة الفتح الأولى وانت راجع تاني كبير جدًا، خصوصًا على نت ضعيف. ولو الموقع فيه محتوى صوتي أو مرئي، القيمة بتتضاعف لأنك مش بتحمّله كل مرة.

ابدأ بالحاجات التلاتة دي بس، وشوف الفرق قبل ما تضيف أي تعقيد.