Sayfa Görünürlük API'sini Kullanma

Ernest Delgado
Ernest Delgado
X

Giriş

Web geliştiricileri olarak, daha ilgi çekici ve etkileşimli web sayfaları oluşturmamızı sağlayan yeni teknolojiler bizi heyecanlandırır. WebGL ile 3D grafikler Kesinlikle. WebAudio ile gelişmiş ses özellikleri Elbette. Web kamerası ve mikrofonu kullanan anlık ortak çalışma uygulamaları mı? Kaydolmak istiyorum.

Daha verimli çalışan ve genel olarak daha iyi bir kullanıcı deneyimi sunan uygulamalar oluşturmamızı sağlayan teknolojiler de aynı derecede önemlidir. PageVisibility gibi bir API bu noktada devreye girer.

Page Visibility API, basit ancak önemli bir işlev gerçekleştirir: Uygulamanızın, bir sayfanın kullanıcıya ne zaman görünür olduğunu bilmesini sağlar. Bu temel bilgi, görüntülenmedikleri zaman farklı davranan web sayfalarının oluşturulmasını sağlar. Birkaç örneğe göz atalım:

  • Bir sunucudan bilgi alan web sayfası, etkin olarak görüntülenmediğinde güncelleme döngüsünü yavaşlatabilir.
  • Dönen resim bandı veya video/ses içeriği gösteren bir sayfa, kullanıcı sayfayı tekrar görüntüleyene kadar duraklatılabilir.
  • Bir uygulama, kullanıcıya yalnızca görünümden gizlendiğinde bildirim göstermeye karar verebilir.

İlk bakışta bu API, kullanıcıya kolaylık sağlamanın ötesinde pek kullanışlı görünmeyebilir. Ancak mobil web'de gezinme oranındaki büyük artış göz önüne alındığında, cihazın pil gücünden tasarruf etmeye yardımcı olan her şey çok önemli hale gelir. Siteniz, PageVisibility API'yi kullanarak kullanıcının cihazının daha az güç tüketmesine ve daha uzun süre dayanmasına yardımcı olabilir.

Browser Support

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

Source

Bu makalenin yazıldığı tarih itibarıyla Aday Öneri aşamasında olan API spesifikasyonu, hem dokümanın görünürlük durumunu algılamaya yönelik özellikler hem de görünürlük değişikliklerine yanıt vermeye yönelik bir etkinlik sağlar.

Bu eğitimde, API'nin temel özelliklerini ele alacak ve bazı pratik örneklere nasıl uygulanacağını göstereceğim (sabırsız biriyseniz bu örnekleri atlayabilirsiniz).

Doküman görünürlük özellikleri

PageVisibilityAPI spesifikasyonunun mevcut sürümü iki belge özelliği tanımlar: boole hidden ve numaralandırma visibilityState. visibilityState özelliğinin şu anda dört olası değeri vardır: hidden, visible, prerender ve unloaded.

Tahmin edebileceğiniz gibi, doküman hiç görünür olmadığında gizli özellik true değerini döndürür. Bu genellikle dokümanın simge durumuna küçültüldüğü, arka plandaki bir sekmede olduğu, işletim sisteminin kilit ekranının açık olduğu vb. anlamına gelir. Dokümanın herhangi bir bölümü en az bir ekranda kısmen görünür durumdaysa özellik "false" olarak ayarlanır. Ayrıca, erişilebilirlik araçlarına uyum sağlamak için, ekran büyüteci gibi bir araç dokümanı tamamen gizlediğinde ancak bir görünümünü gösterdiğinde gizli özellik "false" olarak ayarlanabilir.

Tedarikçi önekleriyle ilgilenme

Tüm tedarikçiye özel ön ekler yerine koda odaklanmak için tarayıcıya özel özellikleri izole etmek amacıyla bazı yardımcı işlevler kullanacağım. Android 4.4 Tarayıcı desteğini bıraktığınızda bu bölümü kaldırabilir ve standart adları kullanabilirsiniz.

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;
}

Doküman özellikleri örneği

Artık belgenin görünür olup olmadığını görmek için tarayıcılar arası bir işlev olan isHidden() işlevini yazabiliriz.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Belgenin görünürlüğünü daha ayrıntılı bir şekilde görmek için visibilityState özelliğini kullanabilirsiniz. Bu özellik, dört değerden birini döndürür:

  • hidden: Belge tamamen gizlenir.
  • visible: Doküman, en az bir görüntüleme cihazında en azından kısmen görünür durumdadır.
  • prerender: Doküman ekran dışında yüklenir ve görünmez (bu değer isteğe bağlıdır; tüm tarayıcılar bunu desteklemeyebilir).
  • unloaded: Dokümanın yüklemesi kaldırılacaksa bu değer döndürülür (Bu değer isteğe bağlıdır ve tüm tarayıcılar tarafından desteklenmeyebilir.)

VisibilityChange etkinliği

Görünürlük özelliklerine ek olarak, dokümanın görünürlük durumu her değiştiğinde tetiklenen bir visibilitychange etkinliği vardır. Bu etkinlik için doğrudan belge nesnesinde bir etkinlik işleyici kaydedebilirsiniz:

Event example

// 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";
   }
}

Özet

Harika bir web uygulaması oluşturmak, kullanıcıların görebileceği ve etkileşimde bulunabileceği göz alıcı özellikleri kullanmaktan çok daha fazlasını gerektirir. Gerçekten harika bir uygulama, kullanıcının kaynaklarını ve dikkatini dikkatli bir şekilde kullanır. Page Visibility API, bu yapbozun önemli bir parçasıdır. Kaynakları bilinçli kullanan web uygulamaları oluşturma hakkında daha fazla bilgi edinmek için performansla ilgili diğer makalelerimizi inceleyin.

Harici referanslar