Membuat Pengalaman Layar Penuh

Kita memiliki kemampuan untuk membuat situs dan aplikasi layar penuh yang imersif dengan mudah, tetapi seperti halnya apa pun di web, ada beberapa cara untuk melakukannya. Hal ini menjadi penting terutama sekarang karena lebih banyak browser mendukung pengalaman "aplikasi web terinstal" yang meluncurkan layar penuh.

Menampilkan aplikasi atau situs Anda ke layar penuh

Ada beberapa cara yang dapat digunakan pengguna atau developer untuk mendapatkan aplikasi web dalam layar penuh.

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

Minta browser membuka layar penuh sebagai respons terhadap gestur pengguna

Tidak semua platform sama. iOS Safari tidak memiliki API layar penuh, namun kami memilikinya di Chrome di 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 diawali di Chrome, Firefox, dan IE) menampilkan nilai benar jika salah satu elemen berada dalam mode layar penuh.

Catatan: Anda akan melihat bahwa dalam versi berawalan ada banyak inkonsistensi antara casing 'S' di layar. Ini janggal, tetapi ini merupakan masalah dengan spesifikasi yang sedang diterapkan.

Saat aplikasi Anda dalam mode layar penuh, Anda tidak lagi memiliki kontrol UI browser yang tersedia untuk Anda. Ini mengubah cara pengguna berinteraksi dengan pengalaman Anda. Mobil ini tidak memiliki kontrol navigasi standar seperti Maju dan Mundur; mereka tidak memiliki pintu melarikan diri yang berupa tombol Muat Ulang. Penting bagi Anda untuk menangani 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 bisa digunakan untuk beralih ke layar penuh. Seperti yang Anda lihat, situasi awalan vendor kompleks dan rumit dibandingkan dengan API yang ditentukan. Bahkan 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 benci kompleksitas. 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 API Layar Penuh

Membuat dokumen menjadi layar penuh

Gambar 1: Layar penuh di elemen isi.

Wajar saja berpikir bahwa Anda mengambil elemen isi di layar penuh, tetapi jika Anda menggunakan mesin rendering berbasis WebKit atau Blink, Anda akan melihat bahwa fitur ini memiliki efek aneh berupa memperkecil lebar isi ke ukuran sekecil mungkin yang akan memuat semua konten. (Mozilla Gecko boleh.)

Gambar 2: Layar penuh di elemen dokumen.

Untuk memperbaikinya, gunakan elemen document, bukan elemen isi:

document.documentElement.requestFullscreen();

Membuat elemen video menjadi layar penuh

Membuat elemen video menjadi layar penuh sama persis dengan membuat elemen lainnya menjadi 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> belum menentukan atribut kontrol, tidak ada cara bagi pengguna untuk mengontrol video setelah mereka dalam mode layar penuh. Cara yang direkomendasikan untuk melakukannya adalah dengan 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 lebih banyak fleksibilitas karena Anda dapat menggabungkan objek container dengan pemilih pseudo 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 berjalan dan menyesuaikan antarmuka pengguna dengan tepat, misalnya:

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

Meluncurkan halaman layar penuh dari layar utama

Meluncurkan halaman web layar penuh saat pengguna menavigasi tidak dapat dilakukan. Vendor browser sangat menyadari bahwa pengalaman layar penuh di setiap pemuatan halaman sangat mengganggu, sehingga gestur pengguna diperlukan untuk masuk ke layar penuh. Vendor mengizinkan pengguna untuk "menginstal" aplikasi, dan tindakan menginstal adalah sinyal ke sistem operasi yang ingin diluncurkan pengguna sebagai aplikasi pada platform.

Di seluruh platform seluler utama, sangat mudah untuk menerapkannya 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 ya, aplikasi web akan berjalan dalam mode layar penuh; jika tidak, aplikasi web akan berjalan dalam mode layar penuh. Perilaku default-nya 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.

Apel

Chrome untuk Android

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

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

Anda dapat menyiapkan aplikasi web agar ikon pintasan aplikasi ditambahkan ke layar utama perangkat, dan meluncurkan aplikasi dalam "mode aplikasi" layar penuh menggunakan item menu "Tambahkan ke Layar utama" 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, sebagai developer, kemampuan untuk mengontrol bagaimana aplikasi Anda ditampilkan kepada pengguna di area yang mereka harapkan untuk melihat aplikasi (misalnya, layar utama seluler), mengarahkan apa yang dapat diluncurkan pengguna, dan yang lebih penting, bagaimana 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 membuat manifes dan dihosting di situs, Anda hanya perlu menambahkan tag link 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 peluncuran saat pengguna mengklik ikon peluncuran (melalui start_url, display, dan orientation).

Contoh manifes ditampilkan di bawah ini. Kode ini tidak menunjukkan 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 menciptakan pengalaman yang lebih baik dan lebih terintegrasi bagi pengguna browser yang mendukung fitur ini.

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

Aplikasi utilitas

Sebagian besar aplikasi utilitas akan langsung merasakan manfaatnya. Untuk aplikasi tersebut, Anda mungkin ingin meluncurkannya secara mandiri 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 mendapatkan manfaat dari manifes. Sebagian besar game ingin meluncurkan layar penuh dan memaksakan orientasi tertentu.

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

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

Di sisi lain, jika Anda membuat puzzler atau game seperti X-Com, Anda mungkin ingin game selalu menggunakan orientasi lanskap.

    "display": "fullscreen",
    "orientation": "landscape"

Situs berita

Pada umumnya, situs berita adalah pengalaman berbasis konten murni. Sebagian besar developer secara alami tidak akan berpikir untuk 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 ada di tangan Anda dan bagaimana menurut Anda pengguna akan mengakses pengalaman Anda. Jika ingin situs Anda memiliki semua chrome browser yang diharapkan untuk dimiliki situs, Anda dapat menyetel tampilan ke browser.

    "display": "browser"

Jika Anda ingin situs berita terasa seperti sebagian besar aplikasi yang berfokus pada berita memperlakukan pengalamannya sebagai aplikasi dan menghapus semua chrome seperti web dari UI, Anda dapat melakukannya dengan menyetel tampilan ke standalone.

    "display": "standalone"

Palsukan: sembunyikan kolom URL secara otomatis

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

window.scrollTo(0, 1);

Perhatian: Perhatian: Saya memberitahukan hal ini sebagai teman. Itu ada. Ini adalah alat, tapi ini adalah cara pintas. Jangan menggunakannya. — Panji

Ini adalah metode yang cukup sederhana, halaman dimuat dan kolom browser diberi tahu untuk keluar dari halaman. 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 membuka kembali halaman tersebut. Penggunaan window.scrollTo akan menggantikan metode ini, sehingga mengganggu pengguna. Untuk mengatasi hal ini, Anda harus menyimpan posisi terakhir di localStorage, dan menangani kasus ekstrem (misalnya, jika pengguna membuka halaman di beberapa jendela).

Panduan UX

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

Jangan mengandalkan kontrol navigasi

iOS tidak memiliki tombol kembali perangkat keras atau gestur refresh. Oleh karena itu, Anda harus memastikan bahwa pengguna dapat menjelajahi aplikasi tanpa terkunci.

Anda dapat mendeteksi dengan mudah apakah Anda menjalankan mode layar penuh atau mode terinstal di semua platform utama.

iOS

Di iOS, Anda dapat menggunakan boolean navigator.standalone untuk mengetahui apakah pengguna telah melakukan peluncuran 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 pseudo CSS yang memungkinkan Anda mengadaptasi 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 disetel ke hal yang telah ditentukan di Manifes Aplikasi Web. Dalam kasus layar penuh murni, tampilannya akan 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 pseudo 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 berfungsi 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 sesuai dengan sintaksis yang digunakan oleh IE.

selector:fullscreen {
  display: block;
}

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

Membiarkan pengguna tetap dalam pengalaman layar penuh

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

• Mengubah URL secara terprogram menggunakan window.location = "http://example.com" akan membuat jeda 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 membuat pengecualian 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 status aplikasi, memungkinkan pengguna menggunakan tombol kembali hardware, atau menawarkan pengalaman tombol kembali terprogram yang sederhana dengan menggunakan API histori sebagai berikut:

window.history.go(-1);

Biarkan pengguna memilih kapan harus beralih ke layar penuh

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

Jangan mencegat peristiwa sentuh pertama dan memanggil requestFullscreen().

1. Menjengkelkan.
2. Browser dapat memutuskan untuk meminta izin pengguna agar dapat menggunakan aplikasi dalam mode layar penuh di masa mendatang.

Jika Anda ingin meluncurkan aplikasi layar penuh, pertimbangkan untuk menggunakan pengalaman penginstalan untuk setiap platform.

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

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

• Bersikaplah bijak. Gunakan banner atau footer untuk memberi tahu bahwa mereka dapat menginstal aplikasi.
• Jika mereka menutup perintah, jangan tampilkan lagi.
• Pada kunjungan pertama pengguna, mereka cenderung tidak ingin menginstal aplikasi, kecuali jika mereka puas dengan layanan Anda. Pertimbangkan untuk meminta pengguna agar menginstal setelah interaksi yang positif di situs Anda.
• Jika pengguna mengunjungi situs Anda secara rutin dan tidak menginstal aplikasi, mereka cenderung tidak akan menginstal aplikasi Anda pada masa mendatang. Jangan kirimkan spam kepada mereka terus-menerus.

Kesimpulan

Meskipun kami tidak memiliki API yang sepenuhnya terstandardisasi dan diterapkan, dengan menggunakan beberapa panduan yang disajikan dalam artikel ini, Anda dapat dengan mudah mem-build pengalaman yang memanfaatkan seluruh layar pengguna, terlepas dari klien.

Masukan