مرحلة التجربة والتقييم لواجهات برمجة التطبيقات القابلة للطي

Alexis Menard

Thomas Steiner

يختبر Chrome واجهات برمجة تطبيقات Device Posture API وViewport Segments Enumeration API، وهما متاحتان في مرحلة التجربة والتقييم من Chrome 125. وتُعرف هذه الواجهات باسم "واجهات برمجة التطبيقات للأجهزة القابلة للطي"، وهي مصمّمة لمساعدة المطوّرين في استهداف الأجهزة القابلة للطي. تقدّم هذه المشاركة هذه الواجهات، وتوفر معلومات عن كيفية بدء اختبارها.

هناك نوعان رئيسيان من أشكال الأجهزة: الأجهزة التي تتضمّن شاشة واحدة مرنة (سلسة) والأجهزة التي تتضمّن شاشتَين (مع فاصل، وتُعرف أيضًا باسم الأجهزة المزودة بشاشتَين).

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

وتوفّر واجهات برمجة التطبيقات الجديدة هذه طرقًا للمطوّرين لتقديم تجارب أفضل للمستخدمين على هذه الأجهزة. تعرض كل واجهة برمجة تطبيقات العناصر الأساسية المطلوبة للنظام الأساسي للويب بطريقتين، من خلال CSS وJavaScript.

Device Posture API

تتمتع الأجهزة القابلة للطي بإمكانات تتيح لها تغيير _وضعها_ أو حالتها المادية. ويمكنهم تغيير شكل الجهاز للسماح لمؤلفي المحتوى بتقديم تجربة مستخدم مختلفة، وتضمن واجهات برمجة التطبيقات الجديدة هذه أن يتفاعل محتوى الويب مع حالات الطي المختلفة.

هناك وضعان للجهاز يمكن أن يكون فيهما:

• folded: أوضاع الكمبيوتر المحمول أو الكتاب

• continuous: شاشات مسطّحة أو لوحية أو حتى شاشات منحنية سلسة

CSS

تحدّد مواصفات Device Posture API سمة CSS جديدة، وهي media-feature—device-posture. تؤدي ميزة الوسائط هذه إلى مجموعة من المواقف الثابتة. تتكون هذه الوضعيات من عدد من القيم المحددة مسبقًا التي يشمل كل منها حالة مادية للجهاز.

تتطابق قيم سمة device-posture مع الوصف السابق ل الوضعيات المحتملة:

• folded
• continuous

يمكن إضافة أوضاع جديدة في المستقبل إذا تم طرح أجهزة جديدة في السوق.

أمثلة:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

لإجراء طلب بحث عن وضع جهاز، يتوفّر عنصر DevicePosture جديد.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

للتفاعل مع التغييرات في وضع الجهاز، مثل فتح المستخدم جهازًا بالكامل وبالتالي الانتقال من folded إلى continuous، يمكنك الاشتراك في أحداث change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

Viewport Segments API

أقسام إطار العرض هي متغيّرات بيئة CSS التي تحدّد موضع وقياسات منطقة منفصلة منطقيًا من إطار العرض. يتم إنشاء أقسام مساحة العرض عندما يتم تقسيم مساحة العرض بواسطة ميزة أجهزة واحدة أو أكثر (مثل الشاشة القابلة للطي أو المفصل بين شاشات منفصلة) التي تعمل كفاصل. الشرائح هي مناطق إطار العرض التي يمكن للمؤلف التعامل معها باعتبارها مميزة منطقيًا.

CSS

يتم عرض عدد التقسيمات المنطقية من خلال ميزتَي وسائط جديدتَين، يتم تحديدهما في مواصفات المستوى 5 من طلبات البحث عن الوسائط في CSS: vertical-viewport-segments وhorizontal-viewport-segments. ويتم حلّها لتصبح عدد الأقسام التي تم تقسيم مساحة العرض إلى أقسامها.

بالإضافة إلى ذلك، تمت إضافة متغيّرات بيئة جديدة لاستعلام سمات كل قسم منطقي. وهذه المتغيّرات هي:

• env(viewport-segment-width x y)
• env(viewport-segment-height x y)
• env(viewport-segment-top x y)
• env(viewport-segment-left x y)
• env(viewport-segment-bottom x y)
• env(viewport-segment-right x y)

يحتوي كل متغيّر على سمتَين، تمثلان موضعَي x وy على التوالي، في الشبكة ثنائية الأبعاد التي تم إنشاؤها بواسطة ميزات الأجهزة التي تفصل بين الشرائح.

مقتطف الرمز التالي هو مثال مبسط لإنشاء تجربة مستخدم مقسّمة حيث يكون لدينا قسمان للمحتوى (العمود 1 والعمود 2) على كل جانب من الجزء المرئي من الصفحة.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

توضّح الصور التالية شكل التجربة على جهاز فعلي.

JavaScript

للحصول على عدد أقسام مساحة العرض، تحقّق من إدخال segments في visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

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

تجربة واجهات برمجة التطبيقات المخصّصة للأجهزة القابلة للطي

تتوفّر واجهات برمجة التطبيقات Foldable API في مرحلة تجربة وتقييم من الإصدار 125 من Chrome إلى الإصدار 128. اطّلِع على مقالة بدء استخدام تجارب المصدر للحصول على معلومات أساسية عن تجارب المصدر.

للاختبار على الجهاز، يمكن تفعيل واجهات برمجة التطبيقات Foldable APIs باستخدام علامة ميزات الويب Platform التجريبية في ملف علامة التسمية chrome://flags/#enable-experimental-web-platform-features. ويمكن أيضًا تفعيلها من خلال تشغيل Chrome من سطر الأوامر باستخدام --enable-experimental-web-platform-features.

إصدارات تجريبية

للاطّلاع على العروض التوضيحية، يُرجى الاطّلاع على مستودع demos . إذا لم يكن لديك جهاز فعلي لإجراء الاختبار عليه، يمكنك اختيار جهاز المحاكاة Galaxy Z Fold 5 أو Asus Zenbook Fold في "أدوات مطوّري البرامج في Chrome" والتبديل بين الوضعين متواصل ومطوي. يمكنك أيضًا عرض مفصل الجهاز عند الضرورة.

روابط ذات صلة

• Device Posture API
  • موضع في Mozilla
  • موضع WebKit
  • إدخال حالة Chrome
  • مواصفات W3C
• Viewport Slides API
  • Mozilla Position
  • موضع WebKit
  • إدخال حالة Chrome
  • مواصفات W3C CSS Media Query و مواصفات W3C CSS Environment Variable