Składane smartfony wkraczają na scenę – i web开发者zy nie zostają w tyle

Przyznaję się bez bicia – składane telefony kręciły się wokół mnie przez ostatnie lata jak duch, którego nie mogłem złapać. Użytkownicy Androida korzystali z nich na co dzień, podczas gdy reszta z nas oglądała z boku, od czasu do czasu zazdrośnie przyglądając się tym eleganckim demo. Ale Apple w końcu zrobiło krok do przodu i niezależnie od tego, po której stronie barykady stoisz, ta zmiana ma ogromne znaczenie dla społeczności web developerów.

Jako ktoś, kto bacznie obserwuje ten rynek (i kto może nieco za dużo czasu spędził na zabawie z symulatorem iPhone'a Duo), mogę powiedzieć jedno: webowe API wspierające te urządzenia są zaskakująco dopracowane. Apple udostępniło sześć filmów o budowaniu aplikacji dla Duo, i choć spora część to teren natywnych aplikacji iOS, to developerom frontendowym zostawiono naprawdę interesujące możliwości.

Czas więc zanurzyć się w szczegóły i sprawdzić, co możesz wykorzystać już dziś.

Device Posture API – poznaj swoje urządzenie

Na pierwszy ogień idzie Device Posture API. Ta mała, przydatna funkcja informuje Cię, czy użytkownik patrzy na płaski ekran, złożony wyświetlacz czy coś pomiędzy. Traktuj to jak status aktualizacji od Twojego urządzenia o jego fizycznym stanie.

W JavaScript masz dostęp do navigator.devicePosture, które powie Ci, czy ekran jest continuous (zwykły, płaski) czy folded (częściowo złożony, jak laptop). W CSS wygląda to jeszcze czytelniej:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

To potężne narzędzie dla odtwarzaczy wideo, czytników dokumentów czy aplikacji, które skorzystają na dwuekranowym ustawieniu. Wyobraź sobie, że Twój player automatycznie przenosi kontrolki na dolny ekran, gdy urządzenie jest złożone – tak, to już działa.

Viewport Segments API – podziel i zwyciężaj

Jeśli Device Posture API mówi Ci o stanie urządzenia, Viewport Segments API opisuje jego anatomię. Kiedy składany telefon jest częściowo zamknięty, tworzy wyraźne obszary ekranu, a to API pozwala je programowo odpytywać.

W JavaScript window.visualViewport.segments zwraca tablicę DOMRects opisujących rozmiar, kształt i pozycję każdego segmentu. W CSS masz jeszcze więcej elastyczności:

/* Styluj układ na podstawie liczby segmentów */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

Zmienne środowiskowe CSS są tutaj szczególnie eleganckie. env(viewport-segment-width 1 0) zwraca szerokość segmentu o indeksie poziomym 1 i pionowym 0. Chwila, żeby ogarnąć ten układ współrzędnych, ale jak już załapiejsz logikę, możliwości są nieograniczone.

Dlaczego to ma znaczenie dla Twoich projektów

Oto sedno sprawy – składane telefony przestały być niszowym produktem. Wchodzą do głównego nurtu, a webowe API są już gotowe, żeby je wspierać. W NameOcean dużo mówimy o budowaniu z myślą o przyszłości, i to doskonały przykład, dlaczego to takie ważne.

Dla startupów i developerów otwiera to zupełnie nowe wzorce interakcji. Aplikacja podróżnicza może pokazywać mapę na jednym ekranie, a szczegóły rezerwacji na drugim. Sklep internetowy wyświetli zdjęcia produktu obok recenzji. Edytor kodu wreszcie da mobilnym developerom prawdziwe split-view bez żadnej natywnej apki.

Zmarszczka na ekranie nie jest ograniczeniem – to szansa. I dzięki tym API możesz budować doświadczenia, które czują się natywne na składanym sprzęcie, jednocześnie pozostając dostępne dla wszystkich na zwykłym internecie.

Od czego zacząć

Najlepsze? Nie musisz biegać po sklepach po składany telefon, żeby zacząć eksperymentować. Safari Technology Preview i Chrome DevTools mają wbudowane wsparcie symulatorów dla tych API. Uruchom wirtualne urządzenie, przełączaj się między stanami płaskim i złożonym i obserwuj, jak Twoje układy adaptują się w czasie rzeczywistym.

Jeśli prowadzisz stronę firmową lub web app, teraz jest idealny moment, żeby przejrzeć swoją strategię responsive designu. Pytanie nie brzmi, czy składane telefony będą miały znaczenie – chodzi o to, czy będziesz gotowy, gdy użytkownicy zaczną się z nimi pojawiać.

Platforma webowa ewoluuje w fascynujący sposób, a takie API pokazują, że potrafi reagować szybko, gdy hardware inspiruje nowe interakcje. Teraz Twoja kolej, żeby się złożyć.