Korzystanie z trybu pełnoekranowego

Możemy łatwo tworzyć realistyczne pełnoekranowe witryny i aplikacje, ale, jak każdy inny internet, jest to na kilka sposobów. Jest to szczególnie istotne teraz, gdy coraz więcej przeglądarek obsługuje „zainstalowaną aplikację internetową” uruchamianą na pełnym ekranie.

Wyświetlanie aplikacji lub witryny na pełnym ekranie

Użytkownik lub programista może uzyskać dostęp do pełnego ekranu aplikacji internetowej na kilka sposobów.

  • Żądaj w odpowiedzi na gest użytkownika przejścia na pełny ekran.
  • Zainstaluj aplikację na ekranie głównym.
  • Zafałszuj: automatycznie ukrywaj pasek adresu.

Wysyłanie do przeglądarki prośby o przejście do trybu pełnoekranowego w odpowiedzi na gest użytkownika

Nie wszystkie platformy są sobie równe. W iOS Safari nie ma pełnoekranowego interfejsu API, ale robimy to w Chrome na Androidzie, w Firefoksie oraz w IE 11 i nowszych wersjach. Większość tworzonych aplikacji korzysta z kombinacji interfejsu JavaScript API i selektorów arkusza CSS dostarczanych przez specyfikację pełnoekranową. Główne interfejsy API JavaScript, na które musisz zwrócić uwagę przy tworzeniu interfejsu pełnoekranowego, to:

  • element.requestFullscreen() (obecny prefiks w Chrome, Firefox i IE) wyświetla element w trybie pełnoekranowym.
  • document.exitFullscreen() (obecnie ma prefiks w przeglądarkach Chrome, Firefox i IE. Firefox używa zamiast niego cancelFullScreen()) anuluje tryb pełnoekranowy.
  • document.fullscreenElement (obecnie w Chrome, Firefox i IE) zwraca wartość „prawda”, jeśli którykolwiek z elementów jest w trybie pełnoekranowym.

Gdy aplikacja jest w trybie pełnoekranowym, interfejs przeglądarki nie jest już dostępny. W ten sposób zmienisz sposób, w jaki użytkownicy korzystają z Twoich usług. Nie mają standardowych elementów sterujących, takich jak Dalej i Wstecz. Nie mają wyjścia awaryjnego, czyli przycisku odświeżania. Ważne jest, aby przygotować się na taki scenariusz. Niektóre selektory arkusza CSS pomagają zmienić styl i sposób prezentacji witryny, gdy przejdzie ona do trybu pełnoekranowego.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Powyższy przykład jest trochę przerysowany – cała złożoność stosowania prefiksów dostawców jest ukryta.

Rzeczywisty kod jest znacznie bardziej złożony. Mozilla stworzyła bardzo przydatny skrypt, którego możesz używać do przełączania pełnego ekranu. Jak widać, sytuacja z prefiksem dostawcy jest złożona i niewygodna w porównaniu z określonym interfejsem API. Nawet przy nieco uproszczonym kodzie poniżej jest wciąż złożony.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

My, twórcy stron internetowych, nienawidzimy złożoności. Przydatny abstrakcyjny interfejs API wysokiego poziomu, którego można użyć, to Sindre Sorhus' Screenfull.js, który łączy oba nieco różne interfejsy API JavaScript i prefiksy dostawców w jeden spójny prefiks.

Wskazówki dotyczące pełnoekranowego interfejsu API

Otwieram dokument na pełnym ekranie
Pełny ekran z elementem głównym
Rys. 1. Pełny ekran w elemencie głównym

To naturalne, że uznajesz element treści za pełny ekran, ale jeśli używasz silnika renderowania opartego na technologii WebKit lub Blink, zauważysz dziwny skutek zmniejszenia szerokości treści do najmniejszego możliwego rozmiaru, która będzie zawierać całą zawartość. (Mozilla Gecko działa prawidłowo).

Pełny ekran na elemencie dokumentu
Rys. 2. Element dokumentu na pełnym ekranie.

Aby rozwiązać ten problem, użyj elementu document zamiast elementu body:

document.documentElement.requestFullscreen();
Ustawianie elementu wideo w trybie pełnoekranowym

Wyświetlanie elementu wideo na pełnym ekranie jest dokładnie takie samo jak włączanie pełnego ekranu dowolnego innego elementu. Wywołujesz w elemencie wideo metodę requestFullscreen.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

Jeśli element <video> nie ma zdefiniowanego atrybutu „control”, użytkownik nie może kontrolować filmu, gdy jest on wyświetlany na pełnym ekranie. Najlepiej jest utworzyć podstawowy kontener, który pakuje film i elementy sterujące, które mają być widoczne dla użytkownika.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Daje to znacznie większą elastyczność, ponieważ możesz łączyć obiekt container z pseudoselektorem CSS (np. aby ukryć przycisk „goFS”).

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Korzystając z tych wzorców, możesz wykrywać, kiedy jest włączony pełny ekran, i odpowiednio dostosowywać interfejs, na przykład:

  • Podając link zwrotny do strony startowej
  • Udostępniając mechanizm zamykania okien lub przewijania do tyłu.

Uruchamianie strony na pełnym ekranie z ekranu głównego

Nie można uruchomić pełnoekranowej strony internetowej w momencie, gdy użytkownik ją przechodzi. Dostawcy przeglądarek zdają sobie sprawę, że wyświetlenie pełnego ekranu podczas każdego wczytywania strony jest irytujące, dlatego włączenie trybu pełnoekranowego wymaga od użytkownika gestu. Dostawcy pozwalają użytkownikom na „instalowanie” aplikacji, a sama instalacja jest sygnałem dla systemu operacyjnego, że użytkownik chce uruchomić aplikację na platformie.

Na głównych platformach mobilnych można je łatwo wdrożyć za pomocą metatagów lub plików manifestu.

iOS

Od momentu premiery iPhone'a użytkownicy mogą instalować aplikacje internetowe na ekranie głównym i uruchamiać je jako pełnoekranowe aplikacje internetowe.

<meta name="apple-mobile-web-app-capable" content="yes" />

Jeśli wartość jest ustawiona na Tak, aplikacja internetowa działa w trybie pełnoekranowym. W przeciwnym razie nie. Domyślnie wyświetlane są treści w przeglądarce Safari. Za pomocą właściwości window.navigator.standalone dostępnej tylko do odczytu wartości logicznej JavaScript możesz określić, czy strona ma być wyświetlana w trybie pełnoekranowym.

Apple

Chrome na Androida,

Zespół Chrome niedawno wdrożył funkcję, która informuje przeglądarkę, że ma uruchamiać stronę w trybie pełnoekranowym, gdy użytkownik doda ją do ekranu głównego. Działa ona podobnie do przeglądarki Safari w iOS.

<meta name="mobile-web-app-capable" content="yes" />

Swoją aplikację internetową możesz tak skonfigurować, by na ekranie głównym urządzenia była dodawana ikona skrótu. Aplikacja będzie uruchamiana w „trybie aplikacji” na pełnym ekranie za pomocą opcji „Dodaj do ekranu głównego” w Chrome na Androida.

Google Chrome

Lepszym rozwiązaniem jest użycie pliku manifestu aplikacji internetowej.

Manifest aplikacji internetowej (Chrome, Opera, Firefox, Samsung)

Plik manifestu aplikacji internetowych to prosty plik JSON, który daje deweloperowi możliwość kontrolowania wyglądu aplikacji użytkownikowi w obszarach, w których może on zobaczyć aplikacje (np. na ekranie głównym urządzenia mobilnego), informacji o tym, co użytkownik może uruchomić oraz w jaki sposób może ją uruchomić. W przyszłości plik manifestu zapewni Ci jeszcze większą kontrolę nad aplikacją, ale na razie skupiamy się na wprowadzaniu aplikacji na rynek. Oto najważniejsze kwestie:

  1. Informowanie przeglądarki o pliku manifestu
  2. opis sposobu uruchamiania,

Gdy utworzysz plik manifestu i umieścisz go w witrynie, musisz tylko dodać do wszystkich stron dotyczących aplikacji tag linku w ten sposób:

<link rel="manifest" href="/manifest.json" />

Chrome obsługuje pliki manifestu od wersji 38 na Androida (październik 2014 r.). Daje Ci kontrolę nad tym, jak Twoja aplikacja internetowa wyświetla się po zainstalowaniu na ekranie głównym (za pomocą właściwości short_name, name i icons) oraz w jaki sposób powinna być uruchamiana, gdy użytkownik kliknie ikonę uruchamiania (za pomocą start_url, display i orientation).

Poniżej znajdziesz przykładowy plik manifestu. Nie pokazuje wszystkiego, co może zawierać plik manifestu.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Ta funkcja jest całkowicie progresywna i pozwala tworzyć lepsze, bardziej zintegrowane środowisko dla użytkowników przeglądarek, które ją obsługują.

Gdy użytkownik dodaje Twoją witrynę lub aplikację do ekranu głównego, powinien traktować ją jak aplikację. Oznacza to, że należy skierować go do funkcji aplikacji, a nie na stronę docelową produktu. Jeśli na przykład użytkownik musi zalogować się w aplikacji, jest to dobra strona, którą można uruchomić.

Aplikacje użytkowe

W przypadku większości aplikacji narzędziowych ta zmiana zostanie natychmiast zaproponowana. Takie aplikacje powinny być uruchamiane jako niezależne tak samo jak wszystkie pozostałe aplikacje na platformie mobilnej. Aby poprosić aplikację o uruchomienie samodzielnej, dodaj ten plik manifestu aplikacji internetowej:

    "display": "standalone"
Gry

W przypadku większości gier korzystanie z pliku manifestu będzie od razu korzystne. Większość gier będzie chciała wyświetlać się na pełnym ekranie i wymusić określoną orientację.

Jeśli tworzysz pionowy przewijak lub grę, taką jak Flappy Birds, najprawdopodobniej chcesz, aby gra zawsze miała tryb pionowy.

    "display": "fullscreen",
    "orientation": "portrait"

Jeśli jednak tworzysz grę logiczną lub grę taką jak X-Com, lepiej będzie, że zawsze będzie w orientacji poziomej.

    "display": "fullscreen",
    "orientation": "landscape"
Serwisy informacyjne

W większości przypadków witryny z wiadomościami są oparte wyłącznie na treści. Większość programistów oczywiście nie wpadnie na pomysł dodania pliku manifestu do witryny z wiadomościami. Plik manifestu pozwoli Ci określić, co ma się uruchamiać (pierwsza strona witryny z wiadomościami) i jak to zrobić (w trybie pełnego ekranu lub jako zwykła karta przeglądarki).

Wybór należy do Ciebie i tego, jak Twoim zdaniem użytkownicy będą korzystać z Twojej aplikacji. Jeśli chcesz, aby w Twojej witrynie były wszystkie przeglądarki Chrome, jakich oczekujesz, możesz ustawić wyświetlacz na browser.

    "display": "browser"

Jeśli chcesz, aby Twoja witryna z wiadomościami miała wrażenie, że większość aplikacji z wiadomościami traktuje je jak aplikacje, i usuwa z interfejsu cały Chrome tradycyjny, ustaw w tym celu ustawienie wyświetlania na standalone.

    "display": "standalone"

Fałszywe: automatyczne ukrywanie paska adresu

Możesz utworzyć fałszywy pasek adresu, automatycznie ukrywając pasek adresu w ten sposób:

window.scrollTo(0, 1);

Jest to całkiem prosta metoda: strona wczytuje się, a pasek przeglądarki wyświetla komunikat, żeby zejść z niej. Nie jest on jednak ustandaryzowany ani nie jest dobrze obsługiwany. Trzeba też radzić sobie z pewnymi osobliwościami.

Na przykład przeglądarki często przywracają pozycję na stronie, gdy użytkownik ją otworzy. Użycie polecenia window.scrollTo zastępuje tę zasadę, co irytuje użytkownika. Aby obejść ten problem, musisz zapisać ostatnią pozycję w lokalu localStorage i zajmować się przypadkami skrajnymi (np. jeśli użytkownik ma stronę otwartą w wielu oknach).

Wytyczne na temat UX

Tworząc witrynę wykorzystującą pełny ekran, musisz wziąć pod uwagę szereg potencjalnych zmian związanych z wygodą użytkowników, o których musisz wiedzieć, by tworzyć usługi, które będą im się podobać.

Nie polegaj na elementach sterujących nawigacji

iOS nie ma sprzętowego przycisku Wstecz ani gestu odświeżania. Dlatego musisz się upewnić, że użytkownicy mogą poruszać się po aplikacji bez logowania się.

Można bez problemu wykryć, czy urządzenie działa w trybie pełnoekranowym czy w trybie zainstalowanym na wszystkich głównych platformach.

iOS

W przypadku iOS możesz użyć wartości logicznej navigator.standalone, aby sprawdzić, czy użytkownik uruchomił stronę z poziomu ekranu głównego.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Manifest aplikacji internetowej (Chrome, Opera, Samsung)

Gdy Chrome jest uruchamiany jako zainstalowana aplikacja, Chrome nie działa w rzeczywistym środowisku pełnoekranowym, więc document.fullscreenElement zwraca wartość null, a selektory arkusza CSS nie działają.

Gdy użytkownik za pomocą gestu w witrynie wysyła żądanie pełnego ekranu, dostępne są standardowe pełnoekranowe interfejsy API, w tym pseudoselektor CSS, który umożliwia dostosowanie interfejsu do reakcji na pełny ekran, jak w przykładzie poniżej.

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Jeśli użytkownicy będą uruchamiać witrynę z ekranu głównego, zapytanie o multimedia display-mode zostanie ustawione na to, co zostało zdefiniowane w pliku manifestu aplikacji internetowej. W przypadku pełnego ekranu będzie to:

@media (display-mode: fullscreen) {
}

Jeśli użytkownik uruchomi aplikację w trybie samodzielnym, zapytanie o multimedia display-mode będzie miało postać standalone:

@media (display-mode: standalone) {
}

Firefox

Gdy użytkownik wysyła żądanie pełnego ekranu w Twojej witrynie lub uruchamia aplikację w trybie pełnoekranowym, dostępne są wszystkie standardowe interfejsy API tego typu, w tym pseudoselektor CSS, który pozwala dostosować interfejs użytkownika tak, aby dostosować go do stanu pełnoekranowego, jak w przykładach poniżej:

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

W IE pseudoklasa CSS nie ma łącznika, ale poza tym działa podobnie do Chrome i Firefoksa.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Specyfikacja

Pisownia w specyfikacji jest zgodna ze składnią używaną w IE.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Pozwól użytkownikowi korzystać z pełnego ekranu.

Pełnoekranowy interfejs API bywa czasem nieco skomplikowany. Dostawcy przeglądarek nie chcą blokować użytkowników na pełnym ekranie, więc opracowali mechanizmy, które jak najszybciej wychodzą z tego trybu. Oznacza to, że nie da się utworzyć witryny pełnoekranowej obejmującej wiele stron, ponieważ:

  • Zautomatyzowana zmiana adresu URL za pomocą elementu window.location = "http://example.com" poza pełnym ekranem.
  • Użytkownik klikający link zewnętrzny na Twojej stronie zamknie pełny ekran.
  • Zmiana adresu URL za pomocą interfejsu navigator.pushState API spowoduje też przerwanie działania pełnoekranowego.

Jeśli chcesz zatrzymać użytkownika na pełnym ekranie, masz 2 możliwości:

  1. Aby wyświetlić pełny ekran, użyj mechanizmów instalowanych aplikacji internetowych.
  2. Zarządzaj interfejsem i stanem aplikacji za pomocą fragmentu #.

Dzięki #syntax aktualizacji adresu URL (window.location = "#somestate”) i nasłuchiwaniu zdarzenia window.onhashchange możesz użyć stosu historii przeglądarki do zarządzania zmianami stanu aplikacji, umożliwić użytkownikowi korzystanie ze sprzętowych przycisków Wstecz lub prostego zautomatyzowanego przycisku Wstecz za pomocą interfejsu API historii w ten sposób:

window.history.go(-1);

Pozwól użytkownikowi wybrać, kiedy ma przejść do trybu pełnoekranowego

Nie ma nic bardziej irytującego dla użytkownika niż nieoczekiwane działanie witryny. Gdy użytkownik przechodzi do witryny, nie próbuj wyświetlać go w trybie pełnoekranowym.

Nie przechwytuj pierwszego zdarzenia kliknięcia i nie wywołaj funkcji requestFullscreen().

  1. To denerwujące.
  2. Przeglądarki mogą w przyszłości poprosić użytkownika o zezwolenie na korzystanie z pełnego ekranu.

Jeśli chcesz uruchamiać aplikacje na pełnym ekranie, pomyśl o skorzystaniu z metody instalacji na każdej z platform.

Nie wysyłaj spamu do użytkowników z prośbą o zainstalowanie aplikacji na ekranie głównym.

Jeśli planujesz wyświetlanie treści na pełnym ekranie za pomocą zainstalowanych mechanizmów aplikacji, weź pod uwagę, że użytkownicy powinni korzystać z aplikacji.

  • Zachowaj dyskrecję. Użyj banera lub stopki, żeby poinformować użytkowników, że mogą zainstalować aplikację.
  • Jeśli użytkownik odrzuci prośbę, nie pokazuj jej ponownie.
  • Przy pierwszej wizycie użytkownicy prawdopodobnie nie będą chcieli zainstalować aplikacji, chyba że będą zadowoleni z Twojej usługi. Rozważ zachęcenie ich do instalacji po pozytywnej interakcji z witryną.
  • Jeśli użytkownik regularnie odwiedza Twoją witrynę i nie instaluje aplikacji, prawdopodobnie nie zainstaluje jej w przyszłości. Nie rozsyłaj spamu.

Podsumowanie

Chociaż nie mamy w pełni ustandaryzowanego ani zaimplementowanego interfejsu API, dzięki kilku wskazówkom przedstawionym w tym artykule możesz łatwo tworzyć rozwiązania, które wykorzystują cały ekran użytkownika, niezależnie od klienta.

Prześlij opinię