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? Kesinlikle. WebAudio ile gelişmiş ses özellikleri? 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ç örnek verelim:

  • Bir sunucudan bilgi alan web sayfaları, 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, yalnızca görünmezken 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. 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 belgenin görünürlük durumunu algılamak için özellikler 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, gizli özelliği, doküman hiç görünmediğinde doğru değerini döndürür. Bu genellikle, belgenin simge durumuna getirildiği, arka plan sekmesinde olduğu, işletim sisteminin kilit ekranının açık olduğu vb. anlamına gelir. Belgenin herhangi bir bölümü en az bir ekranda en azından kısmen görünür durumdaysa özellik false olarak ayarlanır. Ayrıca, erişilebilirlik araçlarını desteklemek için ekran büyüteci gibi bir araç belgeyi tamamen gizlediği halde bir görünümünü gösterdiğinde gizli özelliği false olarak ayarlanabilir.

Tedarikçi firma ön ekleriyle ilgili işlem yapma

Odak noktamızı tedarikçiye özgü tüm ön eklerden ziyade koda odaklamak için tarayıcıya özgü özellikleri izole etmek üzere bazı yardımcı işlevler kullanacağım. Android 4.4 Tarayıcı desteğini sonlandırdığınızda bu kısmı 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

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 gizlenmişse
  • visible: Belge en az bir görüntüleme cihazında en azından kısmen görünür olmalıdır.
  • 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: Belgenin kaldırılması gerekiyorsa bu değer döndürülür (bu değer isteğe bağlıdır; tüm tarayıcılar bu değeri desteklemeyebilir)

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 doküman 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örebileceği ve etkileşim kurabileceği yenilikçi ve göz alı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