تطبيقات الويب التقدمية (PWA): إزاي تخلي تطبيقك يشتغل بدون إنترنت

تطبيقات الويب التقدمية (Progressive Web Apps أو PWA) غيّرت القاعدة القديمة اللي بتقول "التطبيق لازم يكون أما Native App أما Web App". PWA بيوفر أفضل العوالم: تجربة تطبيق أصلي مع إمكانية الوصول من المتصفح بدون تنزيل. في المقال ده هنتكلم عن الأساسيات التقنية لـ PWA، من Service Workers لاستراتيجيات التخزين المؤقت للإشعارات، كل حاجة من تجربة عملية مش من قراءة Documentation بس.

الأساس اللي عليه PWA مبني هو Service Worker. Service Worker ده ملف JavaScript بيعمل كـ Proxy بين التطبيق والشبكة. يعني لما التطبيق يطلب ملف أو بيانات، الطلب بيمر على Service Worker الأول، وهو اللي بيقرر: يجيبها من الشبكة ولا من الكاش ولا يعمل حاجة تانية. أهم حاجة عن Service Worker إنه بيشتغل في الخلفية حتى لو المتصفح مقفول — ده اللي بيخلي الإشعارات والتزامن في الخلفية ممكنة.

دورة حياة Service Worker ليها تلات مراحل: Install وActivate وFetch. في مرحلة Install، بتحصل على فرصة تحمّل الملفات الأساسية وتخزّنها في الكاش (ده اسمه Pre-caching). في مرحلة Activate، بتنظّف الكاش القديم من الإصدارات السابقة. وفي مرحلة Fetch، بتتعامل مع كل طلب شبكة وبتقرر إزاي ترد عليه. فهم الدورة دي مهم عشان مش عايز Service Worker يرد على طلبات بإصدار قديم من الكاش.

استراتيجيات التخزين المؤقت (Caching Strategies) هي جوهر PWA. مش كل الطلبات بتتعامل بنفس الطريقة — لازم تعرف إيه اللي يتخزّن وإيه اللي يتجيب من الشبكة أولًا. أهم الاستراتيجيات: Cache First (الكاش الأول وبعدين الشبكة — مناسب للملفات الثابتة زي الصور والخطوط)، Network First (الشبكة الأول وبعدين الكاش — مناسب للبيانات اللي بتتغير باستمرار)، Stale While Revalidate (اعرض الكاش واطلب من الشبكة في نفس الوقت — مناسب للمحتوى اللي مش مهم يكون أحدث حاجة).

المعمارية Offline-First هي الطريقة الصحيفة للتفكير في PWA. بدل ما تفكر "التطبيق يشتغل أونلاين وبس ممكن يشتغل أوفلاين"، فكر "التطبيق يشتغل أوفلاين وأول ما الشبكة ترجع يحدث البيانات". ده بيغيّر طريقة كتابة الكود بالكامل. بدل ما تعمل طلب شبكة وتستنى الرد، بتعرض البيانات المخزنة أولًا وبعدين بتحّدثها في الخلفية. ده بيدي تجربة مستخدم أسرع بكثير حتى لو الشبكة شغالة، لأن المستخدم مش بيشوف شاشة تحميل.

في مشروع إسمع راديو، تحويل التطبيق لـ PWA كان قرار مهم جدًا. المستخدمين بيستمعوا للراديو في أماكن كتير فيها شبكة ضعيفة أو مفيش شبكة خالص — في المترو، في السفر، في مناطق بعيدة. قبل PWA، لما الشبكة بتقطع، التطبيق كان بيبطل يشتغل خالص. بعد PWA، التطبيق بيستمر يشتغل ببيانات الكاش وبيحاول يعيد الاتصال في الخلفية. كمان أضفنا ميزة تنزيل المحطات المفضلة للاستماع أوفلاين — ده خدم مستخدمين كتير بيقولوا "أنا عايز أسمع راديو في المترو من غير نت".

Web App Manifest هو الملف اللي بيخلي المتصفح يتعامل مع تطبيقك كتطبيق أصلي. ده ملف JSON فيه اسم التطبيق وأيقونات وألوان واتجاه العرض. لما المستخدم يزور تطبيق PWA، المتصفح بيقترح عليه "إضافة للشاشة الرئيسية" — وده بيخلي التطبيق يظهر زي أي تطبيق Native على الموبايل بدون شريط المتصفح.

الإشعارات (Push Notifications) من أقوى ميزات PWA. تخيل تقدر تبعت إشعار للمستخدم من غير ما التطبيق يكون مفتوح — ده كان محصور بتطبيقات Native زمان. مع Push API وService Worker، بقى ممكن تبعت إشعارات حتى لو المتصفح مقفول. بس انتبه: الإشعارات لازم تكون مفيدة وقليلة، مش تزعج المستخدم. الإشعارات العشوائية بتخلي المستخدم يلغي الإذن وده بيخسرك الميزة كلها.

الخلفية (Background Sync) ميزة تانية مهمة في PWA. لما المستبيعمل حاجة محتاجة شبكة والشبكة مقطوعة، Background Sync بيحفظ العملية وبينتظر الشبكة ترجع وبعدين ينفذها تلقائيًا. مثال: المستخدم بيبعت تعليق والشبكة مقطوعة — التعليق بيتحفظ محليًا، وأول ما الشبكة ترجع، بيتحبعت من غير ما المستخدم يعمل حاجة. ده بيحل مشكلة شائعة جدًا خصوصًا في البلاد اللي فيها شبكات ضعيفة زي مصر.

من الأخطاء الشائعة اللي بشوفها: نسيان تحديث Service Worker لما بتنزل إصدار جديد. Service Worker القديم بيفضل شغال على المتصفح وبيرد من الكاش القديم. الحل إنك تغيّر اسم الكاش في كل إصدار جديد وتحذف الكاش القديم في مرحلة Activate. كمان مشكلة تانية هي عدم التعامل مع الحالة اللي الكاش يكون فيه فارغ والشبكة مقطوعة — لازم تعرض صفحة أو رسالة مناسبة مش خطأ أبيض.

نصيحتي لأي حد عايز يعمل تطبيقه PWA: ابدأ بالأساسيات — سجّل Service Worker واعمل Manifest واختبر التثبيت. بعدين أضف استراتيجيات الكاش المناسبة لنوع بياناتك. وبعدين فكّر في الإشعارات والـ Background Sync. مش لازم تعمل كل حاجة مرة واحدة — PWA زي الطبقات، كل طبقة بتضيف قيمة. والأهم: اختبر على أجهزة حقيقية خصوصًا على شبكات بطيئة لأن ده اللي هيبان الفرق الحقيقي.