يركز هذا الفصل على بعض الجوانب المهمة لعرض المحتوى خارج علامة تبويب المتصفح.
النافذة
تختلف ماهية نافذة التطبيق في أنظمة التشغيل المختلفة. على سبيل المثال، في هواتف iPhone، يشغل التطبيق دائمًا 100% من الشاشة. على أجهزة Android وiPad، عادةً ما يتم تشغيل التطبيقات في وضع ملء الشاشة ولكن من الممكن مشاركة الشاشة بين تطبيقين، ولكن لا يتم فتح سوى مثيل تطبيق واحد في كل مرة. وفي المقابل، على جهاز سطح المكتب، يمكن أن يحتوي تطبيق على أكثر من مثيل مفتوح في وقت واحد. فهي تشارك خصائص الشاشة المتاحة مع جميع التطبيقات المفتوحة الأخرى. يمكن تغيير حجم كل مثيل تطبيق ووضعه في أي مكان على الشاشة، حتى تداخل التطبيقات الأخرى.
الرمز
نتعرّف على التطبيقات من خلال رمزها. يظهر هذا الرمز عند البحث عن التطبيقات، وفي الإعدادات، وأين يتم تشغيل التطبيقات، وأين ترى التطبيقات قيد التشغيل.
وتشمل هذه المعلومات ما يلي:
- الشاشة الرئيسية (iOS وiPadOS وAndroid).
- مشغّل التطبيقات (لنظام التشغيل macOS وAndroid).
- قائمة "ابدأ" أو قائمة التطبيق (في أنظمة التشغيل Windows أو ChromeOS أو Linux).
- اللوحات في قاعدة الإرساء أو شريط المهام أو المهام المتعددة (جميع أنظمة التشغيل).
عند إنشاء رمز تطبيق الويب التقدّمي الخاص بك، تأكَّد من أنّ رمزه لا يتوافق مع نظام التشغيل الأساسي، لأنّ كل نظام تشغيل يمكنه عرض الرموز وتطبيق أقنعة أشكال مختلفة عليها، مثل تلك الظاهرة في الصورة أدناه.
تخصيص جنس التطبيق
هناك عدة طرق يمكنك من خلالها تخصيص تصميم التطبيق في تطبيق الويب التقدّمي (PWA)، بما في ذلك:
- لون المظهر: لتحديد لون شريط عناوين النافذة على سطح المكتب ولون شريط الحالة على الأجهزة الجوّالة. باستخدام علامة وصفية، قد تتوفر لك خيارات لمخطّطات مختلفة، مثل الوضع الداكن أو الفاتح، وسيتم استخدام هذه الخيارات بناءً على ما يفضّله المستخدم.
- لون الخلفية: يحدّد لون النافذة قبل تحميل التطبيق وCSS الخاص به.
- لون التمييز: يحدّد لون مكوّنات المتصفّح المضمَّنة، مثل عناصر التحكّم في النموذج.
أوضاع العرض
يمكنك تحديد نوع تجربة النافذة التي تريدها لتطبيق الويب التقدّمي الخاص بك. تتوفّر ثلاثة خيارات للاختيار من بينها:
- ملء الشاشة
- نظام تدفئة مستقل
- الحد الأدنى من واجهة المستخدم
تجربة وضع ملء الشاشة
تناسب تجربة ملء الشاشة للتجارب الغامرة، مثل تجارب الألعاب أو الواقع الافتراضي أو الواقع المعزّز. ويتوفّر هذا البرنامج حاليًا على أجهزة Android فقط، وهو يخفي شريط الحالة وشريط التنقل، ما يمنح تطبيق الويب التقدّمي تطبيق الويب التقدّمي (PWA) على كامل شاشة المحتوى الخاص بك.
لا يمكن استخدام تطبيقات الويب التقدّمية (PWA) بملء الشاشة على أجهزة الكمبيوتر المكتبي وأجهزة iPadOS. ومع ذلك، يمكنك استخدام واجهة برمجة التطبيقات بملء الشاشة من داخل تطبيق الويب التقدّمي (PWA) لعرض تطبيقك في وضع ملء الشاشة بناءً على طلب المستخدم.
تجربة مستقلة
يعرض الوضع المستقل تطبيق الويب التقدّمي (PWA) في نافذة متوافقة مع معايير نظام التشغيل بدون أي واجهة مستخدم للتنقُّل في المتصفّح، وهو الخيار الأكثر شيوعًا لتطبيق الويب التقدّمي. قد تتضمّن النافذة أيضًا قائمة يتحكّم فيها المتصفِّح ويمكن للمستخدم إجراء ما يلي:
- انسخ عنوان URL الحالي.
- الاطّلاع على إضافات المتصفّح أو تطبيقها أو إيقافها
- الاطّلاع على الأذونات وتغييرها
- تحقَّق من المصدر الحالي وشهادة طبقة المقابس الآمنة (SSL).
قد يعرض شريط العناوين أيضًا الأذونات واستخدام الأجهزة بدلاً من المربّع المتعدد الاستخدامات أو شريط عنوان URL عند عرض تطبيق الويب التقدّمي (PWA) في علامة التبويب.
على الأجهزة الجوّالة، ستنشئ تجربة PWA مستقلة شاشة عادية تحافظ على ظهور شريط الحالة، كي يظل بإمكان المستخدم الاطّلاع على الإشعارات والوقت ومستوى البطارية. ولا يتضمّن في أغلب الأحيان أي قائمة يتحكّم فيها المتصفِّح مثل تجارب سطح المكتب المستقلة التي قد تتضمنها.
تنشئ بعض المتصفّحات على نظام التشغيل Android إشعارًا ثابتًا وصامتًا عندما يكون تطبيق الويب التقدّمي (PWA) في المقدّمة يتيح للمستخدم نسخ عنوان URL الحالي أو خيارات أخرى.
الحد الأدنى من واجهة المستخدم
يتوفّر هذا الوضع لتطبيقات الويب التقدّمية على أنظمة التشغيل Android وأجهزة الكمبيوتر المكتبي. وعند استخدامه، سيعرض المتصفِّح الذي يعرض تطبيق الويب التقدّمي (PWA) حدًا أدنى من واجهة المستخدم لمساعدة المستخدم في التنقّل داخل التطبيق.
على نظام التشغيل Android، سيظهر لك شريط عناوين يعرض عنصر <title> الحالي والأصل مع قائمة منسدلة صغيرة متوفّرة. على الكمبيوتر المكتبي، ستظهر لك مجموعة من الأزرار في شريط العناوين لمساعدتك في التنقّل، بما في ذلك زر الرجوع وعنصر تحكّم للتبديل بين إجراء إيقاف وعملية إعادة تحميل، استنادًا إلى حالة التحميل الحالية.
تحسين التصميم لسطح المكتب
عند تصميم تطبيق ويب تقدّمي للعمل على كمبيوتر مكتبي، عليك التفكير في الاحتمالات اللانهائية لحجم النافذة مقارنةً بالظهور في علامة تبويب المتصفح أو كتطبيق في نظام تشغيل للأجهزة الجوّالة.
أشرنا في الفصل 3 إلى الوضع المصغَّر: يمكن أن يكون حجم تطبيق سطح المكتب صغيرًا بحجم 200 × 100 بكسل. ستستخدم هذه النافذة محتوى العنصر <title> في ترميز HTML كعنوان للنافذة. يتم عرض هذا المحتوى أيضًا عند مفتاح التبويب (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) {
}
تجربة التطبيق
عندما يستخدم المستخدمون تطبيق ويب تقدّميًا (PWA)، يتوقّعون حدوث سلوك على التطبيق. ليس من السهل تحديد معنى ذلك، إلا أنّ سلوك الويب التلقائي لا يمنحك أفضل تجربة في بعض الحالات.
اختيار المستخدم
يمكن بشكل عام اختيار المحتوى باستخدام الماوس أو المؤشر، أو بإيماءة الضغط مع الاستمرار. ومع أنّه مفيد للمحتوى، فهو لا يوفّر أفضل تجربة لعناصر التنقّل والقوائم والأزرار داخل تطبيق الويب التقدّمي (PWA).
لذا، يُنصح بإيقاف اختيار المستخدم في هذه العناصر باستخدام 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" في محتوى العلامة <meta name="viewport">. وبعد ذلك، استخدِم متغيرات البيئة safe-area-inset-* لتوسيع نطاق المحتوى بأمان ليشمل تلك المناطق.