Wstęp
Jako programiści witryn przeważnie interesują nas nowe technologie, które pozwalają nam tworzyć jeszcze ciekawsze i bardziej interaktywne strony internetowe. Grafika 3D z WebGL? Jak najbardziej. Zaawansować funkcje audio w WebAudio? Rozumiem. Aplikacje do współpracy w czasie rzeczywistym używające kamery internetowej i mikrofonu? Chcę się zarejestrować.
Mniej ekscytujące, choć równie ważne, są technologie, które pozwalają nam tworzyć aplikacje, które działają wydajniej i zapewniają użytkownikom lepsze wrażenia. Właśnie tu do akcji wkracza interfejs API typu PageWidoczność.
Interfejs API widoczności strony spełnia prostą, ale ważną funkcję – informuje aplikację, że strona jest widoczna dla użytkownika. Te podstawowe informacje umożliwiają tworzenie stron internetowych, które działają inaczej, gdy nie są wyświetlane. Przyjrzyjmy się kilku przykładom:
- Strona internetowa, która pobiera informacje z serwera, może spowolnić swój cykl aktualizacji, jeśli nie jest aktywnie wyświetlana
- Strona, na której wyświetlana jest obracająca się karuzela obrazów albo treści wideo/audio, mogą zostać wstrzymane do czasu ponownego wyświetlenia strony przez użytkownika.
- Aplikacja może wyświetlać powiadomienia tylko wtedy, gdy jest ukryta.
Na początku ten interfejs API może nie wydawać się zbyt przydatny poza wygodą użytkownika, ale biorąc pod uwagę ogromny wzrost popularności stron internetowych w internecie, wszystko, co pozwala oszczędzać baterię urządzenia, nabiera ogromnego znaczenia. Dzięki interfejsowi PageAvailability API Twoja witryna może pomóc urządzeniu użytkownika w ograniczaniu zużycia energii i dłuższym funkcjonowaniu.
Specyfikacja interfejsu API, która w tym momencie znajduje się na etapie rekomendacji dla kandydatów i zawiera zarówno właściwości służące do wykrywania stanu widoczności dokumentu, jak i zdarzenie służące do reagowania na zmiany widoczności.
W tym samouczku omówię podstawy interfejsu API i pokażę, jak zastosować go w praktycznych przykładach (jeśli niecierpliwie czekasz, możesz przejść dalej).
Właściwości widoczności dokumentu
Bieżąca wersja specyfikacji PageAvailabilityAPI definiuje 2 właściwości dokumentu: wartość logiczną hidden i wyliczenie visibilityState. Właściwość activityState ma obecnie 4 wartości: hidden, visible, prerender i unloaded.
Jak można się spodziewać, atrybut ukryty zwraca wartość „prawda”, gdy dokument w ogóle nie jest widoczny. Zwykle oznacza to, że dokument jest zminimalizowany, na karcie w tle, włączony ekran blokady systemu operacyjnego itd. Atrybut ma wartość false (fałsz), jeśli jakakolwiek część dokumentu jest przynajmniej częściowo widoczna na co najmniej jednym wyświetlaczu. Dodatkowo, aby zapewnić zgodność z narzędziami ułatwień dostępu, można ustawić wartość false (fałsz), gdy narzędzie takie jak lupa całkowicie zasłania dokument, ale jest widoczne.
radzenie sobie z prefiksami dostawców
Aby skupić się na kodzie, a nie na całym prefiksie specyficznym dla danego dostawcy, użyję funkcji pomocniczych, które pozwalają odizolować elementy specyficzne dla danej przeglądarki. Gdy tylko zakończysz obsługę przeglądarki w systemie Android 4.4, możesz usunąć tę część i zachować nazwy standardowe.
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
Przykład właściwości dokumentu
Teraz możemy napisać funkcję isHidden() obejmującą różne przeglądarki, aby sprawdzić, czy dokument jest widoczny.
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
Aby uzyskać bardziej szczegółowy widok widoczności dokumentu, możesz użyć właściwości activityState. Ta właściwość zwraca jedną z czterech wartości:
hidden: dokument jest całkowicie ukryty.visible: dokument jest co najmniej częściowo widoczny na co najmniej jednym urządzeniu displayowym.prerender: dokument jest wczytywany poza ekranem i nie jest widoczny (ta wartość jest opcjonalna i nie wszystkie przeglądarki ją obsługują).unloaded: jeśli dokument ma zostać wyładowany, ta wartość jest zwracana (ta wartość jest opcjonalna i nie wszystkie przeglądarki ją obsługują).
Zdarzenie zmiany widoczności
Oprócz właściwości widoczności istnieje zdarzenie zmiany widoczności, które jest uruchamiane przy każdej zmianie stanu widoczności dokumentu. Możesz zarejestrować detektor zdarzeń dla tego zdarzenia bezpośrednio w obiekcie dokumentu:
Przykład zdarzenia
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, visChange);
}
function visChange() {
var txtFld = document.getElementById('visChangeText');
if (txtFld) {
if (isHidden())
txtFld.value += "Tab Hidden!\n";
else
txtFld.value += "Tab Visible!\n";
}
}
Podsumowanie
Tworzenie świetnej aplikacji internetowej nie ogranicza się tylko do korzystania z ciekawych, przyciągających uwagę funkcji, które użytkownicy mogą zobaczyć i z nich korzystać. Naprawdę świetna aplikacja wymaga przemyślanego wykorzystania zasobów i uwagi użytkownika, a interfejs API widoczności strony jest ważnym elementem tej układanki. Aby dowiedzieć się więcej o tworzeniu aplikacji internetowych uwzględniających zasoby, przeczytaj nasze inne artykuły na temat wydajności.