Tam Ekran Deneyimleri Sunma

Kolayca tam ekran web siteleri ve uygulamalar oluşturabiliriz, ancak web'deki her şey gibi bunu yapmanın da birkaç yolu vardır. Tam ekran olarak başlatılan "yüklü web uygulaması" deneyimini destekleyen tarayıcıların sayısı arttığı için bu özellikle önemlidir.

Uygulamanızı veya sitenizi tam ekran yapma

Bir kullanıcı veya geliştirici, bir web uygulamasını tam ekran yapmak için birkaç yol vardır.

  • Bir kullanıcı hareketine yanıt olarak tarayıcının tam ekrana geçmesini isteyin.
  • Uygulamayı ana ekrana yükleyin.
  • Sahte: Adres çubuğunu otomatik gizle.

Kullanıcı hareketine yanıt olarak tarayıcının tam ekrana geçmesini isteyin

Tüm platformlar eşit değildir. iOS Safari'de tam ekran API'si yoktur, ancak Android, Firefox ve IE 11 + Chrome'da mevcuttur. Oluşturduğunuz çoğu uygulama, tam ekran spesifikasyonunda sağlanan CSS seçiciler ve JS API'nin bir kombinasyonunu kullanır. Tam ekran deneyimi oluştururken dikkat etmeniz gereken ana JS API'ler şunlardır:

  • element.requestFullscreen() (şu anda Chrome, Firefox ve IE'de ön ekli olan), öğeyi tam ekran modunda görüntüler.
  • document.exitFullscreen() (şu anda Chrome, Firefox ve IE'de ön eke bulunmaktadır. Firefox bunun yerine cancelFullScreen() kullanır) tam ekran modunu iptal eder.
  • document.fullscreenElement (şu anda Chrome, Firefox ve IE'de önek olarak bulunmaktadır), öğelerden herhangi biri tam ekran modundaysa true değerini döndürür.

Uygulamanız tam ekran olduğunda artık tarayıcının kullanıcı arayüzü kontrollerini kullanamazsınız. Bu, kullanıcıların deneyiminizle etkileşimde bulunma şeklini değiştirir. İleri ve Geri gibi standart gezinme denetimlerine sahip değillerdir; Yenile düğmesi olan bir çıkış çıkışları yoktur. Bu senaryoya uyum sağlamak önemli. Tarayıcı tam ekran moduna geçtiğinde sitenizin stilini ve sunumunu değiştirmenize yardımcı olacak bazı CSS seçicileri kullanabilirsiniz.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Yukarıdaki örnek biraz yanıltıcıdır; tedarikçi öneklerinin kullanımıyla ilgili tüm karmaşıklığı gizledim.

Gerçek kod çok daha karmaşıktır. Mozilla, tam ekrana geçmek için kullanabileceğiniz çok yararlı bir komut dosyası oluşturdu. Gördüğünüz gibi, tedarikçi ön eki durumu, belirtilen API ile karşılaştırıldığında karmaşık ve elverişlidir. Aşağıdaki biraz basitleştirilmiş kodla bile karmaşık bir yapıya sahip.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Biz web geliştiricileri karmaşıklıktan nefret ederiz. Kullanabileceğiniz üst düzey bir soyut API, biraz farklı olan iki JS API'yi ve tedarikçi önekini tek bir tutarlı API'de bir araya getiren Sindre Sorhus'un Screenfull.js modülüdür.

Tam Ekran API'sı İpuçları

Dokümanı tam ekran yapma
Gövde öğesinde tam ekran
Şekil 1: Gövde öğesinde tam ekran.

Gövde öğesini tam ekrana aldığınızı düşünmek doğaldır, ancak WebKit veya Blink tabanlı bir oluşturma motoru kullanıyorsanız gövde genişliğini tüm içeriği içerecek şekilde mümkün olan en küçük boyuta küçültmenin garip bir etkisi olduğunu görürsünüz. (Mozilla Gecko yeterlidir.)

Doküman öğesinde tam ekran
Şekil 2: Belge öğesinde tam ekran.

Bunu düzeltmek için body öğesi yerine doküman öğesini kullanın:

document.documentElement.requestFullscreen();
Video öğesini tam ekran yapma

Bir video öğesini tam ekran yapmak, başka bir öğeyi tam ekran yapmakla tam olarak aynıdır. Video öğesinde requestFullscreen yöntemini çağırırsınız.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

<video> öğenizde denetimler özelliği tanımlanmamışsa tam ekrana geldikten sonra kullanıcının videoyu kontrol etmesi mümkün olmaz. Bunu yapmanın önerilen yolu, videoyu sarmalayan temel bir kapsayıcı ve kullanıcının görmesini istediğiniz denetimleri kullanmaktır.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Kapsayıcı nesnesini CSS sözde seçiciyle birleştirebileceğiniz (örneğin, "goFS" düğmesini gizlemek için) bu yöntem size çok daha fazla esneklik sağlar.

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Bu kalıpları kullanarak tam ekranın ne zaman çalıştığını algılayabilir ve kullanıcı arayüzünüzü uygun şekilde uyarlayabilirsiniz. Örneğin:

  • Başlangıç sayfasına geri bir bağlantı sağlayarak
  • İletişim kutularını kapatmak veya geriye doğru gitmek için bir mekanizma sağlayarak

Ana ekrandan bir sayfayı tam ekran başlatma

Kullanıcı gezinirken tam ekran web sayfası başlatılamaz. Tarayıcı tedarikçileri, her sayfa yüklemesinde tam ekran deneyiminin büyük bir sıkıntı yaratacağının bilincindedir. Bu nedenle, tam ekrana geçmek için kullanıcı hareketi gerekir. Tedarikçiler kullanıcıların uygulamaları "yüklemesine" izin verir. Yükleme işlemi de, kullanıcının platformda uygulama olarak kullanıma sunmak istediğini işletim sistemine dair bir sinyaldir.

Önde gelen mobil platformlarda aşağıdaki meta etiketleri veya manifest dosyalarını kullanarak uygulamak oldukça kolaydır.

iOS

iPhone'un piyasaya sürülmesinden bu yana kullanıcılar, web uygulamalarını ana ekrana yükleyebiliyor ve tam ekran web uygulamaları olarak başlatabiliyor.

<meta name="apple-mobile-web-app-capable" content="yes" />

İçerik evet değerine ayarlanırsa web uygulaması tam ekran modunda çalışır; aksi takdirde çalışmaz. Varsayılan davranış, web içeriğini görüntülemek için Safari'nin kullanılmasıdır. Bir web sayfasının tam ekran modunda görüntülenip görüntülenmediğini, window.navigator.standalone salt okunur Boole JavaScript özelliğini kullanarak belirleyebilirsiniz.

Apple

Android için Chrome

Chrome ekibi kısa bir süre önce, kullanıcı ana ekrana eklediğinde tarayıcıya sayfayı tam ekran başlatmasını söyleyen bir özelliği uygulamaya koydu. iOS Safari modeline benzer.

<meta name="mobile-web-app-capable" content="yes" />

Web uygulamanızı, Android için Chrome'un "Ana ekrana ekle" menü öğesini kullanarak cihazın ana ekranına uygulama kısayolu simgesi eklenecek şekilde ayarlayabilir ve uygulamanın tam ekran "uygulama modunda" başlatılmasını sağlayabilirsiniz.

Google Chrome

Daha iyi bir seçenek Web Uygulaması Manifest'ini kullanmaktır.

Web Uygulaması Manifesti (Chrome, Opera, Firefox, Samsung)

Web uygulamaları için Manifest, size geliştirici olarak uygulamanızın, kullanıcıların uygulamaları görmelerini bekleyebilecekleri alanlarda (örneğin, mobil ana ekran) nasıl görüneceğini kontrol etme, kullanıcının neleri başlatabileceğini ve daha da önemlisi, uygulamayı nasıl başlatabileceğini yönlendirme olanağı sunan basit bir JSON dosyasıdır. Manifest dosyası, gelecekte uygulamanız üzerinde daha fazla kontrol sahibi olmanızı sağlayacak, ancak şu anda yalnızca uygulamanızın nasıl kullanıma sunulacağına odaklanıyoruz. Özellikle:

  1. Tarayıcıya manifest dosyanız hakkında bilgi verme
  2. Nasıl başlatılacağını açıklama

Manifest dosyası oluşturulduktan ve sitenizde barındırıldıktan sonra, uygulamanızı kapsayan tüm sayfalarınızdan aşağıdaki gibi bir bağlantı etiketi eklemeniz yeterlidir:

<link rel="manifest" href="/manifest.json" />

Chrome, Android için 38 sürümünden (Ekim 2014) itibaren Manifest'leri desteklemekte olup web uygulamanızın ana ekrana yüklendiğinde nasıl görüneceği (short_name, name ve icons özellikleri aracılığıyla) ve kullanıcı başlat simgesini tıkladığında (start_url, display ve orientation aracılığıyla) nasıl başlatılması gerektiği konusunda kontrol sahibi olmanızı sağlar.

Aşağıda örnek bir manifest gösterilmektedir. Manifest dosyasında olması gereken her şeyi göstermez.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Bu özellik tamamen progresiftir ve özelliği destekleyen tarayıcıların kullanıcıları için daha iyi, daha entegre deneyimler oluşturmanıza olanak tanır.

Bir kullanıcı, sitenizi veya uygulamanızı ana ekrana eklediğinde, kullanıcının bunu bir uygulama gibi ele alma niyeti vardır. Bu, kullanıcıyı bir ürün açılış sayfası yerine uygulamanızın işlevlerine yönlendirmeyi hedeflemeniz gerektiği anlamına gelir. Örneğin, kullanıcının uygulamanızda oturum açması gerekiyorsa bu, başlatmak için iyi bir sayfadır.

Yardımcı uygulamalar

Yardımcı uygulamaların çoğu bundan hemen yararlanır. Bu uygulamaların mobil platformlardaki diğer tüm uygulamalar gibi bağımsız olarak kullanıma sunulmasını isteyebilirsiniz. Bir uygulamaya bağımsız olarak başlatılmasını söylemek için bunu Web Uygulaması Manifesti'ni ekleyin:

    "display": "standalone"
Oyunlar

Oyunların çoğu manifestlerden hemen yararlanabilir. Oyunların çok büyük bir çoğunluğu tam ekran modunda lansman yapmak ve belirli bir yönü zorunlu tutmak isteyecektir.

Dikey bir kaydırıcı veya Flappy Birds gibi bir oyun geliştiriyorsanız, büyük olasılıkla oyununuzun her zaman dikey modda olmasını istersiniz.

    "display": "fullscreen",
    "orientation": "portrait"

Öte yandan, X-Com gibi bir bulmaca veya oyun geliştiriyorsanız muhtemelen oyunun her zaman yatay yönü kullanmasını istersiniz.

    "display": "fullscreen",
    "orientation": "landscape"
Haber siteleri

Haber siteleri çoğu durumda tamamen içeriğe dayalı deneyimlerdir. Çoğu geliştirici doğal olarak bir haber sitesine manifest eklemeyi düşünmez. Manifest, neyin başlatılacağını (haber sitenizin ön sayfası) ve nasıl başlatılacağını (tam ekran veya normal tarayıcı sekmesi) tanımlamanızı sağlar.

Bu seçim size ve kullanıcılarınızın deneyiminize nasıl erişmek isteyeceğini düşündüğünüze bağlıdır. Sitenizde olmasını isteyeceğiniz tüm tarayıcı chrome'larının sitenizde olmasını istiyorsanız görüntüyü browser olarak ayarlayabilirsiniz.

    "display": "browser"

Haber sitenizin çoğunun, deneyimlerini uygulama olarak değerlendirdiğini ve web benzeri tüm Chrome'u kullanıcı arayüzünden kaldırdığını hissettirmek için görüntüyü standalone şeklinde ayarlayabilirsiniz.

    "display": "standalone"

Sahte: adres çubuğunu otomatik gizle

Adres çubuğunu aşağıdaki şekilde otomatik olarak gizleyerek "sahte tam ekran" oluşturabilirsiniz:

window.scrollTo(0, 1);

Bu oldukça basit bir yöntemdir. Sayfa yüklenir ve tarayıcı çubuğuna yoldan çekilmesi söylenir. Ne yazık ki bu çözüm standart hale getirilmemiş ve yeterince desteklenmemektedir. Ayrıca bir dizi tuhaflığın üstünde durmanız gerekiyor.

Örneğin tarayıcılar, kullanıcı geri döndüğünde genellikle sayfadaki konumu geri yükler. window.scrollTo kullanılması bunu geçersiz kılarak kullanıcıyı rahatsız eder. Bu sorunu çözmek için localStorage'da son konumu depolamanız ve uç durumlara yaklaşmanız gerekir (örneğin, kullanıcı sayfa birden fazla pencerede açık durumdaysa).

Kullanıcı deneyimi kuralları

Tam ekrandan yararlanan bir site oluştururken, kullanıcılarınızın seveceği bir hizmet oluşturabilmek için dikkat etmeniz gereken bazı potansiyel kullanıcı deneyimi değişiklikleri vardır.

Gezinme denetimlerine güvenmeyin

iOS'te donanım geri düğmesi veya yenileme hareketi yoktur. Bu nedenle, kullanıcıların kilitlenmeden uygulama içinde gezinebildiğinden emin olmanız gerekir.

Tüm önemli platformlarda tam ekran modunda mı yoksa yüklü modda mı çalıştığınızı kolayca tespit edebilirsiniz.

iOS

iOS'te, kullanıcının ana ekrandan başlatılıp başlatılmadığını görmek için navigator.standalone boole'sini kullanabilirsiniz.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Web Uygulaması Manifesti (Chrome, Opera, Samsung)

Yüklü bir uygulama olarak başlatıldığında Chrome gerçek tam ekran deneyiminde çalışmaz. Bu nedenle document.fullscreenElement, null değerini döndürür ve CSS seçiciler çalışmaz.

Kullanıcı, sitenizdeki bir hareketle tam ekran isteğinde bulunduğunda standart tam ekran API'leri kullanılabilir. Bu API'ler, kullanıcı arayüzünüzü aşağıdaki gibi tam ekran durumuna tepki verecek şekilde uyarlamanıza olanak tanıyan CSS yapay seçicisini içerir

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Kullanıcılar sitenizi ana ekrandan başlatırsa display-mode medya sorgusu, Web Uygulaması Manifest'inde tanımlanan değere ayarlanır. Sadece tam ekran durumunda şöyle olacaktır:

@media (display-mode: fullscreen) {
}

Kullanıcı uygulamayı bağımsız modda başlatırsa display-mode medya sorgusu standalone olur:

@media (display-mode: standalone) {
}

Firefox

Kullanıcı siteniz aracılığıyla tam ekran isteğinde bulunduğunda veya uygulamayı tam ekran modunda başlattığında, kullanıcı arayüzünüzü aşağıdaki gibi tam ekran durumuna tepki verecek şekilde CSS yapay seçici de dahil olmak üzere tüm standart tam ekran API'ları kullanılabilir:

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

IE'de CSS sözde sınıfında kısa çizgi yoktur, ancak Chrome ve Firefox'a benzer şekilde çalışır.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Spesifikasyon

Spesifikasyondaki yazım, IE tarafından kullanılan söz dizimiyle eşleşiyor.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Kullanıcıyı tam ekran deneyiminde tutun

Tam ekran API'sı bazen biraz titiz olabilir. Tarayıcı tedarikçileri kullanıcıları tam ekran bir sayfada kilitlemek istemezler. Bu nedenle, mümkün olan en kısa sürede tam ekrandan çıkma mekanizmaları geliştirmişlerdir. Yani birden fazla sayfaya yayılan tam ekran bir web sitesi oluşturamazsınız:

  • window.location = "http://example.com" kullanılarak URL programlı bir şekilde değiştirildiğinde tam ekran bozulur.
  • Sayfanızın içindeki harici bir bağlantıyı tıklayan kullanıcı tam ekrandan çıkar.
  • URL'nin navigator.pushState API aracılığıyla değiştirilmesi de tam ekran deneyiminin sonlandırılmasına neden olur.

Kullanıcıyı tam ekran deneyiminde tutmak istiyorsanız iki seçeneğiniz vardır:

  1. Tam ekrana geçmek için yüklenebilir web uygulaması mekanizmalarını kullanın.
  2. # parçasını kullanarak kullanıcı arayüzünüzü ve uygulama durumunuzu yönetin.

URL'yi güncellemek için #syntax kullanarak (window.location = "#somestate") ve window.onhashchange etkinliğini dinlerken, uygulama durumundaki değişiklikleri yönetmek, kullanıcının donanım geri düğmelerini kullanmasına izin vermek veya geçmiş API'sini aşağıdaki şekilde kullanarak basit bir programatik geri düğmesi deneyimi sunmak için tarayıcının kendi geçmiş yığınını kullanabilirsiniz:

window.history.go(-1);

Kullanıcının ne zaman tam ekrana geçeceğini seçmesine izin verin

Kullanıcılar için, bir web sitesinin beklenmedik bir şey yapmasından daha rahatsız edici bir şey yoktur. Bir kullanıcı sitenize geldiğinde, tam ekran yapmaları için onları kandırmaya çalışmayın.

İlk dokunma etkinliğine müdahale etmeyin ve requestFullscreen() çağırın.

  1. Sinir bozucu.
  2. Tarayıcılar, gelecekte bir noktada kullanıcıya uygulamanın tam ekranı kaplamasına izin verme konusunda bir istem göndermeye karar verebilir.

Uygulamaları tam ekranda başlatmak istiyorsanız her platform için yükleme deneyimlerini kullanmayı düşünün.

Kullanıcının spam göndererek uygulamanızı ana ekrana yüklemesini engellemeyin

Yüklü uygulama mekanizmaları üzerinden tam ekran deneyimi sunmayı planlıyorsanız kullanıcıya saygılı olun.

  • ihtiyatlı olun. Kullanıcılara uygulamayı yükleyebileceklerini bildirmek için bir banner veya altbilgi kullanın.
  • Kullanıcı istemi kapatırsa bir daha gösterme.
  • Kullanıcılar ilk ziyaretlerinde, sunduğunuz hizmetten memnun kalmadıkları sürece büyük olasılıkla uygulamayı yüklemek istemezler. Sitenizdeki olumlu bir etkileşimden sonra onlardan uygulamanızı yüklemelerini isteyebilirsiniz.
  • Bir kullanıcı sitenizi düzenli olarak ziyaret ederse ve uygulamayı yüklemezse, uygulamanızı yükleme olasılığı düşüktür. Sürekli spam yapmayın.

Sonuç

Tamamen standartlaştırılmış ve uygulanmış bir API'miz olmasa da, bu makalede sunulan kılavuzun bir kısmını kullanarak, istemciden bağımsız olarak kullanıcının tüm ekranından yararlanan deneyimleri kolayca oluşturabilirsiniz.

Geri bildirim