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

Alexis Menard

Thomas Steiner

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

هناك نوعان مختلفان من أشكال الأجهزة: الأجهزة ذات الشاشة المرنة الأولى (السلسة)، والأجهزة ذات الشاشتين (الشبكية، والمعروفة أيضًا باسم الأجهزة ذات الشاشة المزدوجة).

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

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

واجهة برمجة تطبيقات Device Posture

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

يمكن أن يتضمّن الجهاز وضعَين:

• folded: منشورات أجهزة الكمبيوتر المحمول أو الكتب

• continuous: شاشات مسطحة أو أجهزة لوحية أو حتى مع منحنيات سلِسة

CSS

تحدِّد مواصفات واجهة برمجة التطبيقات Device Posture API ميزة وسائط CSS جديدة، وهي 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}`);
});

واجهة برمجة تطبيقات شرائح إطار العرض

أجزاء إطار العرض هي متغيرات بيئة 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)

لكل متغير بعدين، يمثلان الموضعين س وص، على التوالي، في الشبكة الثنائية الأبعاد التي أنشأتها ميزات الأجهزة التي تفصل بين القطاعات.

مقتطف الرمز التالي هو مثال مبسط لإنشاء تجربة مستخدم مقسمة حيث لدينا قسمان للمحتوى (العمود 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.

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

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

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

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

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

روابط ذات صلة

• Device Posture API
  • موضع Mozilla
  • موضع WebKit
  • إدخال حالة Chrome
  • مواصفات W3C
• واجهة برمجة التطبيقات لشرائح إطار العرض
  • موضع Mozilla
  • موضع WebKit
  • إدخال حالة Chrome
  • مواصفات استعلام وسائط CSS لـ W3C ومواصفات متغير بيئة W3C CSS
  • مواصفات W3C JS