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

Ernest Delgado
Ernest Delgado
X

Giriş

Web geliştiricileri olarak her zamankinden daha ilgi çekici ve etkileşimli Web sayfaları oluşturmamızı sağlayan yeni teknolojiler bizi heyecanlandırıyor. WebGL'li 3D grafikler var mı? Kesinlikle. WebAudio'da gelişmiş ses özellikleri var mı? Elbette. Web kamerası ve mikrofonunu kullanan gerçek zamanlı ortak çalışma uygulamaları nelerdir? Kaydolmak istiyorum!

Daha verimli çalışan ve daha iyi bir genel kullanıcı deneyimi sağlayan uygulamalar oluşturmamıza olanak tanıyan teknolojiler, daha az heyecan verici olsa da bir o kadar önemlidir. Bu noktada PageGörünürlük gibi bir API devreye girer.

Page Görünürlük API'sı basit ancak önemli bir işlev görür. Bu API, bir sayfanın kullanıcı tarafından ne zaman görünür durumda olduğunu uygulamanıza bildirir. Bu temel bilgi parçası, görüntülenmediğinde farklı davranan Web sayfalarının oluşturulmasını sağlar. Birkaç örnek düşünün:

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

Başta bu API, kullanıcılara kolaylık sağlamanın ötesinde pek kullanışlı görünmeyebilir, ancak mobil Web'e göz atmadaki 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 gelmiştir. Siteniz, PageGörünürlük API'sını kullanarak kullanıcı cihazının daha az güç tüketmesine ve daha uzun süre dayanmasına yardımcı olabilir.

Tarayıcı Desteği

  • 33
  • 12
  • 18
  • 7

Kaynak

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

Bu eğiticide, API'nin temel özelliklerini ele alacak ve API'nin bazı pratik örneklere nasıl uygulanacağını göstereceğim (Sabırsızsanız bu API'lere geçmekten çekinmeyin).

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

PageGörünürlükAPI spesifikasyonunun geçerli sürümü, iki doküman özelliğini 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, gizli özellik, doküman hiç görünür olmadığında true değerini döndürür. Genellikle bu, dokümanın simge durumuna küçültüldüğü, 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ülebiliyorsa özellik false olarak ayarlanır. Buna ek olarak, erişilebilirlik araçlarına uyum sağlamak için ekran büyüteci gibi bir araç, dokümanı tamamen engellediğinde ancak dokümanın bir görünümünü gösterdiğinde, gizli özellik false (yanlış) değerine ayarlanabilir.

Tedarikçi firma önekleriyle başa çıkma

Tedarikçi firmaya özgü tüm önekler yerine kod üzerinde çalışmaya odaklanmak amacıyla, tarayıcıya özgü önekleri ayırmak için bazı yardımcı işlevler kullanacağım. Android 4.4 Tarayıcı desteği bittikten hemen sonra bu bölümü kaldırabilir ve standart adlara bağlı kalabilirsiniz.

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

Şimdi, dokümanın 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];
}

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

  • hidden: Doküman görünümden tamamen gizlendi
  • visible: Doküman en az bir görüntüleme cihazında en azından kısmen görülebiliyor
  • prerender: Doküman ekran dışında yüklenmiştir ve görünür değildir (bu değer isteğe bağlıdır; tüm tarayıcılar tarafından desteklenmeyebilir)
  • 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 tarafından desteklenmeyebilir)

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 bir etkinlik işleyiciyi doğrudan belge nesnesine 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

Başarılı bir Web uygulaması oluşturmak, kullanıcıların görüp etkileşime girebileceği göz alıcı özellikleri kullanmaktan çok daha fazlasını gerektirir. Gerçek anlamda harika bir uygulama, kullanıcının kaynaklarını ve dikkatini akıllıca kullanır. Sayfa Görünürlüğü API'si de bu yapbozun önemli bir parçasıdır. Kaynakları bilinçli bir şekilde kullanan Web uygulamaları oluşturma hakkında daha fazla bilgi edinmek için performansla ilgili diğer makalelerimize göz atın.

Harici Referanslar