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

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

Thomas Steiner

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

الموقع الاستخدام
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 على يد دانيال ميرفي.