Testowanie origin dla składanych interfejsów API

Alexis Menard

Thomas Steiner

Chrome testuje 2 interfejsy API: Device Posture API i Viewport Segments Enumeration API, które są dostępne w ramach testowania origin w Chrome 125. Są to tzw. składane interfejsy API, które mają pomóc programistom w kierowaniu reklam na urządzenia składane. W tym poście omówimy te interfejsy API i dowiesz się, jak zacząć je testować.

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

Występują głównie 2 różne formaty fizyczne: urządzenia z jednym elastycznym ekranem (bezproblemowy) i urządzenia z 2 ekranami (z połączeniem, znane również jako urządzenie z 2 ekranami).

Takie urządzenia wiążą się z wyzwaniami i szansami dla programistów. Zapewniają one dodatkowe sposoby wyświetlania treści. Użytkownik może na przykład trzymać urządzenie, takie jak książka, a potem zmienić je w tablet z płaskim ekranem. Urządzenia z 2 ekranami są połączone fizycznymi urządzeniami, które trzeba uwzględnić.

Te nowe interfejsy API pozwalają deweloperom zadbać o lepszą obsługę 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 Device Posture API

Urządzenia składane mają funkcje, które umożliwiają zmianę stanu, czyli stanu fizycznego urządzenia. Można zmienić format, pozwalając autorom treści dostosować sposób obsługi, a nowe interfejsy API zapewniają, że treści z internetu mogą reagować na różne stany zwijania.

Urządzenie może mieć 2 stany:

• folded: stan laptopa lub książki.

• continuous: płaski, tablet, a nawet zakrzywiony ekran.

CSS

Specyfikacja interfejsu Device Posture API definiuje nową funkcję CSS media-feature – device-posture. Ta funkcja multimediów przyjmuje zestaw stałych stanów. Te stany składają się z kilku wstępnie zdefiniowanych wartości, z których każda obejmuje fizyczny stan urządzenia.

Wartości funkcji device-posture pasują do poprzedniego opisu możliwych stanów:

• folded
• continuous

W przyszłości możemy dodać nowe stany, gdy pojawią się na rynku nowe urządzenia.

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

Aby można było wysłać zapytanie 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. gdy użytkownik całkowicie otworzy urządzenie i przejdzie z trybu folded do continuous, zasubskrybuj zdarzenia change.

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

Interfejs API segmentów widocznych obszarów

Segmenty widocznego obszaru to zmienne środowiskowe CSS, które definiują pozycję i wymiary logicznie oddzielonego obszaru widocznego obszaru. Segmenty widocznych obszarów tworzy się, gdy widoczny obszar jest dzielony przez co najmniej 1 element sprzętowy (np. zwinięcie lub zawias między osobnymi wyświetlaczami), które pełnią funkcję separu. Segmenty to obszary widocznego obszaru, które autor może traktować jako logicznie różne.

CSS

Liczba podziałów logicznych jest przedstawiona za pomocą 2 nowych funkcji multimedialnych zdefiniowanych w specyfikacji zapytań o media CSS na poziomie 5: vertical-viewport-segments i horizontal-viewport-segments. Ich długość zależy od liczby segmentów, na które podzielony jest widoczny obszar.

Dodaliśmy też nowe zmienne środowiskowe, które pozwalają wykonywać zapytania dotyczące wymiarów każdego podziału logicznego. Te zmienne 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 poziomy segment to x 0, y 0, drugi x 1 i y 0. Pierwszy pionowy segment to x 0, y 0, drugi x 0 i y 1.

Poniższy fragment kodu to uproszczony przykład podzielonego UX, w którym po każdej stronie strony widocznej na ekranie znajdują się 2 sekcje treści (col1 i col2).

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

Poniższe zdjęcia pokazują, jak wygląda strona na urządzeniu fizycznym.

JavaScript

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

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

Uwaga: w trakcie testowania origin window.visualViewport.segments będzie działać. Ostateczny kształt interfejsu API musi zostać określony zgodnie z opisem w ramach dyskusji Grupy roboczej ds. usług porównywania cen.

Każdy wpis w tablicy segments reprezentuje każdy logiczny segment widocznego obszaru z elementem DOMArray opisującym współrzędne i rozmiar. Pole segments zawiera podgląd danego stanu po wysłaniu zapytania. Aby otrzymywać zaktualizowane wartości, musisz nasłuchiwać zmian stanu lub zmiany rozmiaru zdarzeń i ponownie przesłać zapytanie do właściwości segments.

Wypróbuj składane interfejsy API

Składane interfejsy API są dostępne w wersji próbnej origin od Chrome 125 do wersji 128. Więcej informacji o testowaniu origin znajdziesz w artykule Pierwsze kroki z testowaniem origin.

Na potrzeby testów lokalnych składane interfejsy API można włączyć za pomocą flagi funkcji Eksperymentalnej platformy internetowej (chrome://flags/#enable-experimental-web-platform-features). Możesz też to zrobić, uruchamiając Chrome z wiersza poleceń, używając polecenia --enable-experimental-web-platform-features.

Przykłady

Wersje demonstracyjne znajdziesz w repozytorium demonstracji. Jeśli nie masz fizycznego urządzenia, na którym można by przeprowadzić test, w Narzędziach deweloperskich w Chrome wybierz emulację urządzenia Galaxy Z Fold 5 lub Asus Zenbook Fold, a następnie przełącz się między trybem Ciągły lub Składany. W razie potrzeby możesz też zwizualizować zawias.

Powiązane artykuły

• Device Posture API
  • Pozycja w Mozilli
  • Pozycja WebKit
  • Wpis stanu Chrome
  • Specyfikacja W3C
• Viewport Segments API
  • Pozycja w Mozilli
  • Pozycja WebKit
  • Wpis stanu Chrome
  • Specyfikacja zmiennej środowiskowej CSS W3C i Specyfikacja zmiennej środowiskowej CSS W3C