Umożliwiamy łatwe tworzenie pełnoekranowych witryn i aplikacji, ale jak w przypadku innych rzeczy w internecie, istnieje kilka sposobów na to. Jest to szczególnie ważne teraz, gdy coraz więcej przeglądarek obsługuje „zainstalowaną aplikację internetową”, która uruchamia się na pełnym ekranie.
Przechodzenie do trybu pełnoekranowego w aplikacji lub witrynie
Użytkownik lub deweloper może włączyć tryb pełnoekranowy aplikacji internetowej na kilka sposobów.
- Przejście do trybu pełnoekranowego w reakcji na gest użytkownika.
- Zainstaluj aplikację na ekranie głównym.
- Ukryj: automatycznie ukryj pasek adresu.
Prośba o włączenie trybu pełnoekranowego w odpowiedzi na gest użytkownika
Nie wszystkie platformy są takie same. W Safari na iOS nie ma interfejsu Fullscreen API, ale jest on dostępny w Chrome na Androida, Firefoxie i IE 11 i nowszych. Większość tworzonych przez Ciebie aplikacji będzie używać kombinacji interfejsu JS API i selektorów CSS udostępnionych przez specyfikację pełnego ekranu. Podczas tworzenia interfejsu pełnoekranowego musisz zwrócić uwagę na te najważniejsze interfejsy API JS:
element.requestFullscreen()
(obecnie w Chrome, Firefox i IE) wyświetla element w trybie pełnoekranowym.document.exitFullscreen()
(obecnie z prefiksem w Chrome, Firefox i IE. Firefox używacancelFullScreen()
zamiastcancelFullScreen()
, aby anulować tryb pełnoekranowy.document.fullscreenElement
(obecnie z prefiksem 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, nie masz już dostępu do elementów sterujących interfejsu przeglądarki. Zmiana ta wpływa na sposób interakcji użytkowników z Twoją usługą. Nie mają standardowych elementów sterujących, takich jak przyciski Wstecz i Dalej, ani przycisku odświeżania, który pozwala na wyjście z aplikacji. Ważne jest uwzględnienie tego scenariusza. Możesz użyć selektorów CSS, aby zmienić styl i prezentację witryny, gdy przeglądarka przejdzie w tryb pełnoekranowy.
<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 nieco sztuczny. Ukryłem całą złożoność związaną z użyciem prefiksów dostawców.
Prawdziwy kod jest znacznie bardziej złożony. Mozilla stworzyła bardzo przydatny skrypt, który umożliwia przełączanie trybu pełnoekranowego. Jak widzisz, sytuacja z prefiksem dostawcy jest skomplikowana i niewygodna w porównaniu ze specyfikacją interfejsu API. Nawet po uproszczeniu kodu poniżej jest on nadal skomplikowany.
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, programiści stron internetowych, nie lubimy złożoności. Przydatnym abstrakcyjnym interfejsem API, którego możesz używać, jest moduł Screenfull.js autorstwa Sindre Sorhus. Łączy on 2 nieco różniące się od siebie interfejsy API JavaScriptu i prefiksy dostawców w jeden spójny interfejs API.
Wskazówki dotyczące interfejsu Fullscreen API
Wyświetlanie dokumentu na pełnym ekranie
Naturalnie zakładasz, że element body zajmuje cały ekran, ale jeśli używasz silnika renderowania opartego na WebKit lub Blink, zauważysz, że ma on dziwny efekt zmniejszania szerokości body do najmniejszego możliwego rozmiaru, który pomieści cały zawartość. (Mozilla Gecko jest w porządku).
Aby to naprawić, użyj elementu document zamiast elementu body:
document.documentElement.requestFullscreen();
Ustawianie elementu wideo na pełnym ekranie
Aby wyświetlić element wideo na pełnym ekranie, postępuj tak samo jak w przypadku innych elementów. Wywołujesz metodę requestFullscreen
w elemencie wideo.
<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 controls, użytkownik nie będzie mógł sterować filmem po przejściu do trybu pełnoekranowego. Zalecane jest użycie podstawowego kontenera, który otacza 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 dużo większą elastyczność, ponieważ możesz połączyć obiekt kontenera 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>
Dzięki tym wzorom możesz wykryć, kiedy tryb pełnoekranowy jest aktywny, i odpowiednio dostosować interfejs użytkownika, np.:
- przez podanie linku do strony startowej.
- udostępniając mechanizm zamykania okienek dialogowych lub cofania się do poprzedniego stanu;
Uruchamianie strony w trybie pełnoekranowym z ekranu głównego
Nie można uruchomić strony internetowej w trybie pełnoekranowym, gdy użytkownik ją otworzy. Dostawcy przeglądarek wiedzą, że wyświetlanie pełnoekranowe po każdym załadowaniu strony jest bardzo uciążliwe, dlatego przejście w tryb pełnoekranowy wymaga działania użytkownika. Dostawcy zezwalają jednak użytkownikom na „instalowanie” aplikacji, a sam proces instalowania jest sygnałem dla systemu operacyjnego, że użytkownik chce uruchomić aplikację na platformie.
Na wszystkich głównych platformach mobilnych można łatwo zaimplementować tagi meta lub pliki manifestu w następujący sposób.
iOS
Od czasu wprowadzenia iPhone'a użytkownicy mogą instalować aplikacje internetowe na ekranie głównym i uruchamiać je w trybie pełnoekranowym.
<meta name="apple-mobile-web-app-capable" content="yes" />
Jeśli wartość „content” to „yes”, aplikacja internetowa działa w trybie pełnoekranowym. Domyślnie Safari wyświetla treści internetowe. Za pomocą właściwości JavaScript window.navigator.standalone, która jest tylko do odczytu, możesz określić, czy strona internetowa jest wyświetlana w trybie pełnoekranowym.
Apple
Chrome na Androida
Zespół Chrome wprowadził niedawno funkcję, która mówi przeglądarce, aby otwierała stronę na pełnym ekranie, gdy użytkownik doda ją do ekranu głównego. Jest on podobny do modelu Safari w iOS.
<meta name="mobile-web-app-capable" content="yes" />
Możesz skonfigurować aplikację internetową, aby dodać ikonę skrótu aplikacji do ekranu głównego urządzenia i uruchomić aplikację w trybie pełnoekranowym, korzystając z elementu menu „Dodaj do ekranu głównego” w Chrome na Androida.
Google Chrome
Lepszą opcją jest użycie pliku manifestu aplikacji internetowej.
Plik manifestu aplikacji internetowej (Chrome, Opera, Firefox, Samsung)
Plik manifestu aplikacji internetowej to prosty plik JSON, który daje deweloperowi możliwość kontrolowania wyglądu aplikacji w miejscach, w których użytkownik oczekuje, że zobaczy aplikacje (np. na ekranie głównym urządzenia mobilnego), określa, co użytkownik może uruchomić, oraz, co ważniejsze, jak może to zrobić. W przyszłości manifest zapewni Ci jeszcze większą kontrolę nad aplikacją, ale obecnie skupiamy się na sposobie uruchamiania aplikacji. Oto najważniejsze kwestie:
- Informowanie przeglądarki o pliku manifestu
- Opis sposobu uruchomienia
Gdy manifest zostanie utworzony i przechowywany w witrynie, wystarczy dodać tag linku ze wszystkich stron, które obejmują aplikację, w ten sposób:
<link rel="manifest" href="/manifest.json" />
Chrome obsługuje pliki manifestu od wersji 38 na Androida (październik 2014 r.). Dzięki temu możesz kontrolować wygląd swojej aplikacji internetowej po zainstalowaniu na ekranie głównym (za pomocą właściwości short_name
, name
i icons
) oraz sposób jej uruchamiania po kliknięciu przez użytkownika ikony uruchamiania (za pomocą właściwości start_url
, display
i orientation
).
Przykładowy plik manifestu został pokazany poniżej. Nie pokazuje on wszystkiego, co może się znaleźć w pliku 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 w pełni progresywna i pozwala tworzyć lepsze, bardziej zintegrowane wrażenia dla użytkowników przeglądarki, która obsługuje tę funkcję.
Gdy użytkownik dodaje Twoją witrynę lub aplikację do ekranu głównego, oznacza to, że zamierza traktować ją jak aplikację. Oznacza to, że powinieneś skierować użytkownika do funkcji aplikacji, a nie na stronę docelową produktu. Jeśli na przykład użytkownik musi się zalogować w aplikacji, to właśnie ta strona powinna się otworzyć.
Aplikacje narzędziowe
Większość aplikacji użytkowych od razu zacznie z niego korzystać. W przypadku tych aplikacji prawdopodobnie zechcesz je uruchamiać osobno, tak jak każdą inną aplikację na platformie mobilnej. Aby aplikacja uruchamiała się samodzielnie, dodaj to do pliku manifestu aplikacji internetowej:
"display": "standalone"
Gry
Większość gier od razu skorzysta na użyciu pliku manifestu. Większość gier będzie uruchamiana na pełnym ekranie i z wymuszonym określonym układem.
Jeśli tworzysz grę typu „scroller” lub grę typu Flappy Birds, prawdopodobnie będziesz chciał, aby zawsze była ona w orientacji pionowej.
"display": "fullscreen",
"orientation": "portrait"
Jeśli natomiast tworzysz grę logiczną lub grę typu X-Com, prawdopodobnie będziesz chciał, aby zawsze była ona wyświetlana w orientacji poziomej.
"display": "fullscreen",
"orientation": "landscape"
Witryny informacyjne
W większości przypadków witryny z wiadomościami są przeznaczone wyłącznie do wyświetlania treści. Większość deweloperów nie pomyślałaby o dodaniu pliku manifestu do witryny z wiadomościami. W pliku manifestu możesz określić, co ma się otwierać (stronę główną witryny z wiadomościami) oraz jak (w trybie pełnoekranowym lub na zwykłej karcie przeglądarki).
Wybór należy do Ciebie i Twoich przewidywań dotyczących tego, jak użytkownicy będą uzyskiwać dostęp do Twojej aplikacji. Jeśli chcesz, aby Twoja witryna miała wszystkie elementy interfejsu przeglądarki, które są z nią kojarzone, możesz ustawić wyświetlanie na browser
.
"display": "browser"
Jeśli chcesz, aby Twoja witryna z informacjami wyglądała jak większość aplikacji skoncentrowanych na wiadomościach i aby usunąć z interfejsu wszystkie elementy przypominające przeglądarkę, ustaw wyświetlanie na standalone
.
"display": "standalone"
Udawaj: automatycznie chowaj pasek adresu
Możesz „udawać tryb pełnoekranowy”, automatycznie ukrywając pasek adresu w ten sposób:
window.scrollTo(0, 1);
To dość prosta metoda. Strona się wczytuje, a pasek przeglądarki znika z drogi. Niestety nie jest ono ustandaryzowane ani dobrze obsługiwane. Musisz też obejść wiele problemów.
Na przykład przeglądarki często przywracają pozycję na stronie, gdy użytkownik do niej wraca. Użycie window.scrollTo
zastąpi to, co może zirytować użytkownika. Aby tego uniknąć, musisz zapisać ostatnią pozycję w localStorage i rozwiązać problemy szczególne (np. jeśli użytkownik ma stronę otwartą w kilku oknach).
Wytyczne dotyczące UX
Podczas tworzenia witryny, która korzysta z pełnoekranowego interfejsu, musisz wziąć pod uwagę kilka potencjalnych zmian w wygodzie użytkowników, aby móc stworzyć usługę, która spodoba się użytkownikom.
Nie polegaj na elementach sterujących nawigacją
System iOS nie ma przycisku Wstecz ani gestów odświeżania. Dlatego musisz zadbać o to, aby użytkownicy mogli swobodnie poruszać się po aplikacji.
Na wszystkich głównych platformach możesz łatwo wykryć, czy aplikacja działa w trybie pełnoekranowym czy w trybie zainstalowanym.
iOS
Na iOS możesz użyć wartości logicznej navigator.standalone
, aby sprawdzić, czy użytkownik uruchomił aplikację z ekranu głównego.
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
Manifest aplikacji internetowej (Chrome, Opera, Samsung)
Gdy uruchamiasz zainstalowaną aplikację, Chrome nie działa w trybie pełnoekranowym, więc document.fullscreenElement
zwraca wartość null, a selektory CSS nie działają.
Gdy użytkownik w Twojej witrynie poprosi o pełny ekran za pomocą gestu, będą dostępne standardowe interfejsy API pełnego ekranu, w tym pseudoselektor CSS, który umożliwia dostosowanie interfejsu użytkownika do stanu pełnego ekranu, na przykład:
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żytkownik uruchamia Twoją witrynę z ekranu głównego, zapytanie o multimedia display-mode
zostanie ustawione zgodnie z definicją w pliku manifestu aplikacji internetowej. W przypadku czystego trybu pełnoekranowego:
@media (display-mode: fullscreen) {
}
Jeśli użytkownik uruchomi aplikację w trybie samodzielnym, zapytanie o media display-mode
będzie wyglądać tak: standalone
:
@media (display-mode: standalone) {
}
Firefox
Gdy użytkownik żąda trybu pełnoekranowego w Twojej witrynie lub uruchamia aplikację w trybie pełnoekranowym, dostępne są wszystkie standardowe interfejsy API trybu pełnoekranowego, w tym pseudoselektor CSS, który umożliwia dostosowanie interfejsu użytkownika do trybu pełnoekranowego.
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 zawiera łącznika, ale poza tym działa podobnie jak w Chrome i Firefox.
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ą przez IE.
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Zachowanie pełnoekranowego interfejsu
Interfejs API pełnego ekranu może czasami działać nieprawidłowo. Dostawcy przeglądarek nie chcą blokować użytkowników na stronie pełnoekranowej, dlatego opracowali mechanizmy, które jak najszybciej wymuszają wyjście z trybu pełnoekranowego. Oznacza to, że nie możesz utworzyć strony internetowej pełnoekranowej, która obejmuje kilka stron, ponieważ:
- Zmiana adresu URL za pomocą kodu za pomocą
window.location = "http://example.com"
powoduje wyjście z trybu pełnoekranowego. - Użytkownik, który kliknie link zewnętrzny na stronie, opuści tryb pełnoekranowy.
- Zmiana adresu URL za pomocą interfejsu API
navigator.pushState
również spowoduje wyjście z trybu pełnoekranowego.
Jeśli chcesz, aby użytkownik korzystał z reklamy w trybie pełnoekranowym, masz 2 opcje:
- Aby wyświetlić aplikację internetową w trybie pełnoekranowym, użyj mechanizmu instalowania aplikacji internetowych.
- Zarządzaj interfejsem użytkownika i stanem aplikacji za pomocą fragmentu #.
Za pomocą składni # możesz aktualizować adres URL (window.location = „#somestate”) i słuchać zdarzenia window.onhashchange
, aby używać własnej sekcji historii przeglądarki do zarządzania zmianami stanu aplikacji, zezwalać użytkownikowi na korzystanie z przycisków sprzętowych Wstecz lub oferować prostą możliwość programowego używania przycisku Wstecz, korzystając z interfejsu History API w ten sposób:
window.history.go(-1);
Pozwól użytkownikowi wybrać, kiedy ma włączyć tryb pełnoekranowy
Nie ma nic bardziej irytującego dla użytkownika niż strona, która robi coś nieoczekiwanego. Gdy użytkownik wejdzie na Twoją stronę, nie próbuj go oszukać, aby włączył tryb pełnoekranowy.
Nie przechwytuj pierwszego zdarzenia dotknięcia i nie wywołuj funkcji requestFullscreen()
.
- To jest denerwujące.
- W przyszłości przeglądarki mogą wyświetlać użytkownikom prośbę o zezwolenie na wyświetlanie aplikacji na pełnym ekranie.
Jeśli chcesz uruchamiać aplikacje na pełnym ekranie, rozważ użycie funkcji instalacji dla każdej platformy.
Nie wysyłaj użytkownikowi spamu z prośbą o instalowanie aplikacji na ekranie głównym
Jeśli planujesz udostępnić użytkownikom możliwość korzystania z aplikacji w trybie pełnoekranowym, pamiętaj o tym, aby nie utrudniać im pracy.
- Zachowaj dyskrecję. Użyj banera lub stopki, aby poinformować ich o możliwości zainstalowania aplikacji.
- Jeśli użytkownik zamknie prompt, nie wyświetlaj go ponownie.
- Podczas pierwszej wizyty użytkownicy prawdopodobnie nie będą chcieli instalować aplikacji, chyba że będą zadowoleni z Twojej usługi. Rozważ zachęcenie ich do zainstalowania aplikacji po pozytywnej interakcji z Twoją witryną.
- Jeśli użytkownik regularnie odwiedza Twoją witrynę, ale nie instaluje aplikacji, prawdopodobnie nie zrobi tego w przyszłości. Nie spamuj ich.
Podsumowanie
Nie mamy w prawdzie w pełni ustandaryzowanego i wdrożonego interfejsu API, ale dzięki wskazówkom zawartym w tym artykule możesz łatwo tworzyć wrażenia, które wykorzystują cały ekran użytkownika, niezależnie od klienta.