أطلق العنان للإمكانات الكاملة لتطبيق الويب التقدمي (PWA) الخاص بك من خلال إتقان أوضاع عرض البيان. يستكشف هذا الدليل الشامل خيارات العرض المختلفة وتأثيرها على تجربة المستخدم عبر مختلف المنصات.
عرض بيان تطبيقات الويب التقدمية (PWA) للواجهة الأمامية: إعدادات متقدمة لوضع العرض
تُحدث تطبيقات الويب التقدمية (PWAs) ثورة في طريقة تفاعل المستخدمين مع محتوى الويب. من خلال الاستفادة من تقنيات الويب الحديثة، تقدم تطبيقات PWA تجارب شبيهة بالتطبيقات مباشرة عبر المتصفح، مما يسد الفجوة بين مواقع الويب التقليدية والتطبيقات الأصلية. في قلب كل تطبيق PWA يكمن بيان تطبيق الويب، وهو ملف JSON يوفر معلومات حيوية حول التطبيق، بما في ذلك اسمه وأيقوناته، والأهم من ذلك، وضع العرض الخاص به. تتعمق هذه المقالة في الإعدادات المتقدمة لخاصية وضع العرض داخل بيان PWA، مستكشفة الخيارات المختلفة وتأثيرها على تجربة المستخدم.
فهم بيان تطبيق الويب
قبل أن نتعمق في تعقيدات أوضاع العرض، دعنا نلخص بإيجاز دور بيان تطبيق الويب. ملف البيان، الذي يُسمى عادةً manifest.json أو manifest.webmanifest، هو ملف JSON بسيط يحتوي على بيانات وصفية حول تطبيق PWA الخاص بك. يستخدم المتصفح هذه البيانات الوصفية لتحديد كيفية تثبيت التطبيق وعرضه. تشمل الخصائص الرئيسية داخل البيان ما يلي:
- name: اسم تطبيق PWA الخاص بك، كما يظهر للمستخدم.
- short_name: نسخة أقصر من الاسم، تُستخدم عندما تكون المساحة محدودة.
- icons: مصفوفة من الأيقونات بأحجام وتنسيقات مختلفة، تُستخدم لأيقونة التطبيق على الشاشة الرئيسية وشاشة البداية وعناصر واجهة المستخدم الأخرى.
- start_url: عنوان URL الذي يتم تحميله عند تشغيل PWA.
- display: هذا هو محور مقالتنا – يحدد وضع العرض كيفية عرض PWA للمستخدم.
- background_color: لون الخلفية المستخدم لشاشة البداية.
- theme_color: لون السمة الذي يستخدمه المتصفح لشريط العنوان وعناصر واجهة المستخدم الأخرى.
- description: وصف موجز لتطبيق PWA.
- screenshots: مصفوفة من لقطات الشاشة لعرضها في لافتة تثبيت التطبيق.
- categories: مصفوفة من الفئات التي ينتمي إليها PWA (مثل "كتب"، "تسوق"، "إنتاجية").
- prefer_related_applications: قيمة منطقية تشير إلى ما إذا كان ينبغي تفضيل التطبيق الخاص بالمنصة على تطبيق الويب.
- related_applications: مصفوفة من التطبيقات الخاصة بالمنصة التي تعتبر بدائل للتثبيت.
يتم ربط ملف البيان بتطبيق PWA الخاص بك باستخدام وسم <link> في قسم <head> من ملف HTML الخاص بك:
<link rel="manifest" href="manifest.json">
استكشاف خيارات وضع العرض
توفر خاصية display في البيان أربعة أوضاع عرض مميزة، يؤثر كل منها على كيفية تقديم PWA للمستخدم:
- fullscreen: يشغل PWA الشاشة بأكملها، ويخفي عناصر واجهة المستخدم الخاصة بالمتصفح مثل شريط العناوين وأزرار التنقل.
- standalone: يعمل PWA في نافذته الخاصة، منفصلاً عن المتصفح، مع شريط عنوان وبدون عناصر واجهة مستخدم المتصفح. هذا هو وضع العرض الأكثر شيوعًا والمرغوب فيه غالبًا لـ PWA.
- minimal-ui: مشابه لوضع standalone، ولكنه يتضمن الحد الأدنى من عناصر واجهة مستخدم المتصفح، مثل أزرار الرجوع والتقدم، وزر التحديث.
- browser: يفتح PWA في علامة تبويب أو نافذة متصفح قياسية، ويعرض واجهة المستخدم الكاملة للمتصفح.
دعنا نفحص كل من هذه الأوضاع بالتفصيل.
1. وضع fullscreen
يوفر وضع fullscreen التجربة الأكثر غمرًا، مما يزيد من مساحة الشاشة لتطبيق PWA الخاص بك. هذا مثالي للألعاب أو مشغلات الفيديو أو التطبيقات التي تكون فيها البيئة الخالية من المشتتات أمرًا بالغ الأهمية.
لتكوين وضع fullscreen، ما عليك سوى تعيين خاصية display في بيانك إلى "fullscreen":
{
"name": "My Fullscreen PWA",
"display": "fullscreen",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
اعتبارات لوضع fullscreen:
- تجربة المستخدم: تأكد من أن PWA الخاص بك يوفر تنقلاً واضحًا وبديهيًا داخل بيئة ملء الشاشة. يحتاج المستخدمون إلى أن يكونوا قادرين على الخروج بسهولة أو التنقل مرة أخرى إلى الشاشات السابقة.
- إمكانية الوصول: ضع في اعتبارك المستخدمين ذوي الإعاقة الذين قد يعتمدون على عناصر واجهة مستخدم المتصفح للتنقل. قدم طرق تنقل بديلة داخل PWA الخاص بك.
- دعم المنصات: على الرغم من دعمه على نطاق واسع، قد يختلف سلوك وضع ملء الشاشة قليلاً عبر المتصفحات وأنظمة التشغيل المختلفة. الاختبار الشامل ضروري.
- تغيير حجم المحتوى: تأكد من أن المحتوى الخاص بك يتناسب بشكل صحيح مع أحجام الشاشات ونسب العرض إلى الارتفاع المختلفة عند استخدام وضع ملء الشاشة.
مثال: سيستفيد تطبيق ألعاب أو خدمة بث فيديو مخصصة بشكل كبير من وضع fullscreen الغامر، مما يسمح للمستخدمين بالتركيز على المحتوى دون تشتيت الانتباه.
2. وضع standalone
يقدم وضع standalone نهجًا متوازنًا، حيث يوفر تجربة شبيهة بالتطبيقات دون إخفاء واجهة مستخدم المتصفح بالكامل. يعمل PWA في نافذته ذات المستوى الأعلى، منفصلاً عن المتصفح، وله أيقونة تطبيق خاصة به في مشغل تطبيقات نظام التشغيل. غالبًا ما يكون هذا هو الوضع المفضل لمعظم تطبيقات PWA.
لتكوين وضع standalone، قم بتعيين خاصية display إلى "standalone":
{
"name": "My Standalone PWA",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
فوائد وضع standalone:
- تجربة شبيهة بالتطبيقات: يوفر تجربة مميزة بصريًا عن موقع ويب عادي، مما يعزز تفاعل المستخدم.
- التكامل مع الشاشة الرئيسية: يسمح للمستخدمين بتثبيت PWA على شاشتهم الرئيسية، مما يجعله سهل الوصول إليه.
- القدرات دون اتصال بالإنترنت: يمكن لتطبيقات PWA في وضع standalone الاستفادة من service workers لتوفير وظائف دون اتصال بالإنترنت، مما يعزز الموثوقية.
مثال: سيعمل تطبيق للتجارة الإلكترونية أو عميل لوسائل التواصل الاجتماعي بشكل جيد في وضع standalone، مما يوفر للمستخدمين تجربة سلسة تشبه التطبيقات الأصلية.
3. وضع minimal-ui
يشبه وضع minimal-ui وضع standalone ولكنه يتضمن مجموعة دنيا من عناصر واجهة مستخدم المتصفح، وعادة ما تكون أزرار الرجوع والتقدم، وزر التحديث. يوفر هذا الوضع تجربة أقل غمرًا بقليل من وضع standalone ولكنه يمكن أن يكون مفيدًا لتطبيقات PWA التي تعتمد على التنقل في المتصفح.
لتكوين وضع minimal-ui، قم بتعيين خاصية display إلى "minimal-ui":
{
"name": "My Minimal-UI PWA",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
حالات استخدام وضع minimal-ui:
- الاعتماد على التنقل في المتصفح: عندما يعتمد PWA الخاص بك بشكل كبير على أزرار الرجوع والتقدم في المتصفح، يمكن أن يوفر
minimal-uiتجربة أكثر ألفة للمستخدمين. - تكامل تطبيقات الويب القديمة: إذا كنت تقوم بترحيل تطبيق ويب قديم إلى PWA، يمكن لـ
minimal-uiتسهيل الانتقال من خلال توفير عناصر تحكم مألوفة في المتصفح.
مثال: قد يستفيد تطبيق لتحرير المستندات أو نموذج ويب معقد من وضع minimal-ui، مما يسمح للمستخدمين بالتنقل بسهولة بين الأقسام المختلفة باستخدام أزرار الرجوع والتقدم في المتصفح.
4. وضع browser
وضع browser هو وضع العرض الافتراضي إذا لم يتم تحديد خاصية display في البيان. في هذا الوضع، يفتح PWA في علامة تبويب أو نافذة متصفح قياسية، ويعرض واجهة المستخدم الكاملة للمتصفح، بما في ذلك شريط العناوين وأزرار التنقل والإشارات المرجعية. هذا الوضع يعادل بشكل أساسي موقع ويب عادي.
لتكوين وضع browser بشكل صريح، قم بتعيين خاصية display إلى "browser":
{
"name": "My Browser PWA",
"display": "browser",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
متى تستخدم وضع browser:
- تطبيقات الويب البسيطة: بالنسبة لتطبيقات الويب البسيطة التي لا تتطلب تجربة شبيهة بالتطبيقات، قد يكون وضع
browserكافيًا. - التحسين التدريجي: يمكنك استخدام وضع
browserكخيار احتياطي للمتصفحات القديمة التي لا تدعم ميزات PWA بشكل كامل.
مثال: قد تستخدم مدونة بسيطة أو موقع ويب ثابت وضع browser، لأنه لا يتطلب أي ميزات خاصة شبيهة بالتطبيقات.
إعداد وضع عرض احتياطي
من المهم أن تضع في اعتبارك أن ليس كل المتصفحات تدعم جميع أوضاع العرض بشكل كامل. لضمان تجربة متسقة عبر المنصات المختلفة، يمكنك تحديد وضع عرض احتياطي باستخدام خاصية display_override في البيان.
خاصية display_override هي مصفوفة من أوضاع العرض، مرتبة حسب الأفضلية. سيحاول المتصفح استخدام أول وضع عرض في المصفوفة يدعمه. إذا لم يتم دعم أي من الأوضاع المحددة، فسيعود المتصفح إلى وضع العرض الافتراضي (عادةً browser).
على سبيل المثال، لتفضيل وضع standalone ولكن العودة إلى minimal-ui ثم browser، ستقوم بتكوين البيان على النحو التالي:
{
"name": "My PWA with Fallback",
"display": "standalone",
"display_override": ["standalone", "minimal-ui", "browser"],
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
ما وراء أوضاع العرض الأساسية: التعامل مع الحالات الخاصة والاختلافات بين المنصات
بينما توفر أوضاع العرض الأساسية درجة كبيرة من التحكم، فإن فهم كيفية تفاعلها مع مختلف المنصات والحالات الخاصة أمر بالغ الأهمية لإنشاء تجارب مستخدم قوية ومتسقة. إليك بعض الاعتبارات المتقدمة:
1. بيانات خاصة بالمنصة
في سيناريوهات معينة، قد تحتاج إلى تكوينات مختلفة قليلاً بناءً على نظام تشغيل المستخدم (OS). على سبيل المثال، قد ترغب في حجم أيقونة مميز لنظام iOS مقارنة بنظام Android. بينما يكفي بيان واحد غالبًا، يمكن استخدام التحميل الشرطي للبيان للحصول على تجارب مخصصة للغاية.
يمكن تحقيق ذلك باستخدام منطق من جانب الخادم أو JavaScript لاكتشاف نظام تشغيل المستخدم وتقديم ملف البيان المناسب. كن على دراية بالتعقيد المتزايد الذي يضيفه هذا النهج.
2. التعامل مع اتجاه الشاشة
لدى تطبيقات PWA خيار تحديد اتجاه الشاشة المفضل لديها باستخدام خاصية orientation في البيان. على سبيل المثال، يمكن أن يؤدي قفل التطبيق على الوضع الأفقي إلى تحسين تجارب الألعاب أو استهلاك الوسائط.
ومع ذلك، تذكر أن المستخدمين لديهم في النهاية التحكم في اتجاه أجهزتهم. صمم PWA الخاص بك للتعامل برشاقة مع تغييرات الاتجاه، مما يضمن بقاء المحتوى قابلاً للقراءة وعمليًا بغض النظر عن وضع الجهاز.
3. تخصيص شاشة البداية
توفر شاشة البداية، التي يتم عرضها لفترة وجيزة أثناء تحميل PWA، فرصة لخلق انطباع أول إيجابي. قم بتخصيص لون خلفية شاشة البداية (background_color) ولون السمة (theme_color) ليتماشى مع هوية علامتك التجارية.
تأكد من أن الألوان المختارة توفر تباينًا كافيًا مع أيقونة التطبيق لزيادة الرؤية وسهولة القراءة. ضع في اعتبارك الاختبار على أجهزة مختلفة للتحقق من عرض شاشة البداية بشكل صحيح.
4. اعتبارات أمنية
يجب دائمًا تقديم تطبيقات PWA، مثل مواقع الويب التقليدية، عبر HTTPS. هذا يؤمن الاتصال بين متصفح المستخدم والخادم، ويحمي البيانات الحساسة من التنصت. علاوة على ذلك، يعد استخدام سياق آمن شرطًا أساسيًا لتمكين service workers، وهي تقنية أساسية تدعم وظائف PWA.
تحقق من أن شهادة SSL/TLS الخاصة بخادمك صالحة ومكونة بشكل صحيح. قم بتحديث بروتوكولات الأمان الخاصة بك بانتظام للتخفيف من الثغرات المحتملة.
5. الاختبار عبر الأجهزة والمتصفحات
نظرًا لتنوع الأجهزة والمتصفحات المستخدمة على مستوى العالم، فإن الاختبار الشامل أمر بالغ الأهمية لضمان عمل PWA الخاص بك بشكل صحيح عبر جميع المنصات المستهدفة. استخدم أدوات مطوري المتصفح لمحاكاة أحجام الشاشات وظروف الشبكة المختلفة.
استخدم خدمات اختبار عبر المتصفحات لأتمتة الاختبار على مجموعة واسعة من المتصفحات وأنظمة التشغيل. اجمع التعليقات من المستخدمين على أجهزة مختلفة لتحديد ومعالجة أي مشكلات توافق.
6. أفضل ممارسات إمكانية الوصول
يجب أن تكون إمكانية الوصول اعتبارًا أساسيًا عند تطوير أي تطبيق ويب، بما في ذلك تطبيقات PWA. التزم بإرشادات إمكانية الوصول إلى الويب (WCAG) لضمان أن PWA الخاص بك قابل للاستخدام من قبل الأفراد ذوي الإعاقة. قدم نصًا بديلاً للصور، واستخدم عناصر HTML الدلالية، وتأكد من وجود تباين كافٍ في الألوان.
اختبر PWA الخاص بك باستخدام التقنيات المساعدة، مثل قارئات الشاشة، لتحديد ومعالجة أي حواجز تتعلق بإمكانية الوصول. في وضع ملء الشاشة، تأكد من توفير طرق تنقل بديلة.
أمثلة عملية من جميع أنحاء العالم
دعنا نستكشف بعض الأمثلة الواقعية لكيفية استفادة الشركات المختلفة من أوضاع عرض PWA لتعزيز تجارب المستخدم:
- Starbucks (عالمي): يستخدم PWA الخاص بـ Starbucks وضع
standaloneلتوفير تجربة طلب مبسطة، على غرار تطبيق الهاتف المحمول الأصلي. يتيح هذا للمستخدمين في جميع أنحاء العالم تقديم الطلبات بسرعة وتتبع نقاط الولاء الخاصة بهم. - Twitter Lite (عالمي): يستخدم Twitter Lite، المصمم للمستخدمين في المناطق الحساسة للبيانات، وضع
standaloneلتقديم تجربة وسائط اجتماعية فعالة وخفيفة الوزن. يتيح هذا للمستخدمين في المناطق ذات النطاق الترددي المحدود البقاء على اتصال. - Flipkart Lite (الهند): يستفيد Flipkart Lite، وهو PWA للتجارة الإلكترونية، من وضع
standaloneلتوفير تجربة تسوق متنقلة أولاً للمستخدمين في الهند. يتيح هذا للمستخدمين الذين لديهم أجهزة قديمة واتصالات إنترنت أبطأ تصفح المنتجات وشرائها بسهولة. - AliExpress (الصين، عالمي): يتوفر PWA الخاص بـ AliExpress على منصات مختلفة ويستفيد من service workers لتوفير تجربة أسرع في جميع أنحاء العالم.
رؤى قابلة للتنفيذ وأفضل الممارسات
للاستفادة بشكل فعال من أوضاع عرض بيان PWA، ضع في اعتبارك الرؤى القابلة للتنفيذ وأفضل الممارسات التالية:
- إعطاء الأولوية لتجربة المستخدم: اختر وضع العرض الذي يتوافق بشكل أفضل مع غرض PWA والجمهور المستهدف.
- توفير تنقل واضح: تأكد من وجود تنقل بديهي داخل PWA الخاص بك، خاصة في وضع
fullscreen. - الاختبار الشامل: اختبر PWA الخاص بك عبر متصفحات وأجهزة وأنظمة تشغيل مختلفة.
- تنفيذ آليات احتياطية: استخدم
display_overrideلضمان تجربة متسقة عبر المنصات. - تحسين الأداء: قلل من أوقات التحميل وحسن PWA الخاص بك للاستخدام دون اتصال بالإنترنت.
- النظر في لافتات تثبيت التطبيق: اطلب من المستخدمين تثبيت PWA الخاص بك على شاشتهم الرئيسية باستخدام لافتات تثبيت التطبيق. قم بتكوين بيانك بشكل صحيح لتشغيل هذا.
- تحديث بيانك بانتظام: حافظ على تحديث ملف البيان الخاص بك بأحدث المواصفات وأفضل الممارسات.
- تحليل سلوك المستخدم: تتبع كيفية تفاعل المستخدمين مع PWA الخاص بك في أوضاع عرض مختلفة لتحديد مجالات التحسين.
الخاتمة
يعد إتقان تكوين أوضاع عرض بيان PWA أمرًا بالغ الأهمية لتقديم تجارب مستخدم استثنائية. من خلال فهم الفروق الدقيقة لكل خيار عرض والنظر في المتطلبات الخاصة بالمنصة، يمكنك تحسين PWA الخاص بك لتلبية احتياجات المستخدمين المتنوعة وإنشاء تجربة جذابة وشبيهة بالتطبيقات حقًا. تذكر إعطاء الأولوية لتجربة المستخدم، والاختبار الشامل عبر مختلف المنصات، وتحسين PWA الخاص بك باستمرار بناءً على ملاحظات المستخدمين ومعايير الويب المتطورة. باتباع أفضل الممارسات هذه، يمكنك إطلاق العنان للإمكانات الكاملة لتطبيقات PWA وتقديم تجربة ويب متفوقة لجمهورك العالمي.