كيف تبني تطبيق ويب مناسباً للهاتف

تطبيق الويب المناسب للهاتف هو موقع إلكتروني يعمل كتطبيق على الهاتف: يتناسب مع الشاشة الضيقة، وله أزرار لمسية كبيرة، ويُحمَّل بسرعة على بيانات الهاتف، ويمكن إضافته إلى الشاشة الرئيسية كتطبيق ويب تقدمي (PWA). بالنسبة لمعظم التطبيقات الجديدة، هذا هو الإصدار الأول العملي — قاعدة كود واحدة، ورابط واحد، دون مراجعة من متجر. لكن له حدوداً حقيقية، خاصة فيما يتعلق بالإشعارات على آيفون والوصول العميق إلى إمكانات الجهاز، وهذا الدليل واضح بشأن متى تحتاج إلى تطبيق أصلي بدلاً منه.

ثلاث طرق لتكون "على الهاتف"

تطبيق PWA هو تطبيق ويب متجاوب مع بعض الإضافات، لذلك لا تحتاج إلى الاختيار بين الطريقتين الأوليين. ابنِ نسخة متجاوبة أولاً، ثم اجعلها قابلة للتثبيت. لمقارنة أعمق راجع التطبيقات الأصلية مقابل تطبيقات الويب التقدمية.

ما الذي يستطيع تطبيق الويب فعله على الهاتف وما الذي لا يستطيعه

المتصفحات تستطيع أكثر مما يظن كثيرون:

• الكاميرا ورفع الصور، عبر حقول الملفات القياسية.
• الموقع، بإذن من المستخدم.
• التثبيت على الشاشة الرئيسية مع أيقونة وتشغيل بملء الشاشة.
• الاستخدام دون اتصال، عبر تخزين الصفحات والبيانات مؤقتاً باستخدام service worker (سكربت يعمل في الخلفية للمتصفح من أجل موقعك).
• الإشعارات الفورية — مع تحفظ على آيفون. يقول فريق WebKit في Apple إن إشعارات الويب وصلت إلى iOS وiPadOS 16.4 لتطبيقات الويب المضافة إلى الشاشة الرئيسية. يجب على المستخدمين تثبيت التطبيق أولاً، ثم السماح بالإشعارات.

وأما ما يبقى الأصلي فيه متفوقاً:

• ميزات الجهاز العميقة مثل الموقع في الخلفية، وملحقات البلوتوث، وبيانات الصحة، والأدوات على الشاشة الرئيسية — الدعم في المتصفح محدود أو يختلف من منصة إلى أخرى.
• الاكتشاف عبر متجر التطبيقات. إذا كان الناس سيبحثون عنك في المتجر، فيجب أن تكون فيه.
• العمل الثقيل دون اتصال، مثل مزامنة مجموعات بيانات كبيرة في الخلفية.
• الرسوميات الحساسة للأداء، مثل الألعاب المتطلبة.

إذا لم تكن أي من هذه الأمور محورية في تطبيقك، فمن المرجح أن يخدمك تطبيق ويب جيداً.

التصميم للهاتف أولاً

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

التخطيط

• عمود واحد على الشاشات الصغيرة. تتحول الأشرطة الجانبية إلى شريط سفلي أو قائمة.
• لا تمرير أفقي. الجداول العريضة تتحول إلى بطاقات، أو تُمرَّر داخل حاوية خاصة بها.
• نص قابل للقراءة دون تكبير — نص الجسم بحجم 16 بكسل تقريباً.

اللمس

• أهداف نقر كبيرة. حوالي 44 في 44 بكسل حد أدنى شائع. اترك مسافة بينها.
• الإجراءات الأساسية في متناول الإبهام، قرب أسفل الشاشة على الهواتف الطويلة.
• لا ميزات تعتمد على التمرير بالمؤشر فقط. التلميحات والقوائم التي تظهر عند التمرير لا وجود لها على شاشات اللمس.
• لوحة المفاتيح المناسبة. حقول البريد الإلكتروني يجب أن تفتح لوحة البريد، وحقول الهاتف لوحة الأرقام. اطلب أنواع الإدخال الصحيحة.

السرعة

• صور صغيرة بأحجام معقولة، تُحمَّل عند ظهورها في الشاشة.
• مكتبات ثقيلة أقل. كل مكتبة تضيف وقت تنزيل على بيانات الهاتف.
• شاشات هيكلية أو حالات تحميل واضحة، حتى لا يبدو التطبيق متجمداً أبداً.

المناطق الآمنة وشريط العنوان

على الهواتف الحديثة، قد يقع المحتوى تحت الفتحة العلوية أو مؤشر الشاشة الرئيسية، خاصة في التطبيق المثبت بملء الشاشة. اطلب حشوة المنطقة الآمنة (safe-area padding). وانتبه أيضاً إلى التخطيطات الممتدة بارتفاع الشاشة كاملاً، التي تقفز عند ظهور شريط عنوان المتصفح واختفائه.

جعله قابلاً للتثبيت (PWA)

لكي يكون تطبيق الويب قابلاً للتثبيت، يحتاج إلى:

1. ملف manifest للتطبيق — ملف صغير يحوي اسم التطبيق والاسم المختصر والأيقونات ولون الواجهة وطريقة فتحه (عادة بملء الشاشة "standalone").
2. أيقونات بالأحجام التي تتوقعها المنصات، بما في ذلك واحدة مناسبة لأجهزة Apple.
3. HTTPS، وهو ما يملكه أي تطبيق مستضاف بشكل صحيح.
4. service worker إذا أردت دعم الاستخدام دون اتصال أو الإشعارات الفورية.

ثم أخبر المستخدمين كيف يثبتونه. متصفحات أندرويد تعرض عادة نافذة التثبيت أو عنصر في القائمة؛ وعلى آيفون يكون الزر هو زر المشاركة، ثم "إضافة إلى الشاشة الرئيسية". ملاحظة قصيرة بعنوان "ثبّت هذا التطبيق" مع هذه الخطوات تساعد كثيراً.

دعم الاستخدام دون اتصال هو المكان الذي تصبح فيه تطبيقات PWA معقدة. تخزين صفحات التطبيق مؤقتاً ليُفتح دون اتصال أمر مباشر. أما السماح للناس بتعديل البيانات دون اتصال ثم مزامنتها لاحقاً فهو عمل حقيقي — اطلبه فقط إذا كان مستخدموك يحتاجونه فعلاً.

توجيه أولي يعمل

ابنِ تطبيق ويب لفريق التنظيف لدينا ليرى مهام اليوم ويضع علامة "تم" عليها. صمم للهاتف أولاً: عمود واحد، وأهداف لمس كبيرة، وزر الإجراء الرئيسي ثابت قرب الأسفل، وبلا عناصر تحكم تعتمد على التمرير بالمؤشر، وبلا تمرير أفقي، ولوحات مفاتيح صحيحة لحقول الهاتف والبريد الإلكتروني. كل مهمة تعرض العنوان (اضغط لفتحه في الخرائط)، وهاتف العميل (اضغط للاتصال)، وقائمة مراجعة، وزر "وضع علامة مكتمل" يمكنه التقاط صورة. يسجل المديرون الدخول من الحاسوب المحمول لتعيين المهام؛ وعلى الشاشات العريضة اعرض جدولاً بدلاً من البطاقات. اجعله تطبيق PWA قابلاً للتثبيت مع ملف manifest وأيقونات وعرض مستقل (standalone)، وخزّن هيكل التطبيق مؤقتاً ليُفتح دون إشارة. احفظ البيانات في قاعدة بيانات.

خطوات البناء

1. ابنِ تخطيط الهاتف أولاً، ببيانات تجريبية، وتحقق منه في معاينة بحجم الهاتف.
2. اختبر على هواتف حقيقية — آيفون وأندرويد على الأقل إذا كان مستخدموك يستخدمون الاثنين. المحاكيات تفوّت أشياء مثل لوحة المفاتيح التي تغطي الحقول.
3. جرّب المهمة الرئيسية بإبهام واحد. إذا احتاج أي شيء إلى يدين أو إلى تكبير، فأصلحه.
4. أضف ملف manifest والأيقونات، ثم ثبّته على المنصتين وتحقق من الأيقونة والاسم وشاشة الترحيب.
5. قرر بشأن الاستخدام دون اتصال. ابدأ بـ "يُفتح دون إشارة ويعرض رسالة واضحة"؛ وأضف التحرير دون اتصال فقط إذا لزم الأمر.
6. تحقق من السرعة على اتصال بطيء. أدوات المطور في متصفحك تستطيع محاكاته.
7. أضف الإشعارات في الأخير، إن أضفتها أصلاً — وخطط لبديل عبر البريد الإلكتروني للمستخدمين الذين لا يثبتون التطبيق.

أخطاء شائعة

• التصميم على شاشة كبيرة فقط. تحقق من كل شاشة بعرض الهاتف أثناء العمل.
• جداول تفيض عن حدودها. حوّل الصفوف إلى بطاقات على الشاشات الصغيرة.
• أهداف نقر صغيرة وروابط متقاربة.
• نماذج تتعارض مع لوحة المفاتيح — أنواع إدخال خاطئة، وحقول مخفية خلف لوحة المفاتيح، وغياب تدفق "التالي".
• افتراض أن إشعارات آيفون تعمل في تبويب المتصفح. تحتاج إلى تثبيت التطبيق على الشاشة الرئيسية.
• وعد بتطبيق في App Store لا تستطيع تسليمه. إذا كان المتجر مهماً، فخطط له بشكل منفصل.
• تغليف موقع وتسميته تطبيقاً. إرشادات مراجعة تطبيقات Apple تطلب تطبيقات تتجاوز الموقع المعاد تغليفه؛ والغلاف الرقيق معرّض للرفض.

متى تحتاج إلى تطبيق أصلي

اتجه إلى التطبيق الأصلي (أو خطط لنسخة أصلية بعد تطبيق الويب) عندما:

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

للنشر في المتاجر تكاليفه وخطواته الخاصة. حتى سبتمبر 2026، يكلّف برنامج المطورين لدى Apple 99 دولاراً أمريكياً سنوياً، وحساب مطور Google Play مرة واحدة 25 دولاراً أمريكياً، وفقاً لمواقعهما الرسمية، وكل إصدار يمر بالمراجعة. كثير من الفرق تبدأ بتطبيق ويب مناسب للهاتف لإثبات أن الناس يريدون المنتج، ثم تستثمر في الأصلي بعد أن تعرف. يغطي كيف تبني تطبيقاً بالذكاء الاصطناعي هذه المرحلة الأولى من البداية إلى النهاية.

البناء مع Mythex

يبني Mythex تطبيقات ويب: تصف التطبيق في المحادثة، وتتحقق منه في المعاينة الحية على سطح المكتب، وفي إطار بحجم الهاتف يمكنك تغيير حجمه. تحتوي الوثائق على توجيه متجاوب للجوال لإصلاح التخطيطات على الشاشات الصغيرة. يمكنك طلب ملف manifest للـ PWA وأيقونات كأي ميزة أخرى، ثم النشر على رابط عام يعمل على أي هاتف. وفي خطة Pro، يمكن لـ Mythex أيضاً تغليف التطبيق كتطبيق لأندرويد وآيفون، يُرسل إلى الاختبار الداخلي في Google Play وإلى TestFlight. راجع أداة إنشاء تطبيقات الويب بالذكاء الاصطناعي أو تصفح قوالب التطبيقات للبدء. ولمثال عملي، اقرأ كيف تبني تطبيق متتبع العادات.

الأسئلة