التحضير لأوضاع عرض الغد

يمكن أن تستخدم تطبيقات الويب التقدّمية (PWA) السمة "display_override" للتعامل مع أوضاع العرض الخاصة.

توماس شتاينر

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

الموقع الاستخدام
fullscreen يتم فتح تطبيق الويب بدون أي واجهة مستخدم للمتصفّح، ويستهلك كل مساحة العرض المتاحة.
standalone يتم فتح تطبيق الويب ليبدو وكأنه تطبيق مستقل. ويتم تشغيل التطبيق في نافذته الخاصة ومنفصلة عن المتصفّح، كما يخفي عناصر واجهة المستخدم العادية للمتصفّح، مثل شريط عنوان URL.
minimal-ui يشبه هذا الوضع وضع standalone، ولكنّه يوفّر للمستخدم أقل عدد من عناصر واجهة المستخدم للتحكّم في التنقّل (مثل الرجوع وإعادة التحميل).
browser تجربة متصفّح عادية.

تتبع أوضاع العرض هذه سلسلة احتياطية محددة جيدًا ("fullscreen" ← "standalone" ← "minimal-ui" ← "browser"). وإذا كان المتصفّح لا يتوافق مع وضع معيّن، يعود إلى وضع العرض التالي في السلسلة.

عيوب السمة display

تتمثل المشكلة في منهج السلسلة الاحتياطية السلكية هذا في ثلاثة جوانب:

  • لا يمكن لمطوّر البرامج طلب "minimal-ui" بدون فرض دخوله مرة أخرى إلى وضع العرض "browser" في حال عدم توافق متصفّح "minimal-ui" مع هذا الإعداد.
  • لا يمتلك المطوِّرون طريقة للتعامل مع الاختلافات بين المتصفحات، مثل ما إذا كان المتصفِّح يتضمّن زر الرجوع أو يستبعده في نافذة وضع "standalone".
  • إنّ السلوك الحالي يجعل من المستحيل إدخال أوضاع عرض جديدة بطريقة متوافقة مع الأنظمة القديمة، وذلك لأنّ استكشافات مثل وضع التطبيق المبوّب لا تحتوي على مكان طبيعي في السلسلة الاحتياطية.

السمة "display_override"

يتم حلّ هذه المشاكل من خلال السمة display_override التي يأخذها المتصفّح في الاعتبار قبل السمة display. وقيمتها هي سلسلة من السلاسل التي تعتبر بالترتيب، ويتم تطبيق أول وضع عرض متوافق. وإذا لم يتوفّر أي منها، يعود المتصفّح إلى تقييم الحقل display.

في المثال أدناه، ستكون السلسلة الاحتياطية لوضع العرض على النحو التالي. (تفاصيل "window-controls-overlay" خارج نطاق هذه المقالة).

  1. "window-controls-overlay" (أولاً، انظر إلى display_override.)
  2. "minimal-ui"
  3. "standalone" (عند استنفاد display_override، يُرجى تقييم display.)
  4. "minimal-ui" (أخيرًا، استخدِم السلسلة الاحتياطية display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

للحفاظ على التوافق مع الأنظمة القديمة، سيتم قبول أي وضع عرض مستقبلي كقيمة display_override فقط، وليس كقيمة display. المتصفّحات التي لا تتوافق مع display_override تعود إلى استخدام السمة display وتتجاهل display_override باعتبارها سمة بيان تطبيق ويب غير معروفة.

خدمات الإقرار

تمت إضافة دانيال ميرفي إلى سمة display_override.