Membuat Pengalaman Layar Penuh

Kita memiliki kemampuan untuk membuat situs dan aplikasi layar penuh yang imersif dengan mudah, tetapi seperti halnya hal lain di web, ada beberapa cara untuk melakukannya. Hal ini sangat penting karena semakin banyak browser yang mendukung pengalaman "aplikasi web terinstal" yang meluncurkan layar penuh.

Menyajikan aplikasi atau situs Anda dalam layar penuh

Ada sejumlah cara yang bisa dipilih pengguna atau developer bisa mendapatkan aplikasi web dengan layar penuh.

  • Minta browser membuka layar penuh sebagai respons terhadap gestur pengguna.
  • Instal aplikasi ke layar utama.
  • Palsukan: sembunyikan bilah alamat secara otomatis.

Minta browser membuka layar penuh sebagai respons terhadap gestur pengguna

Tidak semua platform sama. iOS Safari tidak memiliki API layar penuh, tetapi kami memilikinya di Chrome pada Android, Firefox, dan IE 11+. Sebagian besar aplikasi yang Anda build akan menggunakan kombinasi JS API dan pemilih CSS yang disediakan oleh spesifikasi layar penuh. JS API utama yang perlu Anda perhatikan saat membuat pengalaman layar penuh adalah:

  • element.requestFullscreen() (saat ini menjadi awalan di Chrome, Firefox, dan IE) menampilkan elemen dalam mode layar penuh.
  • document.exitFullscreen() (saat ini menjadi awalan di Chrome, Firefox, dan IE. Firefox menggunakan cancelFullScreen() sebagai gantinya) membatalkan mode layar penuh.
  • document.fullscreenElement (saat ini menjadi awalan di Chrome, Firefox, dan IE) menampilkan nilai benar (true) jika ada elemen dalam mode layar penuh.

Jika aplikasi Anda menggunakan layar penuh, Anda tidak lagi memiliki kontrol UI browser yang tersedia untuk Anda. Hal ini mengubah cara pengguna berinteraksi dengan pengalaman Anda. Mereka tidak memiliki kontrol navigasi standar seperti Maju dan Mundur; mereka tidak memiliki pintu melarikan diri yang berupa tombol Segarkan. Penting untuk memenuhi skenario ini. Anda dapat menggunakan beberapa pemilih CSS untuk membantu mengubah gaya dan presentasi situs saat browser memasuki mode layar penuh.

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

Contoh di atas sedikit rumit; saya telah menyembunyikan semua kompleksitas seputar penggunaan awalan vendor.

Kode sebenarnya jauh lebih kompleks. Mozilla telah membuat skrip yang sangat berguna yang dapat Anda gunakan untuk beralih layar penuh. Seperti yang dapat Anda lihat, situasi awalan vendor kompleks dan merepotkan dibandingkan API yang ditentukan. Meskipun dengan kode yang sedikit disederhanakan di bawah ini, masih saja kompleks.

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

Kita para developer web membenci kerumitan. API abstrak tingkat tinggi yang bagus yang dapat Anda gunakan adalah modul Screenfull.js Sindre Sorhus yang menyatukan dua JS API dan awalan vendor yang sedikit berbeda menjadi satu API yang konsisten.

Tips Fullscreen API

Membuat dokumen layar penuh
Layar penuh di elemen body
Gambar 1: Layar penuh di elemen isi.

Wajar bila berpikiran bahwa Anda membuat elemen body jadi layar penuh, tetapi jika Anda menggunakan mesin rendering berbasis WebKit atau Blink, Anda akan melihat bahwa ia memiliki efek ganjil berupa penyusutan lebar body ke ukuran yang sekecil mungkin yang akan berisi semua konten. (Mozilla Gecko boleh juga.)

Layar penuh di elemen dokumen
Gambar 2: Layar penuh di elemen dokumen.

Untuk memperbaikinya, gunakan elemen document sebagai ganti elemen body:

document.documentElement.requestFullscreen();
Membuat elemen video layar penuh

Untuk membuat elemen video layar penuh persis sama dengan membuat elemen lain layar penuh. Anda memanggil metode requestFullscreen pada elemen video.

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

Jika elemen <video> Anda belum didefinisikan atribut kontrolnya, tidak ada cara bagi pengguna untuk mengontrol video setelah di layar penuh. Cara yang disarankan untuk melakukannya adalah memiliki penampung dasar yang menggabungkan video dan kontrol yang Anda inginkan untuk dilihat pengguna.

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

Hal ini akan memberi Anda fleksibilitas lebih besar karena Anda dapat menggabungkan objek kontainer dengan pemilih semu CSS (misalnya untuk menyembunyikan tombol "goFS".)

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

Dengan pola ini, Anda dapat mendeteksi kapan layar penuh dijalankan dan menyesuaikan antarmuka pengguna dengan semestinya, misalnya:

  • Dengan menyediakan link kembali ke halaman awal
  • Dengan menyediakan mekanisme untuk menutup dialog atau bergerak mundur

Meluncurkan laman layar penuh dari layar utama

Meluncurkan halaman web layar penuh saat pengguna membukanya tidak dapat dilakukan. Vendor browser sangat menyadari bahwa pengalaman layar penuh pada setiap pemuatan halaman merupakan gangguan besar, sehingga gestur pengguna diperlukan untuk memasuki layar penuh. Namun, vendor mengizinkan pengguna untuk "menginstal" aplikasi, dan tindakan penginstalan adalah sinyal ke sistem operasi yang ingin diluncurkan pengguna sebagai aplikasi di platform.

Di seluruh platform seluler utama, penerapannya cukup mudah menggunakan tag meta atau file manifes seperti berikut.

iOS

Sejak peluncuran iPhone, pengguna dapat menginstal Aplikasi Web ke layar utama dan meluncurkannya sebagai aplikasi web layar penuh.

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

Jika konten disetel ke yes, aplikasi web akan dijalankan dalam mode layar penuh; jika tidak, aplikasi tidak akan dijalankan dalam mode layar penuh. Perilaku default adalah menggunakan Safari untuk menampilkan konten web. Anda dapat menentukan apakah halaman web ditampilkan dalam mode layar penuh menggunakan properti JavaScript Boolean hanya-baca window.navigator.standalone.

Apple

Chrome untuk Android

Tim Chrome baru-baru ini menerapkan fitur yang memberi tahu browser untuk meluncurkan halaman dalam layar penuh saat pengguna telah menambahkannya ke layar utama. Bagian ini serupa dengan model Safari iOS.

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

Anda dapat menyiapkan aplikasi web agar menambahkan ikon pintasan aplikasi ke layar utama perangkat, dan agar aplikasi diluncurkan dalam "mode aplikasi" layar penuh menggunakan item menu "Add to Home screen" di Chrome untuk Android.

Google Chrome

Opsi yang lebih baik adalah menggunakan Manifes Aplikasi Web.

Manifes Aplikasi Web (Chrome, Opera, Firefox, Samsung)

Manifes untuk aplikasi Web adalah file JSON sederhana yang memberi Anda, developer, kemampuan untuk mengontrol tampilan aplikasi kepada pengguna di area yang mereka harapkan akan melihat aplikasi (misalnya layar utama seluler), mengarahkan apa yang dapat diluncurkan pengguna dan, yang lebih penting lagi, cara mereka dapat meluncurkannya. Di masa mendatang, manifes akan memberi Anda kontrol lebih besar atas aplikasi, tetapi untuk saat ini, kami hanya berfokus pada cara meluncurkan aplikasi Anda. Khususnya:

  1. Memberi tahu browser tentang manifes Anda
  2. Menjelaskan cara meluncurkan

Setelah Anda membuat manifes dan ditampung pada situs, Anda tinggal menambahkan sebuah tag tautan dari semua halaman yang mencakup aplikasi Anda, seperti berikut:

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

Chrome telah mendukung Manifes sejak versi 38 untuk Android (Oktober 2014) dan memberi Anda kontrol atas tampilan aplikasi web saat diinstal ke layar utama (melalui properti short_name, name, dan icons) serta cara aplikasi diluncurkan saat pengguna mengklik ikon peluncuran (melalui start_url, display, dan orientation).

Contoh manifes ditampilkan di bawah ini. Ini tidak menampilkan semua hal yang dapat ada dalam manifes.

{
  "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"
}

Fitur ini sepenuhnya progresif dan memungkinkan Anda membuat pengalaman yang lebih baik dan lebih terintegrasi untuk pengguna browser yang mendukung fitur ini.

Saat pengguna menambahkan situs atau aplikasi Anda ke layar utama, ada intent dari pengguna untuk memperlakukannya seperti aplikasi. Artinya, Anda harus berusaha mengarahkan pengguna ke fungsi aplikasi, bukan halaman landing produk. Misalnya, jika pengguna diharuskan login ke aplikasi Anda, halaman tersebut adalah halaman yang baik untuk diluncurkan.

Aplikasi utilitas

Mayoritas aplikasi utilitas akan langsung merasakan manfaatnya. Untuk aplikasi tersebut, Anda mungkin ingin meluncurkannya secara mandiri persis seperti aplikasi lainnya di platform seluler. Untuk memberi tahu aplikasi agar diluncurkan secara mandiri, tambahkan Manifes Aplikasi Web ini:

    "display": "standalone"
Game

Mayoritas game akan langsung merasakan manfaat manifes. Sebagian besar game ingin meluncurkan layar penuh dan memaksakan orientasi tertentu.

Jika Anda mengembangkan penggulir vertikal atau game seperti Flappy Birds, kemungkinan besar Anda ingin game Anda selalu dalam mode potret.

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

Di sisi lain, jika Anda membangun game teka-teki atau game seperti X-Com, Anda mungkin ingin agar game selalu menggunakan orientasi lanskap.

    "display": "fullscreen",
    "orientation": "landscape"
Situs berita

Situs berita pada umumnya merupakan pengalaman berbasis materi murni. Sebagian besar developer secara alami tidak akan berpikir menambahkan manifes ke situs berita. Manifes akan memungkinkan Anda menentukan apa yang akan diluncurkan (halaman depan situs berita Anda) dan cara meluncurkannya (layar penuh atau sebagai tab browser biasa).

Pilihan tergantung Anda dan bagaimana menurut Anda akses ke pengalaman Anda akan disukai pengguna. Jika ingin situs Anda memiliki semua chrome browser yang Anda harapkan untuk situs tersebut, Anda dapat menyetel tampilan ke browser.

    "display": "browser"

Jika Anda ingin situs berita terasa seperti mayoritas aplikasi berita-sentris memperlakukan pengalamannya sebagai aplikasi dan menghapus semua chrome seperti web dari UI, Anda dapat melakukannya dengan menyetel tampilan ke standalone.

    "display": "standalone"

Palsukan: sembunyikan bilah alamat secara otomatis

Anda dapat "memalsukan layar penuh" dengan menyembunyikan secara otomatis kolom URL seperti berikut:

window.scrollTo(0, 1);

Ini adalah metode yang cukup sederhana, halaman dimuat dan panel browser disuruh menyingkir. Sayangnya, hal ini tidak terstandardisasi dan tidak didukung dengan baik. Anda juga harus mengatasi banyak quirks.

Misalnya, browser sering kali memulihkan posisi pada halaman saat pengguna kembali ke halaman tersebut. Penggunaan window.scrollTo akan menggantikannya, sehingga mengganggu pengguna. Untuk mengatasinya, Anda harus menyimpan posisi terakhir di localStorage, dan menangani kasus ekstrem (misalnya, jika pengguna membuka laman di beberapa jendela).

Panduan UX

Saat Anda membuat situs yang memanfaatkan layar penuh, ada sejumlah perubahan potensial pada pengalaman pengguna yang perlu Anda ketahui agar dapat membangun layanan yang akan disukai pengguna.

Jangan mengandalkan kontrol navigasi

iOS tidak memiliki tombol kembali perangkat keras atau isyarat untuk memuat ulang. Oleh karena itu, Anda harus memastikan bahwa pengguna dapat menjelajahi aplikasi tanpa terkunci di dalamnya.

Anda dapat mendeteksi dengan mudah apakah menjalankan dalam mode layar penuh atau mode terpasang pada semua platform utama.

iOS

Di iOS, Anda dapat menggunakan boolean navigator.standalone untuk mengetahui apakah pengguna telah meluncurkan dari layar utama atau tidak.

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

Manifes Aplikasi Web (Chrome, Opera, Samsung)

Saat diluncurkan sebagai aplikasi terinstal, Chrome tidak berjalan dalam pengalaman layar penuh yang sebenarnya sehingga document.fullscreenElement menampilkan null dan pemilih CSS tidak berfungsi.

Saat pengguna meminta layar penuh melalui gestur di situs Anda, API layar penuh standar akan tersedia, termasuk pemilih semu CSS yang memungkinkan Anda menyesuaikan UI untuk bereaksi terhadap status layar penuh seperti berikut

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

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

Jika pengguna meluncurkan situs Anda dari layar utama, kueri media display-mode akan ditetapkan ke apa yang telah ditentukan dalam Manifes Aplikasi Web. Dalam kasus layar penuh murni, maka menjadi:

@media (display-mode: fullscreen) {
}

Jika pengguna meluncurkan aplikasi dalam mode mandiri, kueri media display-mode akan menjadi standalone:

@media (display-mode: standalone) {
}

Firefox

Saat pengguna meminta layar penuh melalui situs Anda atau pengguna meluncurkan aplikasi dalam mode layar penuh, semua API layar penuh standar akan tersedia, termasuk pemilih semu CSS, yang memungkinkan Anda menyesuaikan UI untuk bereaksi terhadap status layar penuh seperti berikut:

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

Di IE, class semu CSS tidak memiliki tanda hubung, tetapi cara kerjanya mirip dengan Chrome dan Firefox.

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

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

Spesifikasi

Ejaan dalam spesifikasi sama dengan sintaksis yang digunakan oleh IE.

selector:fullscreen {
  display: block;
}

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

Mempertahankan pengguna dalam pengalaman layar penuh

Kadang-kadang API layar penuh bisa sedikit bertele-tele. Vendor browser tidak ingin mengunci pengguna di halaman layar penuh sehingga mereka mengembangkan mekanisme untuk meninggalkan layar penuh sesegera mungkin. Ini berarti Anda tidak dapat membuat situs web layar penuh yang mencakup beberapa halaman karena:

  • Mengubah URL secara terprogram menggunakan window.location = "http://example.com" akan keluar dari layar penuh.
  • Pengguna yang mengklik link eksternal di dalam halaman Anda akan keluar dari layar penuh.
  • Mengubah URL melalui navigator.pushState API juga akan keluar dari pengalaman layar penuh.

Anda memiliki dua opsi jika ingin mempertahankan pengguna dalam pengalaman layar penuh:

  1. Gunakan mekanisme aplikasi web yang dapat diinstal untuk beralih ke layar penuh.
  2. Kelola UI dan status aplikasi Anda menggunakan fragmen #.

Dengan menggunakan #syntax untuk memperbarui URL (window.location = "#somestate"), dan memproses peristiwa window.onhashchange, Anda dapat menggunakan stack histori browser sendiri untuk mengelola perubahan dalam status aplikasi, mengizinkan pengguna menggunakan tombol kembali hardware, atau menawarkan pengalaman tombol kembali terprogram yang sederhana dengan menggunakan history API sebagai berikut:

window.history.go(-1);

Biarkan pengguna memilih kapan beralih ke layar penuh

Tidak ada yang lebih mengganggu pengguna daripada situs yang melakukan sesuatu yang tidak diharapkan. Saat pengguna membuka situs Anda, jangan mencoba dan menipu mereka ke dalam layar penuh.

Jangan mencegat peristiwa sentuh pertama dan memanggil requestFullscreen().

  1. Hal ini menjengkelkan.
  2. Browser dapat memutuskan untuk mengonfirmasi pengguna pada suatu saat nanti tentang memungkinkan aplikasi menggunakan layar penuh.

Jika Anda ingin meluncurkan aplikasi layar penuh, pikirkan penggunaan pengalaman pemasangan untuk setiap platform.

Jangan mengirimkan spam kepada pengguna untuk memasang aplikasi Anda ke layar utama

Jika Anda berencana menawarkan pengalaman layar penuh melalui mekanisme aplikasi yang dipasang, pertimbangkan perasaan pengguna.

  • Bersikaplah bijak. Gunakan banner atau footer untuk memberi tahu bahwa mereka dapat menginstal aplikasi.
  • Jika mereka menutup konfirmasi, jangan tampilkan lagi.
  • Pada kunjungan pertama pengguna, mereka kemungkinan tidak ingin menginstal aplikasi, kecuali jika mereka senang dengan layanan Anda. Pertimbangkan untuk meminta mereka menginstal setelah interaksi positif di situs Anda.
  • Jika pengguna mengunjungi situs Anda secara rutin dan mereka tidak menginstal aplikasi, mereka kemungkinan tidak akan menginstal aplikasi Anda di masa mendatang. Jangan terus mengirimkan spam kepada mereka.

Kesimpulan

Meskipun kami tidak memiliki API terstandardisasi dan diimplementasikan penuh, dengan menggunakan beberapa panduan yang diberikan dalam artikel ini, Anda dapat dengan mudah membuat pengalaman yang memanfaatkan seluruh layar pengguna, terlepas dari klien.

Masukan