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

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

Thomas Steiner

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

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

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

عيوب السمة display

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

  • لا يمكن للمطوّر طلب "minimal-ui" بدون أن يُجبر على العودة إلى وضع العرض "browser" في حال لم يكن "minimal-ui" متوافقًا مع متصفّح معيّن.
  • لا يمكن لمطوّري البرامج التعامل مع الاختلافات بين المتصفّحات، مثل ما إذا كان المتصفّح يتضمّن زر الرجوع في نافذة وضع "standalone" أو يستبعده.
  • The current behavior makes it impossible to introduce new display modes in a backward compatible way, since explorations like tabbed application mode do not have a natural place in the fallback chain.

السمة 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 من قِبل دانيال ميرفي.