الهدف
بعد هالدرس عندك bottom navigation bar صحيح، تطبيقك يحترم safe area insets (notch و home indicator)، والـ keyboard ما يغطي الـ inputs.
ليش هذا الحين؟
Web app في Capacitor يبين web app — إلا لو ضفت هذي الأنماط. المستخدم يفتحه ويحس "هذا مو app حقيقي." هذي الأنماط الخمسة هي الفرق بين app يظل مثبّت و app ينحذف.
الفكرة
5 أنماط تخلي الـ app يبين native:
- Bottom Navigation — المستخدمين يتنقلون بالإبهام، مو بـ header links
- Safe Area Insets — محتواك ما يختبئ خلف الـ notch أو الـ home indicator
- Keyboard Awareness — الـ form ما يختبئ خلف الـ keyboard
- Pull to Refresh — تحديث البيانات بالسحب لتحت
- Swipe to Go Back — iOS يتوقع هذا — لو كسّرته المستخدم يزعل
Safe Area Insets:
iPhone 14+ عنده Dynamic Island بدل notch. iPhone SE ما عنده notch. Android أحجام مختلفة. الحل: env(safe-area-inset-*) CSS variable — iOS/Android يعبّيها تلقائيا بالقيمة الصح.