Korzystanie z interfejsu API widoczności strony

Ernest Delgado
Ernest Delgado
X

Wprowadzenie

Jako twórcy stron internetowych często ekscytujemy się nowymi technologiami, które pozwalają nam tworzyć coraz bardziej angażujące i interaktywne strony internetowe. grafika 3D z WebGL? Jak najbardziej. Zaawansowane funkcje audio dzięki WebAudio? Jasne. aplikacje do współpracy w czasie rzeczywistym, które korzystają z kamery internetowej i mikrofonu? Zarejestruj mnie

Mniej ekscytujące, ale równie ważne są technologie, które pozwalają nam tworzyć aplikacje działające wydajniej i zapewniające użytkownikom lepsze wrażenia. Tu właśnie wkracza interfejs API, taki jak 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, na której wyświetla się obracająca się karuzela obrazów lub treści wideo/audio, może zostać wstrzymana, dopóki użytkownik nie wyświetli jej 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ę zbyt przydatny, ale biorąc pod uwagę ogromny wzrost liczby użytkowników przeglądających internet mobilny, wszystko, co pomaga oszczędzać baterię urządzenia, 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.

Browser Support

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

Source

Specyfikacja interfejsu API, która w momencie pisania tego artykułu jest na etapie rekomendacji kandydata, udostępnia zarówno właściwości do wykrywania stanu widoczności dokumentu, jak i zdarzenie 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 nie masz cierpliwości, możesz od razu do nich przejść).

Właściwości widoczności dokumentu

Bieżąca wersja specyfikacji PageVisibilityAPI definiuje 2 właściwości dokumentu: wartość logiczną hidden i wyliczenie 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 nie jest w ogóle widoczny. Zwykle oznacza to, że dokument jest zminimalizowany, znajduje się na karcie w tle, wyświetlany jest ekran blokady systemu operacyjnego itp. Atrybut ma wartość „false”, jeśli jakakolwiek część dokumentu jest przynajmniej częściowo widoczna na co najmniej 1 wyświetlaczu. Dodatkowo, aby dostosować się do narzędzi ułatwień dostępu, atrybut hidden można ustawić na false, gdy narzędzie takie jak lupa ekranowa całkowicie zasłania dokument, ale pokazuje jego widok.

Postępowanie z prefiksami dostawców

Aby skupić się na kodzie, a nie na prefiksach poszczególnych dostawców, użyję kilku funkcji pomocniczych, które pozwolą mi wyodrębnić elementy specyficzne dla przeglądarki. Gdy tylko przestaniesz obsługiwać przeglądarkę Androida 4.4, możesz usunąć tę część i używać 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ę isHidden(), która będzie działać w różnych przeglądarkach i sprawdzać, 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 wczytywany poza ekranem i niewidoczny (ta wartość jest opcjonalna; nie wszystkie przeglądarki muszą ją obsługiwać).
  • unloaded: jeśli dokument ma zostać wyładowany, zostanie zwrócona ta wartość (jest ona opcjonalna i nie wszystkie przeglądarki muszą ją obsługiwać).

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 zdarzeń możesz zarejestrować bezpośrednio w obiekcie dokumentu:

Przykładowe zdarzenie

// 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 używanie efektownych, przyciągających wzrok funkcji, które użytkownicy mogą zobaczyć i z którymi mogą wchodzić w interakcje. Naprawdę świetna aplikacja w przemyślany sposób wykorzystuje zasoby i uwagę użytkownika, a interfejs Page Visibility API jest ważnym elementem tej układanki. Więcej informacji o tworzeniu aplikacji internetowych, które oszczędnie korzystają z zasobów, znajdziesz w innych artykułach dotyczących wydajności.

odwołania do elementów zewnętrznych;