Korzystanie z interfejsu API widoczności strony

Ernest Delgado
Ernest Delgado
X

Wprowadzenie

Jako deweloperzy stron internetowych jesteśmy zwykle 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 użytkowników. 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. Przyjrzyjmy się kilku przykładom:

  • Strona internetowa, która pobiera informacje z serwera, może spowolnić cykl aktualizacji, gdy nie jest aktywnie wyświetlana.
  • strona wyświetlająca karuzele obrazów lub treści wideo/audio może być wstrzymywana, dopóki użytkownik ponownie jej nie wyświetli;
  • 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 zużywać mniej energii i działać dłużej.

Obsługa przeglądarek

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Źródło

Specyfikacja interfejsu API, która na razie jest na etapie rekomendacji kandydatów, zawiera zarówno właściwości do wykrywania stanu widoczności dokumentu, jak i zdarzenie reagowania 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 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 ukryty zwraca wartość true, gdy dokument jest 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 przeglądarka przestanie obsługiwać Androida 4.4, możesz usunąć tę część i zachować standardowe nazwy.

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 co najmniej częściowo widoczny na co najmniej 1 urządzeniu wyświetlającym.
  • prerender: dokument jest wczytany poza ekranem i nie jest widoczny (ta wartość jest opcjonalna; nie wszystkie przeglądarki obsługują tę opcję).
  • unloaded: jeśli dokument ma zostać usunięty z pamięci, zostanie zwrócona ta wartość (jest ona opcjonalna – nie wszystkie przeglądarki muszą ją obsługiwać).

Zdarzenie VisibilityChange

Oprócz właściwości widoczności dostępne jest zdarzenie zmiany widoczności, które jest wywoływane przy każdej zmianie stanu 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

Tworzenie świetnej aplikacji internetowej to coś więcej niż tylko stosowanie 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. Aby dowiedzieć się więcej o tworzeniu aplikacji internetowych dbających o środowisko, zapoznaj się z innymi artykułami na temat wydajności.

Odwołania zewnętrzne