Testowanie origin dla składanych interfejsów API

Alexis Menard
Alexis Menard
X GitHub
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ą one nazywane zbiorczo interfejsami API składanych urządzeń i mają ułatwiać deweloperom tworzenie aplikacji na składane urządzenia. W tym poście przedstawiamy te interfejsy API i podajemy informacje o tym, jak rozpocząć ich testowanie.

Istnieją 2 główne formaty fizyczne: urządzenia z pojedynczym elastycznym ekranem (bezszwowe) i urządzenia z 2 ekranami (z szwami, zwane także urządzeniami z podwójnym ekranem).

Rysunek poglądowy urządzenia z jednym elastycznym ekranem (bezszwowym) po lewej stronie i urządzenia z dwoma ekranami (ze szwem, zwanym też podwójnym ekranem) po prawej stronie.

Urządzenia te stanowią dla deweloperów wyzwanie i stwarzają nowe możliwości. Dodają one dodatkowe sposoby wyświetlania treści. Użytkownik może na przykład trzymać urządzenie bezszwowe jak książkę, a potem używać go jak tabletu z płaskim ekranem. Urządzenia z 2 ekranami mają fizyczny łącznik między ekranami, który może wymagać uwzględnienia.

Te nowe interfejsy API umożliwiają deweloperom tworzenie aplikacji, które zapewniają lepsze wrażenia użytkownika na tych urządzeniach. Każdy interfejs API udostępnia potrzebne elementy platformy internetowej na 2 sposoby: za pomocą języka CSS i JavaScript.

Interfejs Device Posture API

Składane urządzenia mają funkcje, które umożliwiają zmianę _postawy_, czyli fizycznego stanu urządzenia. Mogą one zmieniać swój format, co pozwala autorom treści zapewniać użytkownikom różne wrażenia. Nowe interfejsy API sprawiają, że treści internetowe mogą reagować na różne stany składania.

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

  • folded: pozycja podczas korzystania z laptopa lub książki.

Rysunek schematyczny urządzeń w pozycji poziomej lub w postaci tabletu oraz bezszwowego wyświetlacza.

  • continuous: płaskie, tabletowe, a nawet bezszwonne wyświetlacze zakrzywione.

Rysunek schematyczny urządzeń w posturach laptopa lub książki.

CSS

Specyfikacja interfejsu Device Posture API definiuje nową cechę mediów device-posture. Ta funkcja multimediów przekształca się w zestaw stałych postaw. Te postawy składają się z liczby wstępnie zdefiniowanych wartości, z których każda obejmuje stan fizyczny urządzenia.

Wartości funkcji device-posture odpowiadają poprzedniemu opisowi możliwych postaw:

  • folded
  • continuous

W przyszłości, gdy na rynek trafią nowe urządzenia, możemy dodać 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

Aby zapytać o postawę urządzenia, możesz użyć nowego obiektu DevicePosture.

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

Aby reagować na zmiany postawy urządzenia, np. gdy użytkownik otworzy urządzenie, przechodząc z folded na continuous, zasubskrybuj zdarzenia change.

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

Viewport Segments API

Segmenty widocznego obszaru to zmienne środowiskowe CSS, które określają położenie i wymiary logicznie oddzielnego regionu widocznego obszaru. Segmenty widoku są tworzone, gdy widok jest podzielony przez co najmniej 1 funkcję sprzętową (np. zawias lub zawias między oddzielnymi wyświetlaczami), która działa jako podział. Segmenty to obszary widocznego obszaru, które mogą być traktowane jako logicznie odrębne przez autora.

CSS

Liczba podziałów logicznych jest udostępniana za pomocą 2 nowych funkcji mediów zdefiniowanych w specyfikacji zapytań o multimedia CSS poziomu 5: vertical-viewport-segments i horizontal-viewport-segments. Rozwijają się do liczby segmentów, na które podzielono widok.

Ponadto do zapytań dotyczących wymiarów poszczególnych podziałów logicznych dodaliśmy nowe zmienne środowiskowe. 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 odpowiadają odpowiednio pozycji x i y w dwudwumiarowej siatce utworzonej przez funkcje sprzętowe oddzielające segmenty.

Diagram pokazujący segmenty poziome i pionowe Pierwszy segment poziomy to x 0 i y 0, a drugi to x 1 i y 0. Pierwszy segment pionowy ma współrzędne x 0 i y 0, a drugi – x 0 i y 1.
Pierwszy poziomy segment ma współrzędne x 0 i y 0, a drugi – x 1 i y 0. Pierwszy segment pionowy ma współrzędne x 0 i y 0, a drugi – x 0 i y 1.

Ten fragment kodu to uproszczony przykład tworzenia UX podzielonego, w którym po obu stronach mamy 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>

Na tych zdjęciach widać, jak wygląda korzystanie z tej funkcji na urządzeniu fizycznym.

Składany telefon w pionowej pozycji książki.

Składany telefon w poziomie.

Składany tablet w poziomie, w pozycji książki.

JavaScript

Aby uzyskać liczbę segmentów widoku, sprawdź wpis segments w pliku visualViewport.

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

Każdy wpis w tablicy segments odpowiada poszczególnym logicznym segmentom strefy widoku, a element DOMArray zawiera opis współrzędnych i wielkości. Pole segments to migawka danego stanu w momencie zapytania. Aby otrzymywać zaktualizowane wartości, musisz nasłuchiwać zmian postawy lub zdarzeń zmiany rozmiaru i ponownie wysyłać zapytanie do właściwości segments.

Wypróbuj interfejsy Foldable API

Interfejsy API urządzeń składanych są dostępne w testowaniu origin w wersjach Chrome od 125 do 128. Więcej informacji o testach pochodzenia znajdziesz w artykule Pierwsze kroki z testami pochodzenia.

Aby przeprowadzić testy lokalne, możesz włączyć interfejsy API Foldable za pomocą flagi funkcji eksperymentalnych platformy internetowej na stronie chrome://flags/#enable-experimental-web-platform-features. Możesz też włączyć tę funkcję, uruchamiając Chrome z poziomu wiersza poleceń z parametrem --enable-experimental-web-platform-features.

Prezentacje

Wersje demonstracyjne znajdziesz w repozytorium demonstracji. Jeśli nie masz fizycznego urządzenia do testowania, możesz wybrać urządzenie emulowane Galaxy Z Fold 5 lub Asus Zenbook Fold w Chrome DevTools i przełączać się między trybami Ciągły i Złożony. W stosownych przypadkach możesz też wyświetlić zawias.

Narzędzia deweloperskie w Chrome emulujące urządzenie składane.