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