تطبيقات الويب التقدمية: من المتصفح لشاشة الهاتف

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

أول حاجة عملتها كانت في إسمع راديو. التطبيق ده بيتستخدم أساسًا على الموبايل — الناس بتسمع راديو وهي راكبة أو في الجيم أو بتمشي. فكان منطقي إني أخليه يشتغل كتطبيق قابل للتثبيت. بدأت بملف manifest.json اللي بيوفر للمتصفح كل المعلومات اللي محتاجها: اسم التطبيق، الأيقونات بأحجام مختلفة، لون الثيم، واتجاه الشاشة. لما المستخدم بيدخل الموقع أول مرة، المتصفح بيقترح عليه يثبت التطبيق على شاشة الهاتف. نسبة التثبيت كانت حوالي 30٪ من المستخدمين — رقم محترم قوي.

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

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

في تطبيق الطقس، التحدي كان مختلف. بيانات الطقس بتتغير كل ساعة تقريبًا، فاستراتيجية Caching لازم تكون ذكية. استخدمت Stale-While-Revalidate — يعني أعرض البيانات القديمة من الـ Cache فورًا، وفي نفس الوقت بطلب البيانات الجديدة من الإنترنت. لما البيانات الجديدة توصل، بأحدث الشاشة. ده بيدي إحساس بالسرعة لأن المستخدم بيشوف حاجة فورًا، وفي نفس الوقت البيانات بتكون أحدث ما يمكن.

أكبر مشكلة واجهتها كانت تحديث الـ Service Worker نفسه. لما بنزّع نسخة جديدة من التطبيق، الـ Service Worker القديم بيستمر يشتغل حتى المستخدم يقفل كل التبويبات ويفتح التطبيق تاني. ده معناه إن المستخدم ممكن يفضل يشوف النسخة القديمة لأيام! الحل كان إني أستخدم skipWaiting وclientsClaim عشان الـ Service Worker الجديد يشتغل فورًا. بس ده بيجيب مشكلة تانية — لو كان في طلب جاري شغال، ممكن يتقاطع مع الـ Cache الجديد. عشان كده بعرض رسالة "تحديث متاح — اضغط هنا للتحديث" بدل ما أجبر المستخدم على التحديث.

تجربة التثبيت (Install Prompt) كانت نقطة مهمة. المتصفح بيقترح التثبيت تلقائيًا بس ده بيحصل في وقت مش مثالي أحيانًا. استخدمت الحدث beforeinstallprompt عشان أتدخل وأعرض رسالة تثبيت مخصصة في الوقت المناسب — مثلاً بعد ما المستخدم يسمع راديو لمدة 5 دقائق، أعرض له "ثبّت إسمع راديو على هاتفك للوصول السريع". الرسالة المخصصة دي زادت نسبة التثبيت بنسبة 40٪ مقارنة بالاقتراح الافتراضي من المتصفح.

الفروق بين PWA والتطبيقات الأصلية لسه موجودة — مفيش وصول كامل لكل APIs بتاعة النظام، والأداء مش زي التطبيق الأصلي بالضبط. بس للمستخدم العربي اللي أغلب استخدامه على الموبايل، PWA بتوفر تجربة ممتازة بدون ما يحتاج يحمل تطبيق من المتجر. في إسمع راديو، 60٪ من الاستخدام بيكون من الموبايل، وPWA خلت التجربة أقرب كتير لتطبيق أصلي.

نصيحتي لأي حد عايز يضيف PWA لتطبيقه: ابدأ بالأساسيات — manifest.json وService Worker بسيط يخزن الملفات الثابتة. بعدين ضيف استراتيجيات Caching متقدمة تدريجيًا. متحاولش تعمل كل حاجة مرة واحدة. واختبر على أجهزة حقيقية — المحاكي مش بيمثل تجربة المستخدم الحقيقي. كمان اهتم بتجربة التثبيت — الرسالة المخصصة بتفرق جدًا.