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

Ernest Delgado
Ernest Delgado
X

Giriş

Web geliştiricileri olarak, her zaman daha ilgi çekici ve etkileşimli web sayfaları oluşturmamıza olanak tanıyan yeni teknolojilerden heyecan duyarız. WebGL ile 3D grafikler kullanmak mı istiyorsunuz? Kesinlikle. WebAudio ile gelişmiş ses özellikleri var mı? Elbette. Web kamerası ve mikrofon kullanan gerçek zamanlı ortak çalışma uygulamaları? Kaydolmak istiyorum.

Daha az heyecan verici olsa da eşit derecede önemli olan, daha verimli çalışan ve genel olarak daha iyi bir kullanıcı deneyimi sunan uygulamalar oluşturmamıza olanak tanıyan teknolojilerdir. Bu noktada PageVisibility gibi bir API devreye girer.

Sayfa Görünürlüğü API'si 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ülenmediğinde farklı davranan web sayfaları oluşturmayı sağlar. Birkaç örneği inceleyelim:

  • Sunucudan bilgi alan bir web sayfası, aktif olarak görüntülenmediği sırada güncelleme döngüsünü yavaşlatabilir.
  • Dönen bir 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, yalnızca görünümden gizlendiğinde kullanıcıya bildirim göstermeye karar verebilir

Bu API, ilk bakışta kullanıcılara kolaylık sağlaması dışında çok yararlı görünmeyebilir. Ancak mobil web'de gezinmedeki büyük artış göz önüne alındığında, cihazın pil gücünden tasarruf edilmesine yardımcı olan her şey çok önemli hale gelir. Sayfa Görünürlük API'sini kullanarak siteniz, kullanıcı cihazının daha az güç tüketip daha uzun süre dayanmasına yardımcı olabilir.

Tarayıcı Desteği

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

Kaynak

Bu yazıdan itibaren Aday Önerisi aşamasında olan API spesifikasyonu, hem dokümanın görünürlük durumunu algılamak için hem de görünürlük değişikliklerine yanıt vermek için bir etkinlik sağlar.

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

Doküman Görünürlük Özellikleri

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

Tahmin edebileceğiniz gibi, doküman hiç görünmüyorsa gizli özelliği true değerini döndürür. Bu durum genellikle dokümanın küçültülmüş olduğu, bir arka plan sekmesinde 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 (yanlış) değerine ayarlanır. Ayrıca, erişilebilirlik araçlarını kullanabilmeniz için gizli özellik, ekran büyüteci gibi bir araç dokümanın tamamen görünmesini engellediğinde yanlış olarak ayarlanabilir.

Tedarikçi firma önekleriyle ilgilenme

Tedarikçi firmaya özgü ön eklerin tamamı yerine koda odaklanılması amacıyla, tarayıcıya özgü bilgileri ayırmak için bazı yardımcı işlevler kullanacağım. Android 4.4 Tarayıcı desteğini sonlandırdığınızda bu bölümü kaldırabilir ve standart adlara devam edebilirsiniz.

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 (isHidden()) yazabiliriz.

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

    return document[prop];
}

Belgenin görünürlüğüyle ilgili daha ayrıntılı bir görünüm için visibilityState mülkünü kullanabilirsiniz. Bu özellik dört değerden birini döndürür:

  • hidden: Belge tamamen gizlendi
  • visible: Doküman en az bir görüntülü cihazda en azından kısmen görünüyor
  • prerender: Belge ekran dışında yüklenir ve görünmez (bu değer isteğe bağlıdır; tüm tarayıcılar bu değeri desteklemeyebilir)
  • unloaded: Doküman kaldırılacaksa bu değer döndürülür (bu değer isteğe bağlıdır; tüm tarayıcılar bunu desteklemeyebilir)

Görünürlük Değişikliği 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 nesnesine bir etkinlik işleyici kaydedebilirsiniz:

Etkinlik Örneği

// 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

Mükemmel bir Web uygulaması oluşturmak, kullanıcıların görüp etkileşimde bulunabileceği, göz alıcı, çarpıcı özellikleri kullanmaktan çok daha fazlasını gerektirir. Gerçekten mükemmel bir uygulama, kullanıcının kaynaklarını ve dikkatini dikkatli bir şekilde kullanır. Sayfa Görünürlük API'si bu bulmacanın önemli bir parçasıdır. Kaynak tasarrufu sağlayan web uygulamaları oluşturma hakkında daha fazla bilgi edinmek için performansla ilgili diğer makalelerimizi inceleyin.

Harici Referanslar