يمكنك تخصيص عناصر التحكّم في النوافذ المركّبة في شريط عناوين تطبيق PWA.

استخدِم منطقة شريط العناوين بجانب عناصر التحكّم في النوافذ لجعل تطبيق الويب التقدّمي يبدو أكثر شبهاً بالتطبيقات.

Amanda Baker

Thomas Steiner

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

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

مكونات تراكب عناصر التحكّم في النوافذ

يتألف تراكب عناصر التحكّم في النوافذ من أربع ميزات فرعية:

1. القيمة "window-controls-overlay" لحقل "display_override" في بيان تطبيق الويب
2. متغيّرات بيئة CSS‏ titlebar-area-x وtitlebar-area-y وtitlebar-area-width و titlebar-area-height
3. توحيد سمة CSS التي كانت مملوكة سابقًا -webkit-app-region لتصبح السمة app-region لتحديد المناطق القابلة للسحب في محتوى الويب
4. آلية للاستعلام عن منطقة عناصر التحكّم في النافذة وحلّ المشاكل المتعلّقة بها من خلال عضو windowControlsOverlay في window.navigator

ما هو "تراكب عناصر التحكّم في النوافذ"؟

تشير منطقة شريط العناوين إلى المساحة على يمين أو يسار عناصر التحكّم في النافذة (أي buttons لتصغير النافذة أو تكبيرها أو إغلاقها أو غير ذلك)، وغالبًا ما تحتوي على عنوان التطبيق. تتيح ميزة "طريقة عرض عناصر التحكّم في النافذة" لتطبيقات الويب التقدّمية توفير تجربة أكثر شبهاً بالتطبيقات من خلال تبديل شريط العناوين الحالي بالعرض الكامل بعنصر عرض صغير يحتوي على عناصر التحكّم في النافذة. يتيح ذلك للمطوّرين وضع محتوى مخصّص في منطقة شريط العنوان التي كان يتحكم فيها المتصفّح سابقًا.

الوضع الحالي

كيفية استخدام ميزة "تراكب عناصر التحكّم في النوافذ"

إضافة window-controls-overlay إلى بيان تطبيق الويب

يمكن لتطبيق الويب التقدّمي تفعيل تراكب عناصر التحكّم في النافذة من خلال إضافة "window-controls-overlay" كعضو "display_override" أساسي في بيان تطبيق الويب:

{
  "display_override": ["window-controls-overlay"]
}

لن تظهر عناصر التحكّم في النافذة إلا عند استيفاء جميع الشروط التالية:

1. لا يتم فتح التطبيق في المتصفّح، بل في نافذة تطبيق متوافق مع الأجهزة الجوّالة (PWA) منفصلة.
2. يتضمّن البيان "display_override": ["window-controls-overlay"]. (يُسمح بالقيم الأخرى بعد ذلك).
3. يعمل تطبيق الويب التقدّمي على نظام تشغيل كمبيوتر مكتبي.
4. يتطابق المصدر الحالي مع المصدر الذي تم تثبيت تطبيق الويب التقدّمي عليه.

نتيجةً لذلك، تظهر منطقة فارغة في شريط العنوان مع عناصر التحكّم العادية في النافذة على يمين الشاشة أو يسارها، وذلك حسب نظام التشغيل.

نقل المحتوى إلى شريط العنوان

الآن بعد أن أصبحت هناك مساحة في شريط العناوين، يمكنك نقل عنصر إليه. في هذه المقالة، أنشأت تطبيقًا متوافقًا مع الأجهزة الجوّالة يعمل بلا إنترنت (PWA) يعرض المحتوى المميّز في Wikimedia. قد تكون ميزة البحث عن كلمات في عناوين المقالات مفيدة لهذا التطبيق. يظهر رمز HTML لميزة البحث على النحو التالي:

<div class="search">
  <img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
  <label>
    <input type="search" />
    Search for words in articles
  </label>
</div>

لنقل هذا الرمز div إلى أعلى شريط العنوان، يجب استخدام بعض رموز CSS:

.search {
  /* Make sure the `div` stays there, even when scrolling. */
  position: fixed;
  /**
   * Gradient, because why not. Endless opportunities.
   * The gradient ends in `#36c`, which happens to be the app's
   * `<meta name="theme-color" content="#36c">`.
   */
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
  /* Use the environment variable for the left anchoring with a fallback. */
  left: env(titlebar-area-x, 0);
  /* Use the environment variable for the top anchoring with a fallback. */
  top: env(titlebar-area-y, 0);
  /* Use the environment variable for setting the width with a fallback. */
  width: env(titlebar-area-width, 100%);
  /* Use the environment variable for setting the height with a fallback. */
  height: env(titlebar-area-height, 33px);
}

يمكنك الاطّلاع على تأثير هذا الرمز البرمجي في لقطة الشاشة أدناه. شريط العناوين متوافق تمامًا مع الأجهزة الجوّالة. عند تغيير حجم نافذة تطبيق الويب التقدّمي، يتفاعل شريط العناوين كما لو كان يتألف من محتوى HTML عادي، وهو ما هو عليه في الواقع.

تحديد أجزاء شريط العنوان التي يمكن سحبها

على الرغم من أنّ لقطة الشاشة أعلاه تشير إلى أنّك قد أكملت الخطوات المطلوبة، إلا أنّك لم تنتهِ بعد. لم يعُد بإمكانك نقل نافذة تطبيق الويب التقدّمي (باستثناء منطقة صغيرة جدًا)، لأنّ أزرار عناصر التحكّم في النافذة ليست مناطق يمكن نقلها، ويتكون الجزء المتبقّي من شريط العناوين من التطبيق المصغّر للبحث. يمكنك حلّ هذه المشكلة باستخدام السمة app-region في CSS مع القيمة drag. في الحالة المحدّدة، لا بأس من جعل كل العناصر باستثناء العنصر input قابلة للسحب.

/* The entire search `div` is draggable… */
.search {
  -webkit-app-region: drag;
  app-region: drag;
}

/* …except for the `input`. */
input {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

باستخدام ملف CSS هذا، يمكن للمستخدم سحب نافذة التطبيق كالمعتاد من خلال سحب div أو img أو label. يكون العنصر input تفاعليًا فقط حتى يمكن إدخال طلب البحث.

رصد الميزات

يمكن رصد مدى توفّر ميزة "تراكب عناصر التحكّم في النوافذ" من خلال اختبار ما يلي: windowControlsOverlay:

if ('windowControlsOverlay' in navigator) {
  // Window Controls Overlay is supported.
}

طلب معلومات عن منطقة عناصر التحكّم في النافذة باستخدام windowControlsOverlay

يتضمّن الرمز البرمجي مشكلة واحدة حتى الآن: على بعض المنصات، تكون عناصر التحكّم في النافذة على يسار الشاشة، وعلى الأخرى تكون على يمين الشاشة. والأسوأ من ذلك، سيتغيّر موقع قائمة Chrome "النقاط الثلاث" أيضًا استنادًا إلى النظام الأساسي. وهذا يعني أنّه يجب تكييف صورة الخلفية ذات التدرّج اللوني الخطي ديناميكيًا لتتم من #131313→maroon أو maroon→#131313→maroon، لكي تتمهأ للاندماج مع لون الخلفية maroon في شريط العنوان الذي يتم تحديده من قِبل <meta name="theme-color" content="maroon">. ويمكن تحقيق ذلك من خلال طلب البحث في واجهة برمجة التطبيقات getTitlebarAreaRect() على السمة navigator.windowControlsOverlay.

if ('windowControlsOverlay' in navigator) {
  const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
  // Window controls are on the right (like on Windows).
  // Chrome menu is left of the window controls.
  // [ windowControlsOverlay___________________ […] [_] [■] [X] ]
  if (x === 0) {
    div.classList.add('search-controls-right');
  }
  // Window controls are on the left (like on macOS).
  // Chrome menu is right of the window controls overlay.
  // [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
  else {
    div.classList.add('search-controls-left');
  }
} else {
  // When running in a non-supporting browser tab.
  div.classList.add('search-controls-right');
}

بدلاً من تضمين صورة الخلفية في قواعد CSS لفئة .search مباشرةً (كما كان من قبل)، يستخدم الرمز البرمجي المعدَّل الآن فئتين يضبطهما الرمز البرمجي أعلاه ديناميكيًا.

/* For macOS: */
.search-controls-left {
  background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
}

/* For Windows: */
.search-controls-right {
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
}

تحديد ما إذا كان تراكب عناصر التحكّم في النوافذ مرئيًا

لن تظهر طريقة عرض عناصر التحكّم في النوافذ في منطقة شريط العناوين في جميع الحالات. ومع أنّه لن يظهر تلقائيًا في المتصفّحات التي لا تتيح ميزة "تداخل عناصر التحكّم في النوافذ"، لن يظهر أيضًا عند تشغيل تطبيق الويب التقدّمي المعنيّ في علامة تبويب. لرصد هذا الموقف، يمكنك الاستعلام عن صفة visible في windowControlsOverlay:

if (navigator.windowControlsOverlay.visible) {
  // The window controls overlay is visible in the title bar area.
}

بدلاً من ذلك، يمكنك أيضًا استخدام طلب الاستعلام عن الوسائط display-mode في JavaScript و/أو CSS:

// Create the query list.
const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');

// Define a callback function for the event listener.
function handleDisplayModeChange(mql) {
  // React on display mode changes.
}

// Run the display mode change handler once.
handleDisplayChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener('change', handleDisplayModeChange);

@media (display-mode: window-controls-overlay) { 
  /* React on display mode changes. */ 
}

تلقّي إشعارات بشأن تغييرات الشكل الهندسي

يمكن أن يكون طلب البحث عن منطقة تراكب عناصر التحكّم في النوافذ باستخدام getTitlebarAreaRect() كافيًا لعمليات محدّدة، مثل ضبط صورة الخلفية الصحيحة استنادًا إلى موضع عناصر التحكّم في النوافذ، ولكن في حالات أخرى، يكون التحكّم الأكثر دقة ضروريًا. على سبيل المثال، يمكن أن تكون حالة الاستخدام المحتمَلة هي تعديل تراكب عناصر التحكّم في النافذة استنادًا إلى المساحة المتوفّرة وإضافة نكتة مباشرةً في تراكب عناصر التحكّم في النافذة عندما تكون هناك مساحة كافية.

يمكنك تلقّي إشعارات بتغييرات الشكل الهندسي من خلال الاشتراك في بث navigator.windowControlsOverlay.ongeometrychange أو من خلال إعداد مستمع للحدث geometrychange. لن يتم تنشيط هذا الحدث إلا عندما يكون تراكب عناصر التحكّم في النافذة مرئيًا، أي عندما يكون navigator.windowControlsOverlay.visible هو true.

const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

if ('windowControlsOverlay' in navigator) {
  navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250);
}

بدلاً من إسناد دالة إلى ongeometrychange، يمكنك أيضًا إضافة مستمع أحداث إلى windowControlsOverlay على النحو الموضّح أدناه. يمكنك الاطّلاع على الفرق بين الاثنين على MDN.

navigator.windowControlsOverlay.addEventListener(
  'geometrychange',
  debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250),
);

التوافق عند التشغيل في علامة تبويب وعلى المتصفّحات غير المتوافقة

هناك حالتان محتملتان يجب أخذهما بعين الاعتبار:

• الحالة التي يكون فيها التطبيق قيد التشغيل في متصفّح متوافق مع ميزة "تداخل عناصر التحكّم في النوافذ"، ولكن يتم استخدام التطبيق في علامة تبويب متصفّح.
• الحالة التي يكون فيها التطبيق قيد التشغيل في متصفّح لا يتيح تراكب عناصر التحكّم في النوافذ

في كلتا الحالتَين، سيتم تلقائيًا عرض ترميز HTML المُنشئ لعناصر التحكّم في النافذة كمحتوى مضمّن مثل محتوى HTML العادي، وسيتم تفعيل قيم البديلenv() للمتغيّرات لتحديد موضع العناصر. في المتصفحات المتوافقة، يمكنك أيضًا اختيار عدم عرض HTML المخصّص للتراكب الخاص بعناصر التحكّم في النافذة من خلال التحقّق من سمة visible للتراكب، وإذا كانت تُبلغ عن false، يمكنك إخفاء محتوى HTML هذا.

نذكّرك بأنّ المتصفّحات غير المتوافقة لن تأخذ في الاعتبار سمة بيان تطبيق الويب "display_override" على الإطلاق، أو لن تتعرّف على "window-controls-overlay" وبالتالي ستستخدم القيمة التالية المحتملة وفقًا لسلسلة الحلول الاحتياطية، على سبيل المثال، "standalone".

اعتبارات واجهة المستخدم

على الرغم من أنّه قد يكون من المغري إنشاء قائمة منسدلة كلاسيكية في منطقة "تراكب عناصر التحكّم في النافذة"، لا يُنصح بذلك. سيؤدي ذلك إلى انتهاك إرشادات التصميم على نظام التشغيل macOS، وهو نظام التشغيل الذي يتوقّع المستخدمون أن تظهر فيه أشرطة القوائم (سواءً تلك التي يوفّرها النظام أو تلك المخصّصة) في أعلى الشاشة.

إذا كان تطبيقك يقدّم تجربة ملء الشاشة، ننصحك بالتفكير بعناية في ما إذا كان من المنطقي أن يكون "العنصر المتراكب لعناصر التحكّم في النافذة" جزءًا من العرض في وضع ملء الشاشة. قد تحتاج إلى إعادة ترتيب التنسيق عند بدء حدث onfullscreenchange.

عرض توضيحي

لقد أنشأتُ إصدارًا تجريبيًا يمكنك تشغيله في متصفحات مختلفة متوافقة وغير متوافقة وفي حالتَي التثبيت وعدم التثبيت. للاطّلاع على تجربة "عناصر التحكّم في النوافذ" الفعلية، عليك تثبيت التطبيق. يمكنك الاطّلاع أدناه على لقتَي شاشة توضحان ما يمكن توقّعه. يتوفّر رمز المصدر للتطبيق على Glitch.

تعمل ميزة البحث في تراكب عناصر التحكّم في النوافذ بشكل كامل:

الاعتبارات الأمنية

صمم فريق Chromium واجهة برمجة التطبيقات Window Controls Overlay API ونفّذها باستخدام المبادئ الأساسية المحدّدة في مقالة التحكّم في الوصول إلى ميزات Web Platform القوية، بما في ذلك التحكّم الذي يمارسه المستخدم والشفافية وسهولة الاستخدام.

الانتحال

إنّ منح المواقع الإلكترونية إمكانية التحكّم جزئيًا في شريط العنوان يترك مجالًا للمطوّرين لتزوير المحتوى في ما كان سابقًا منطقة موثوق بها يتحكّم فيها المتصفّح. في الوقت الحالي، يتضمّن وضع التصفّح المُنفَذ بشكلٍ مستقل في متصفّحات Chromium شريط عنوان يعرض عند التشغيل الأولي عنوان صفحة الويب على يمين الشاشة، و مصدر الصفحة على يسارها (يليه الزر "الإعدادات والمزيد" وعناصر التحكّم في النافذة). بعد بضع ثوانٍ، يختفي النص الأصلي. إذا تم ضبط المتصفّح على لغة مكتوبة من اليمين إلى اليسار، يتم قلب هذا التنسيق بحيث يكون النص الأصلي على يمين الصفحة. يؤدي ذلك إلى فتح تراكيب عناصر التحكّم في النافذة للتزوير في المصدر إذا لم تكن هناك مساحة كافية بين المصدر والحافة اليمنى للتراكيب. على سبيل المثال، يمكن إلحاق المصدر "evil.ltd" بموقع إلكتروني موثوق فيه هو "google.com"، ما يدفع المستخدمين إلى الاعتقاد بأنّ المصدر موثوق. وننوي الاحتفاظ بعبارة مصدر التطبيق هذه حتى يعرف المستخدمون مصدره ويتأكّدوا من أنّه يلبي توقعاتهم. في المتصفحات التي تم ضبطها لعرض النص من اليمين إلى اليسار، يجب أن يكون هناك مسافة بادئة كافية على يسار ملف تعريف الارتباط لمنع موقع إلكتروني ضار من إلحاق مصدر غير آمن بمصدر موثوق به.

البصمات الرقمية

لا يشكّل تفعيل تراكب عناصر التحكّم في النوافذ والمناطق القابلة للسحب أيّ مخاوف كبيرة تتعلّق بالخصوصية بخلاف رصد الميزات. ومع ذلك، بسبب اختلاف أحجام أزرار التحكّم في النوافذ ومواقعها على مختلف أنظمة التشغيل، تُعرِض الوسيطة navigator.windowControlsOverlay.getTitlebarAreaRect() DOMRect معلومات عن نظام التشغيل الذي يعمل عليه المتصفّح، وذلك من خلال موضع العنصر وأبعاده. يمكن للمطوّرين حاليًا اكتشاف نظام التشغيل من سلسلة وكيل المستخدم، ولكن بسبب المخاوف المتعلّقة بتقنية البصمة الرقمية، هناك نقاش حول تجميد سلسلة وكيل المستخدم وتوحيد إصدارات نظام التشغيل. يبذل مجتمع المتصفّحات جهدًا دؤوبًا لفهم معدّل تكرار تغيُّر حجم تراكب عناصر التحكّم في النافذة على جميع المنصّات، لأنّ الافتراض الحالي هو أنّه يتم تعديل هذه العناصر بثبات إلى حدٍ ما على جميع إصدارات نظام التشغيل، وبالتالي لن يكون مفيدًا مراقبة إصدارات نظام التشغيل الثانوية. على الرغم من أنّ هذه مشكلة محتملة تتعلّق بالتعرّف على الهوية، إلا أنّها لا تنطبق إلا على تطبيقات الويب المتوافقة مع الأجهزة الجوّالة المثبَّتة التي تستخدم ميزة ملف شخصي مخصّص لشريط العنوان، ولا تنطبق على الاستخدام العام للمتصفّح. بالإضافة إلى ذلك، لن تكون واجهة برمجة التطبيقات navigator.windowControlsOverlay متاحة ل إطارات iframe المضمّنة داخل تطبيق متوافق مع الويب.

التنقّل

سيؤدي الانتقال إلى مصدر مختلف داخل تطبيق ويب تقدّمي إلى الرجوع إلى شريط العناوين العادي المُنفَذ بشكلٍ مستقل، حتى إذا كان يستوفي المعايير المذكورة أعلاه ويتم تشغيله باستخدام واجهة عرض عناصر التحكّم في النوافذ. وذلك لاستيعاب الشريط الأسود الذي يظهر عند الانتقال إلى مصدر مختلف. بعد الرجوع إلى المصدر الأصلي، سيتم استخدام تراكب عناصر التحكّم في النافذة مرة أخرى.

ملاحظات

يريد فريق Chromium معرفة تجاربك مع واجهة برمجة التطبيقات Window Controls Overlay API.

أخبِرنا عن تصميم واجهة برمجة التطبيقات.

هل هناك مشكلة في واجهة برمجة التطبيقات لا تعمل على النحو المتوقّع؟ هل هناك طُرق أو سمات مفقودة تحتاجها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق حول ملف أمان الحساب؟ يمكنك الإبلاغ عن مشكلة في المواصفات في مستودع GitHub المقابل، أو إضافة ملاحظاتك إلى مشكلة حالية.

الإبلاغ عن مشكلة في التنفيذ

هل عثرت على خطأ في عملية تنفيذ Chromium؟ أم أنّ عملية التنفيذ مختلفة عن المواصفات؟ يمكنك إرسال بلاغ عن خلل على الرابط new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل، وتعليمات بسيطة لإعادة إنتاج الخلل، وأدخِل UI>Browser>WebAppInstalls في مربّع المكوّنات . يُعدّ تطبيق Glitch مثاليًا لمشاركة عمليات إعادة الإنتاج بسرعة وسهولة.

إظهار الدعم لواجهة برمجة التطبيقات

هل تخطّط لاستخدام واجهة برمجة التطبيقات Window Controls Overlay API؟ يساعد دعمك العلني فريق Chromium في تحديد أولويات الميزات وإظهار مدى أهمية توفيرها لمطوّري المتصفّحات الآخرين.

أرسِل تغريدة إلى ‎@ChromiumDev باستخدام الهاشتاغ #WindowControlsOverlay وأخبِرنا بالمكان الذي تستخدم فيه هذه الميزة وطريقة استخدامها.

روابط مفيدة

• الشرح
• مسودة المواصفات
• خطأ في Chromium
• إدخال حالة نظام Chrome الأساسي
• مراجعة علامة Google
• المستندات ذات الصلة بخدمة Microsoft Edge

الشكر والتقدير

تم تنفيذ واجهة Window Controls Overlay وتحديدها من قِبل أماندا بيكر من فريق Microsoft Edge. راجع المقالة كلّ من جو ميدلي و كينيث رودي كريستيانسن. الصورة الرئيسية من إنشاء Sigmund على Unsplash.