تصميم التطبيقات

يركز هذا الفصل على بعض الجوانب المهمة لعرض المحتوى خارج علامة التبويب في المتصفّح.

النافذة

تختلف أنظمة التشغيل المختلفة في تعريفها لنافذة التطبيق. على سبيل المثال، على هواتف iPhone، يشغل التطبيق دائمًا 100% من الشاشة. على أجهزة Android وأجهزة iPad، يتم عادةً تشغيل التطبيقات على الشاشة الكاملة، ولكن يمكن مشاركة الشاشة بين تطبيقَين، مع العلم أنّه لا يمكن فتح سوى نسخة واحدة من التطبيق في المرة الواحدة. في المقابل، على جهاز كمبيوتر مكتبي، يمكن أن يكون للتطبيق أكثر من نسخة مفتوحة في الوقت نفسه. ويشارك المساحة المتوفّرة على الشاشة مع جميع التطبيقات المفتوحة الأخرى. يمكن تغيير حجم كل مثيل من التطبيق ووضعه في أي مكان على الشاشة، حتى لو كان ذلك يتداخل مع التطبيقات الأخرى.

الرمز

نتعرّف على التطبيقات من خلال رموزها. يظهر هذا الرمز عند البحث عن التطبيقات، وفي الإعدادات، وفي أي مكان يتم فيه تشغيل التطبيقات، وحيث تظهر التطبيقات التي تعمل.

ومن بينها:

  • الشاشة الرئيسية (iOS وiPadOS وAndroid)
  • مشغّل التطبيقات (macOS وAndroid)
  • قائمة التطبيقات أو قائمة البدء (Windows وChromeOS وLinux)
  • شريط التطبيقات أو لوحات المهام المتعددة (جميع أنظمة التشغيل)

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

رموز التطبيقات المتوافقة مع الأجهزة الجوّالة (PWA) بأشكال مختلفة لأنظمة التشغيل المختلفة

تطبيق المظهر على تطبيقك

هناك عدد من الطرق التي يمكنك من خلالها تخصيص تصميم التطبيق في تطبيقات الويب التقدّمية، بما في ذلك:

  • لون المظهر: يحدِّد لون شريط عنوان النافذة على الكمبيوتر المكتبي ولون شريط الحالة على الأجهزة الجوّالة. باستخدام علامة وصفية، يمكنك الحصول على خيارات لتصاميم مختلفة، مثل الوضع الداكن أو الفاتح، وسيتم استخدامها استنادًا إلى الإعدادات المفضّلة للمستخدم.
  • لون الخلفية: يحدِّد لون النافذة قبل تحميل التطبيق وملفهّ CSS.
  • اللون المميّز: يحدِّد لون مكوّنات المتصفّح المضمّنة، مثل عناصر التحكّم في النماذج.
تطبيق متوافق مع الأجهزة المكتبية مزوّد بتطبيقات متقدّمة تعمل على الإنترنت يعرض المظهر والألوان المميّزة، وشاشة البداية لتطبيق متوافق مع الأجهزة الجوّالة مزوّد بتطبيقات متقدّمة تعمل على الإنترنت يعرض المظهر وألوان الخلفية
تطبيق متوافق مع الأجهزة المكتبية مزوّد بتطبيقات مُدمجة تعمل بلا إنترنت يعرض الألوان الأساسية والمميزة، وشاشة البداية لتطبيق متوافق مع الأجهزة الجوّالة مزوّد بتطبيقات مُدمجة تعمل بلا إنترنت يعرض الألوان الأساسية والخلفية.

أوضاع العرض

يمكنك تحديد نوع تجربة النافذة التي تريدها لتطبيقك الويب التقدّمي. تتوفّر ثلاثة خيارات للاختيار من بينها:

  • ملء الشاشة
  • نظام تدفئة مستقل
  • واجهة مستخدم بسيطة

يمكنك أيضًا استخدام منطقة شريط العناوين بجانب عناصر التحكّم في النوافذ لجعل تطبيق الويب التقدّمي يبدو أكثر مثل تطبيق باستخدام وضع العرض المتقدّم المُسمى "طريقة عرض عناصر التحكّم في النوافذ". اطّلِع على تخصيص طريقة عرض عناصر التحكّم في النوافذ على شريط العناوين في تطبيق الويب التقدّمي (PWA).

تجربة ملء الشاشة

تكون تجربة ملء الشاشة مناسبة للتجارب الغامرة، مثل الألعاب أو تجارب الواقع الافتراضي أو الواقع المعزّز. تتوفّر هذه الميزة حاليًا على أجهزة Android فقط، وهي تحجب شريط الحالة وشريط التنقّل، ما يمنح تطبيقك المتوافق مع الأجهزة الجوّالة على الويب نسبة% 100 من الشاشة لعرض المحتوى.

لا تتوفّر التطبيقات المتوافقة مع الأجهزة الجوّالة على الويب (PWAs) بملء الشاشة على أجهزة الكمبيوتر المكتبي ونظام التشغيل iPadOS، ولكن يمكنك استخدام واجهة برمجة التطبيقات Fullscreen API من داخل تطبيقك المتوافق مع الأجهزة الجوّالة على الويب لعرض تطبيقك بملء الشاشة بناءً على طلب المستخدم.

تجربة مستقلة

يُعدّ الوضع المستقل الخيار الأكثر شيوعًا لتطبيقات الويب التقدّمية، ويعرض تطبيقك في نافذة عادية لنظام التشغيل بدون أي واجهة مستخدم لتنقّل المتصفّح. قد تتضمّن النافذة أيضًا قائمة يتم التحكّم فيها من خلال المتصفّح يمكن للمستخدم من خلالها إجراء ما يلي:

  • انسخ عنوان URL الحالي.
  • الاطّلاع على إضافات المتصفّح أو تطبيقها أو إيقافها
  • الاطّلاع على الأذونات وتغييرها
  • تحقَّق من المصدر الحالي وشهادة طبقة المقابس الآمنة.

قد يعرض شريط العنوان أيضًا الأذونات واستخدام الأجهزة بدلاً من مربّع العرض الشامل أو شريط عناوين URL عند عرض تطبيق الويب المتوافق مع الأجهزة الجوّالة في علامة التبويب.

تطبيق متوافق مع الويب تم تثبيته باستخدام Microsoft Edge على كمبيوتر مكتبي يعرض قائمته تطبيق متوافق مع الويب تم تثبيته باستخدام Google Chrome على كمبيوتر مكتبي يعرض القائمة المنسدلة ورمز المكوّنات الإضافية
تعرض الصور أعلاه كيفية عرض تطبيق الويب التقدّمي (PWA) في الوضع المستقل على الكمبيوتر المكتبي في Microsoft Edge وChrome.

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

جهاز iOS يعرض تطبيقًا مستقلاً

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

إشعار Android معروض من Chrome يعرض بعض الإجراءات على تطبيق الويب التقدّمي (PWA) النشط الحالي

واجهة مستخدم بسيطة

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

على أجهزة Android، سيظهر لك شريط عنوان يعرض عنصر <title> الحالي ومصدره مع قائمة منسدلة صغيرة متاحة. على أجهزة الكمبيوتر المكتبي، ستظهر لك مجموعة من الأزرار في شريط العنوان للمساعدة في التنقّل، بما في ذلك زر الرجوع وعنصر تحكّم يتبدّل بين إجراء الإيقاف وإعادة التحميل استنادًا إلى حالة التحميل الحالية.

واجهة مستخدم مصغّرة على الكمبيوتر المكتبي على Microsoft Edge مع زرَّي الرجوع وإعادة التحميل
على نظام التشغيل Android، تستخدم المتصفّحات شريط تنقّل مخصّص للقراءة فقط بتصميم بسيط، مثل Firefox وChrome.

تحسين التصميم لأجهزة الكمبيوتر المكتبي

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

في الفصل 3، ذكرنا الوضع المصغّر: يمكن أن يكون حجم تطبيق سطح المكتب صغيرًا بقدر 200 x ‏100 بكسل. ستستخدم هذه النافذة محتوى عنصر <title> في ملف HTML كعنوان للنافذة. ويتم عرض هذا المحتوى أيضًا عند استخدام مفتاح Alt-Tab بين التطبيقات وفي أماكن أخرى.

انتبِه إلى عنصر <title> في HTML وأعِد النظر في طريقة استخدامه. لا يُستخدَم <title> فقط لتحسين محركات البحث أو لعرض الأحرف الأولى فقط في علامة تبويب المتصفّح، بل سيكون جزءًا من تجربة المستخدم في نافذة سطح المكتب المستقلة.

أفضل الممارسات المتعلّقة بلغة CSS

تكون كل خبرتك في تنسيق CSS وتصميمه ورسومه المتحركة صالحة عند عرض المحتوى في تجربته المستقلة. ومع ذلك، هناك بعض النصائح والحيل لتحسين تجربة استخدام النافذة المستقلة.

طلبات الوسائط

أوّل طلب بحث عن الوسائط يمكنك الاستفادة منه في تطبيق الويب التقدّمي هو السمة display-mode التي تقبل القيم browser أو standalone أو minimal-ui أو fullscreen.

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

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

تجربة استخدام التطبيق

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

اختيار المستخدم

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

تطبيق متوافق مع الأجهزة الجوّالة يعمل على الإنترنت لحساب العمليات الحسابية يمكنك من خلاله اختيار كل زر تفاعلي، مثل الأرقام.

لذلك، ننصحك بإيقاف اختيار المستخدم لهذه العناصر باستخدام user-select: none وإصدار البادئة -webkit-:

.unselectable {
   user-select: none;
}

لون التَشدِيد

في تطبيقك المتوافق مع الأجهزة الجوّالة (PWA)، يمكنك تحديد لون يناسب علامتك التجارية ضمن عناصر التحكّم في نماذج HTML باستخدام السمة accent-color.

خطوط النظام

إذا كنت تريد أن يتطابق عنصر معيّن، مثل مربّعات الحوار أو الرسائل، مع خط النظام الأساسي التلقائي للمستخدم، يمكنك استخدام مجموعة الخطوط التالية:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

اسحب للأسفل لإعادة التحميل.

تتضمّن متصفّحات الأجهزة الجوّالة الحديثة، مثل Google Chrome وSafari، ميزة تؤدي إلى إعادة تحميل الصفحة عند سحبها للأسفل. في بعض المتصفّحات، مثل Chrome على Android، يتم أيضًا تفعيل هذا السلوك في التطبيقات المتوافقة مع الأجهزة الجوّالة التي تعمل بلا إنترنت.

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

من الممكن إيقاف هذا السلوك باستخدام overscroll-behavior-y: contain:.

  body {
    overscroll-behavior-y: contain;
  }

المناطق الآمنة

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

في أعلى الشاشة، جهاز مزوّد بشاشة مثقوبة في الوضع الأفقي مع إطار عرض عادي يعرض مساحات لم يتم عرضها على الجانبين. في أسفل الشاشة، جهاز يتيح الوصول إلى إطار العرض بالكامل بفضل viewport-fit=cover.

إذا كنت تريد الوصول الكامل إلى الشاشة، حتى المنطقة غير المرئية، لعرض اللون أو الصورة، أدرِج viewport-fit=cover في محتوى علامة <meta name="viewport">. بعد ذلك، استخدِم متغيّرات بيئة safe-area-inset-* لتوسيع نطاق وصول المحتوى الخاص بك بأمان إلى هذه المناطق.

الموارد