Korzystanie z interfejsu API widoczności strony

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Ernest Delgado

Wprowadzenie

Jako deweloperzy stron internetowych jesteśmy zazwyczaj podekscytowani nowymi technologiami, które umożliwiają nam tworzenie coraz bardziej angażujących i interakcyjnych stron internetowych. Grafika 3D z WebGL? Jak najbardziej. Zaawansowane funkcje dźwiękowe w WebAudio? Jasne. Aplikacje do współpracy w czasie rzeczywistym korzystające z kamery internetowej i mikrofonu? Zarejestruj mnie

Mniej ekscytujące, ale równie ważne są technologie, które umożliwiają nam tworzenie aplikacji, które działają wydajniej i zapewniają lepsze wrażenia. Właśnie w takich sytuacjach przydaje się interfejs API, np. PageVisibility.

Interfejs Page Visibility API pełni prostą, ale ważną funkcję – informuje aplikację, kiedy strona jest widoczna dla użytkownika. Ta podstawowa informacja umożliwia tworzenie stron internetowych, które zachowują się inaczej, gdy nie są wyświetlane. Oto kilka przykładów:

• Strona internetowa, która pobiera informacje z serwera, może spowolnić cykl aktualizacji, gdy nie jest aktywnie wyświetlana.
• strona zawierająca karuzele obrazów lub treści wideo/audio może być wstrzymywana, dopóki użytkownik nie wyświetli strony ponownie;
• Aplikacja może wyświetlać powiadomienia użytkownikowi tylko wtedy, gdy jest ukryta

Na pierwszy rzut oka ten interfejs API może nie wydawać się bardzo przydatny, ale biorąc pod uwagę ogromny wzrost korzystania z internetu na urządzeniach mobilnych, wszystko, co pomaga oszczędzać energię baterii, staje się bardzo ważne. Dzięki interfejsowi PageVisibility API Twoja witryna może pomóc urządzeniu użytkownika w zmniejszeniu zużycia energii i wydłużeniu czasu pracy na baterii.

Specyfikacja interfejsu API, która w momencie pisania tego tekstu jest na etapie rekomendacji kandydatów, zawiera zarówno właściwości do wykrywania stanu widoczności dokumentu, jak i zdarzenie odpowiadające na zmiany widoczności.

W tym samouczku omówię podstawy interfejsu API i pokażę, jak go stosować na praktycznych przykładach (jeśli nie masz cierpliwości, możesz od razu przejść do przykładów).

Właściwości widoczności dokumentu

Obecna wersja specyfikacji interfejsu PageVisibilityAPI definiuje 2 właściwości dokumentu: logiczną hidden i enumerację visibilityState. Właściwość visibilityState ma obecnie 4 możliwe wartości: hidden, visible, prerender i unloaded.

Jak można się spodziewać, atrybut hidden zwraca wartość true, gdy dokument jest całkowicie niewidoczny. Zwykle oznacza to, że dokument jest zminimalizowany, znajduje się na karcie w tle, na ekranie blokady systemu itp. Atrybut jest ustawiony na wartość false, jeśli jakakolwiek część dokumentu jest co najmniej częściowo widoczna na co najmniej 1 ekranie. Dodatkowo, aby uwzględnić narzędzia ułatwień dostępu, atrybut ukryty może mieć wartość false, gdy narzędzie takie jak powiększalnik ekranu całkowicie zasłania dokument, ale wyświetla jego widok.

Zarządzanie prefiksami dostawców

Aby skupić się na kodzie, a nie na prefiksach konkretnych dostawców, użyję funkcji pomocniczych, które pozwolą mi wyodrębnić elementy związane z przeglądarką. Gdy tylko wycofasz obsługę przeglądarki na Androidzie 4.4, możesz usunąć tę część i użyć standardowych nazw.

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ę obsługiwaną przez wszystkie przeglądarki, isHidden(), 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 visibilityState. Ta właściwość zwraca jedną z 4 wartości:

• hidden: dokument jest całkowicie ukryty;
• visible: dokument jest widoczny co najmniej częściowo na co najmniej 1 urządzeniu wyświetlającym.
• prerender: dokument jest wczytywany poza ekranem i nie jest widoczny (ta wartość jest opcjonalna; nie wszystkie przeglądarki będą ją obsługiwać).
• unloaded: jeśli dokument ma zostać usunięty, zwrócona zostanie ta wartość (ta wartość jest opcjonalna i nie wszystkie przeglądarki ją obsługują)

Zdarzenie VisibilityChange

Oprócz właściwości widoczności istnieje zdarzenie visibilitychange, które jest wywoływane za każdym razem, gdy zmienia się stan widoczności dokumentu. Detektor zdarzenia możesz zarejestrować bezpośrednio na 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

Stworzenie świetnej aplikacji internetowej wymaga znacznie więcej niż tylko użycie fajnych, przyciągających uwagę funkcji, które użytkownicy mogą zobaczyć i z którymi mogą wchodzić w interakcje. Naprawdę dobra aplikacja oszczędnie wykorzystuje zasoby i uwagę użytkownika, a interfejs API Widoczność strony jest ważnym elementem tego procesu. Więcej informacji o tworzeniu wydajnych aplikacji internetowych znajdziesz w innych artykułach na temat wydajności.

Odwołania zewnętrzne

• Specyfikacja interfejsu PageVisibility API W3C
• Grupa robocza ds. wydajności stron internetowych
• Przykład PageVisibility w IE10
• Visibility.js – biblioteka polyfill dla PageVisibility
• isVis – kolejna implementacja zastępcza PageVisibility