الهدف
بعد هالدرس تعرف 5 فروق حقيقية بين الـ web والـ mobile، وتعرف ليش Capacitor هو الخيار الصح لك، وتعرف وين حدوده قبل ما تبدأ تكتب كود.
ليش هذا الحين؟
وصلت للمحور اللي كل اللي قبله كان يبني له.
مواصفات المنتج (PRD) اللي كتبتها بالمحور 2 كانت لتطبيق موبايل. والـ web app اللي بنيته بالمحور 5 ما كان منتج منفصل — كان المحرّك: قاعدة البيانات، الـ auth، وواجهة برمجة التطبيقات (API). المحور هذا ياخذ المحرّك ويحطه بجيب المستخدم.
بس أكو غلطة يقع فيها كل واحد بهالنقطة: يفكر إن الـ mobile = web بس على شاشة أصغر. هالتفكير يكلفك أسابيع من إعادة الكتابة. الدرس هذا يوفّر عليك هالأسابيع — تتعلمه مرة وحدة قبل ما تلمس Capacitor.
قبل ما تكمّل، افتح الـ PRD مالك. راح تحتاجه بخطوة 3 لما نطلّع قائمة الـ native APIs.
الفكرة
الفرق الأول: اللمس مقابل الماوس
الـ web مصمّم للماوس — hover states، right-click، precision clicks. الـ mobile يشتغل بالأصابع. الإصبع دقته ±10px وما عنده hover. كل زر لازم يكون ≥44px، كل تفاعل يحتاج visual feedback فوري.
الفرق الثاني: Offline-first مقابل Always-on
الـ web يفترض إن عندك إنترنت. الـ mobile يشتغل في مترو، مصعد، صحراء. تطبيقك لازم يشتغل بدون إنترنت أو على الأقل يفشل بطريقة محترمة.
الفرق الثالث: App Lifecycle
الـ web ما عنده lifecycle — الصفحة تفتح وتقفل. الـ mobile عنده 3 حالات: foreground (الـ app مفتوح ويشتغل)، background (الـ app مخفي بس ما انقفل)، killed (الـ app وقف تماما). كودك لازم يتعامل مع الانتقال بين هذي الحالات — تحفظ state قبل الـ background، تتحقق من updates لما يرجع للـ foreground.
الفرق الرابع: Native Device APIs
الـ web ما يوصل لـ Camera بنفس الطريقة، ولا GPS بدقة عالية، ولا push notifications حقيقية، ولا Face ID. الـ mobile يعطيك كل هذا عبر plugins.
الفرق الخامس: Distribution
الـ web تنزّله على سيرفر وخلاص. الـ mobile يمر على App Store Review و Google Play Review — عملية تاخذ من 24 ساعة لـ 7 أيام وممكن ينرفض. هذا يغير كيف تخطط للـ releases.
ليش Capacitor؟
Capacitor ياخذ web app مكتوب بـ React/Next.js ويحوّله لـ .ipa (iOS) و .apk/.aab (Android) حقيقيين. مو WebView wrapper رخيص — هو native shell يحمّل web app ويعطيه وصول لكل الـ native APIs عبر plugins رسمية من Ionic.
ما تحتاج تتعلم Swift ولا Kotlin. نفس كودك، نفس مكتباتك، نتيجة native.
وين حدود Capacitor؟
الأشياء اللي Capacitor ما يكملها بشكل مريح:
- Heavy 3D graphics أو AR (استخدم Unity أو RealityKit)
- Bluetooth Low Energy معقد (community plugins موجودة بس unstable)
- تطبيقات تحتاج 120fps smooth animation في كل شاشة (React Native أفضل هنا)
- Background processing مكثف (audio streaming، GPS tracking المستمر)
لو تطبيقك مو في هذي القائمة — وغالبا مو — Capacitor هو الطريق.