Testowanie origin dla składanych interfejsów API

Alexis Menard

Thomas Steiner

Chrome testuje 2 interfejsy API: Device Posture API i Viewport Profiles Enumeration API, które są dostępne w Chrome 125 w ramach wersji próbnej origin. Takie interfejsy nazywane są składanymi interfejsami API i zaprojektowane, aby ułatwić deweloperom kierowanie reklam na urządzenia składane. W tym poście omawiamy te interfejsy API oraz sposób ich testowania.

Uwaga: te interfejsy API zostały opracowane w ciągu ostatnich kilku lat we współpracy z firmami Microsoft, Intel, Samsung i Google.

Istnieją głównie 2 różne formaty: urządzenia z jednym elastycznym (płynnym ekranem) i dwa ekrany (z szwem) oraz urządzenia z 2 ekranami.

Te urządzenia stanowią dla deweloperów wyzwania i szanse. Zapewniają dodatkowe sposoby wyświetlania treści. Użytkownik może np. trzymać w ręce płynne urządzenie, np. książkę, a potem używać go jak tabletu z płaskim ekranem. Urządzenia z 2 ekranami mają fizyczne połączone ekrany, co może być konieczne.

Dzięki tym nowym interfejsom API deweloperzy mogą zwiększyć wygodę użytkowników tych urządzeń. Każdy interfejs API ujawnia potrzebne podstawowe elementy platformy internetowej na 2 sposoby: za pomocą CSS i JavaScriptu.

Interfejs API Device Posture

Urządzenia składane umożliwiają zmianę stanu urządzenia, czyli jego fizycznego stanu. Mogą zmienić format, co pozwoli autorom treści zapewnić inne wrażenia użytkownikom, a nowe interfejsy API gwarantują, że treści internetowe będą reagowały na różne stany złożenia.

Urządzenie może znajdować się w 2 pozycji:

• folded: plakaty do laptopa lub książki.

• continuous: płaskie, na tablety, a nawet płynne zakrzywione wyświetlacze.

CSS

Specyfikacja interfejsu Device Posture API definiuje nową funkcję media-feature CSS – device-posture. Ta funkcja multimediów przyjmuje zbiór stałych pozycji. Pozycje te składają się z kilku wstępnie zdefiniowanych wartości, które obejmują konkretny stan fizyczny urządzenia.

Wartości cechy device-posture odpowiadają poprzednim opisom możliwych pozycji:

• folded
• continuous

W przyszłości, jeśli na rynku pojawią się nowe urządzenia, mogą zostać dodane nowe pozycje.

Przykłady:

/* 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

Na potrzeby zapytania o stan urządzenia dostępny jest nowy obiekt DevicePosture.

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

Aby reagować na zmiany stanu urządzenia, np. jego pełne otwarcie i przejście z folded na continuous, zasubskrybuj zdarzenia change.

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

Interfejs API segmentów widocznego obszaru

Segmenty widocznego obszaru to zmienne środowiskowe CSS, które określają pozycję i wymiary logicznie oddzielonego obszaru widocznego obszaru. Segmenty widocznego obszaru są tworzone, gdy jest on podzielony przez co najmniej 1 funkcję sprzętową (np. składanie lub zawias między osobnymi wyświetlaczami), które działają jako rozdzielenie. Segmenty to obszary widocznego obszaru, które autor może traktować jako logicznie odrębne.

CSS

Liczba podziałów logicznych jest ujawniana przez 2 nowe funkcje multimedialne, zdefiniowane w specyfikacji zapytań o media CSS na poziomie 5: vertical-viewport-segments i horizontal-viewport-segments. Odpowiadają one liczbie segmentów, na które jest podzielony widoczny obszar.

Dodaliśmy też nowe zmienne środowiskowe, które mogą wysyłać zapytania o wymiary każdego podziału logicznego. Są to:

• 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)

Każda zmienna ma 2 wymiary, które reprezentują odpowiednio pozycję x i y w dwuwymiarowej siatce utworzonej przez funkcje sprzętowe rozdzielające segmenty.

Pierwszy segment poziomy to x 0 i y 0, drugi x 1 i y 0. Pierwszy pionowy segment to x 0 i y 0, a drugi x 0 i y 1.

Poniższy fragment kodu to uproszczony przykład podziału UX, który składa się z 2 sekcji treści (col1 i col2) po każdej stronie strony widocznej na ekranie.

<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>

Na tych zdjęciach widać, jak wygląda korzystanie z urządzenia fizycznego.

JavaScript

Aby poznać liczbę segmentów widocznego obszaru, sprawdź wpis segments w visualViewport.

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

Każda pozycja w tablicy segments odpowiada każdemu logicznemu segmentowi widocznego obszaru z elementem DOMArray opisującym współrzędne i rozmiar. Pole segments zawiera zrzut danego stanu po wysłaniu zapytania. Aby otrzymywać zaktualizowane wartości, musisz wychwytywać zmiany stanu lub zmieniać rozmiar zdarzeń i ponownie wysyłać zapytania do właściwości segments.

Wypróbuj składane interfejsy API

Składane interfejsy API są dostępne w okresie próbnym źródła od Chrome 125 do wersji 128. Podstawowe informacje na temat testowania origin znajdziesz w artykule Pierwsze kroki z testami origin.

Na potrzeby testów lokalnych składane interfejsy API można włączyć za pomocą flagi funkcji eksperymentalnych platform internetowych (chrome://flags/#enable-experimental-web-platform-features). Można go też włączyć, uruchamiając Chrome z poziomu wiersza poleceń przy użyciu polecenia --enable-experimental-web-platform-features.

Przykłady

Wersje demonstracyjne znajdziesz w repozytorium wersji demonstracyjnych. Jeśli nie masz fizycznego urządzenia do przeprowadzenia testu, możesz wybrać urządzenie z emulacją Galaxy Z Fold 5 lub Asus Zenbook Fold w narzędziach deweloperskich w Chrome oraz przełączać się między trybem Ciągły lub Złożony. W razie potrzeby możesz też zwizualizować zawias.

Powiązane artykuły

• Device Posture API
  • Pozycja Mozilli
  • Pozycja w WebKit
  • Wpis stanu Chrome
  • Specyfikacja W3C
• Viewport Profiles API
  • Pozycja Mozilli
  • Pozycja w WebKit
  • Wpis stanu Chrome
  • Specyfikacja zapytania o media CSS W3C i Specyfikacja zmiennej środowiskowej CSS W3C
  • Specyfikacja W3C JS