Membuat Pengalaman Layar Penuh

Kami memiliki kemampuan untuk dengan mudah membuat situs web layar penuh yang mendalam dan aplikasi, tetapi seperti apa pun di web, ada beberapa cara untuk melakukannya. Hal ini menjadi sangat penting karena sekarang semakin banyak browser yang mendukung " aplikasi web" pengalaman pengguna yang meluncurkan layar penuh.

Menampilkan aplikasi atau situs dalam layar penuh

Ada beberapa cara yang bisa digunakan 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.
  • Palsu: sembunyikan kolom URL secara otomatis.

Meminta browser membuka layar penuh sebagai respons terhadap gestur pengguna

Tidak semua platform itu sama. iOS Safari tidak memiliki API layar penuh, tetapi kami melakukannya di Chrome pada Android, Firefox, dan IE 11+. Sebagian besar aplikasi yang Anda bangun akan menggunakan kombinasi JS API dan pemilih CSS yang disediakan oleh spesifikasi layar penuh. Utama JS API yang perlu Anda perhatikan saat membangun 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) akan menampilkan nilai 'true' (benar) jika salah satu elemen berada dalam mode layar penuh.

Jika aplikasi Anda dalam mode layar penuh, Anda tidak lagi memiliki kontrol UI browser yang tersedia untuk Anda. Ini mengubah cara pengguna berinteraksi dengan pengalaman yang lancar bagi developer. Mereka tidak memiliki kontrol navigasi standar seperti Teruskan dan Mundur; mereka tidak memiliki pintu keluar yaitu tombol {i>Refresh<i}. Penting penting untuk mengakomodasi skenario ini. Anda dapat menggunakan beberapa pemilih CSS untuk membantu Anda mengubah gaya dan penyajian 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 dibuat-buat; Saya telah menyembunyikan semua kerumitan di sekitar penggunaan awalan vendor.

Kode sebenarnya jauh lebih kompleks. Mozilla telah membuat skrip yang sangat berguna yang dapat Anda gunakan untuk beralih ke layar penuh. Sebagai Anda dapat melihat, situasi awalan vendor yang kompleks dan rumit dibandingkan dengan API yang ditentukan. Bahkan dengan kode yang sedikit disederhanakan di bawah ini, prosesnya masih rumit.

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

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

Tips Fullscreen API

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

Wajar jika berpikir bahwa Anda mengambil elemen {i>body<i} layar penuh, tetapi jika Anda di mesin render berbasis WebKit atau Blink, Anda akan melihatnya memiliki efek ganjil mengecilkan lebar {i>body<i} ke ukuran sekecil mungkin yang akan berisi semua saat ini. (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 menjadi layar penuh

Untuk membuat elemen video menjadi layar penuh, itu sama persis dengan membuat elemen lainnya elemen layar penuh. Anda memanggil metode requestFullscreen di 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 memiliki atribut kontrol yang ditentukan, tidak ada cara bagi pengguna untuk mengontrol video setelah mereka dalam mode layar penuh. Tujuan cara yang disarankan untuk melakukan ini 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 memberi Anda lebih banyak fleksibilitas karena Anda dapat menggabungkan 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 menggunakan pola ini, Anda dapat mendeteksi kapan layar penuh dijalankan dan menyesuaikan menggunakan antarmuka pengguna secara tepat, misalnya:

  • Dengan memberikan link kembali ke halaman awal
  • Dengan Menyediakan mekanisme untuk menutup dialog atau melakukan perjalanan mundur

Meluncurkan layar penuh halaman dari layar beranda

Meluncurkan halaman web layar penuh ketika pengguna menavigasi ke halaman tersebut tidak mungkin dilakukan. Vendor browser sangat menyadari bahwa pengalaman layar penuh pada setiap pemuatan halaman adalah gangguan yang sangat mengganggu, oleh karena itu diperlukan {i>gesture <i}pengguna untuk masuk ke mode layar penuh. Vendor mengizinkan pengguna untuk "menginstal" aplikasi, dan tindakan menginstal adalah memberi sinyal ke sistem operasi yang ingin diluncurkan pengguna sebagai aplikasi di terkelola sepenuhnya.

Di seluruh platform seluler utama, sangat mudah untuk diterapkan menggunakan tag meta, atau file manifes seperti berikut.

iOS

Sejak peluncuran iPhone, pengguna dapat menginstal Aplikasi Web ke layar beranda 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, maka tidak terjadi. Perilaku default-nya adalah menggunakan Safari untuk menampilkan web saat ini. Anda dapat menentukan apakah halaman web ditampilkan dalam mode layar penuh atau tidak. 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 laman layar penuh ketika pengguna telah menambahkannya ke layar beranda. Penting mirip dengan model Safari iOS.

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

Anda dapat menyiapkan aplikasi web agar ikon pintasan aplikasi ditambahkan ke layar beranda perangkat, dan menjalankan aplikasi dalam "mode aplikasi" layar penuh menggunakan "Tambahkan ke layar Utama" Chrome untuk Android item menu.

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 Anda bagi pengguna di area tersebut yang mereka harapkan untuk melihat aplikasi (misalnya layar beranda seluler), langsung apa yang dapat diluncurkan pengguna dan, yang lebih penting, bagaimana mereka dapat meluncurkannya. Di kolom di masa mendatang, manifes akan memberi Anda lebih banyak kontrol 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, Anda hanya perlu yang harus dilakukan adalah menambahkan 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) dan caranya harus diluncurkan saat pengguna mengklik ikon peluncuran (melalui start_url, display dan orientation).

Contoh manifes ditampilkan di bawah ini. Hal tersebut tidak menunjukkan semua hal yang dapat berada 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 konten dengan lebih baik pengalaman terintegrasi bagi pengguna {i>browser<i} yang mendukung fitur tersebut.

Saat pengguna menambahkan situs atau aplikasi Anda ke layar beranda, maksud dari pengguna untuk memperlakukannya seperti sebuah aplikasi. Artinya, Anda harus mengarahkan pengguna ke fungsi aplikasi Anda, bukan halaman landing produk. Misalnya, jika pengguna diharuskan masuk ke aplikasi, maka itu adalah laman yang baik untuk peluncuran.

Aplikasi utilitas

Sebagian besar aplikasi utilitas akan langsung mendapatkan manfaat dari fitur ini. Untuk mereka aplikasi yang Anda ingin luncurkan mandiri, sama seperti aplikasi lainnya di platform seluler. Untuk memberi tahu aplikasi agar diluncurkan secara mandiri, tambahkan properti Web ini Manifes Aplikasi:

    "display": "standalone"
Game

Sebagian besar game akan langsung mendapatkan manfaat dari manifes. Luas kebanyakan game ingin meluncurkan layar penuh dan memaksakan orientasi.

Jika Anda mengembangkan {i>scroller<i} vertikal atau game seperti Flappy Birds maka Anda kemungkinan besar ia ingin game Anda selalu dalam mode potret.

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

Di sisi lain, jika Anda membuat {i>puzzle<i} atau permainan seperti X-Com, maka Anda mungkin menginginkan agar game selalu menggunakan orientasi lanskap.

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

Pada umumnya, situs berita merupakan pengalaman berbasis konten murni. Sebagian besar developer di mana mereka tidak berpikir untuk menambahkan manifes ke situs berita. Manifes akan memungkinkan Anda menentukan apa yang akan diluncurkan (halaman depan situs berita Anda) dan bagaimana meluncurkannya (layar penuh atau sebagai tab browser biasa).

Pilihan ada di tangan Anda dan bagaimana menurut Anda pengguna akan mengakses pengalaman yang lancar bagi developer. Jika Anda ingin situs Anda memiliki semua browser chrome seperti yang Anda inginkan Anda harapkan dari situs, Anda dapat menyetel tampilan ke browser.

    "display": "browser"

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

    "display": "standalone"

Palsu: sembunyikan kolom URL secara otomatis

Anda bisa "palsu layar penuh" dengan menyembunyikan otomatis kolom URL sebagai berikut:

window.scrollTo(0, 1);

Ini adalah metode yang cukup sederhana, laman dimuat dan bilah {i>browser<i} diminta untuk keluar dari proyek. Sayangnya, tidak terstandardisasi dan tidak baik didukung. Anda juga harus mengatasi banyak kebiasaan.

Misalnya, browser sering kali memulihkan posisi pada halaman saat pengguna kembali ke sana. Penggunaan window.scrollTo akan menggantikannya, dan hal ini mengganggu pengguna. Untuk mengatasi hal ini, Anda harus menyimpan posisi terakhir di localStorage, dan tangani kasus ekstrem (misalnya, jika pengguna memiliki halaman terbuka di beberapa jendela).

Panduan UX

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

Jangan mengandalkan kontrol navigasi

iOS tidak memiliki tombol kembali hardware atau gestur refresh. Oleh karena itu, Anda harus memastikan bahwa pengguna dapat bernavigasi di seluruh aplikasi tanpa terkunci.

Anda dapat mendeteksi apakah Anda berjalan dalam mode layar penuh atau mode terinstal di semua platform utama.

iOS

Di iOS, Anda dapat menggunakan boolean navigator.standalone untuk melihat apakah pengguna diluncurkan dari layar beranda 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 layar penuh yang sebenarnya sehingga document.fullscreenElement menampilkan null dan pemilih CSS tidak berhasil.

Saat pengguna meminta layar penuh melalui gestur di situs Anda, model API layar penuh tersedia, termasuk pemilih semu CSS yang memungkinkan Anda menyesuaikan UI Anda 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, media display-mode akan ditetapkan ke kueri yang telah ditentukan dalam Manifes Aplikasi Web. Dalam kasus layar penuh murni, maka akan:

@media (display-mode: fullscreen) {
}

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

@media (display-mode: standalone) {
}

Firefox

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

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, kelas 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 cocok 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

API layar penuh terkadang bisa sedikit berantakan. Vendor browser tidak ingin untuk mengunci pengguna di laman layar penuh sehingga mereka mengembangkan mekanisme untuk keluar dari layar penuh sesegera mungkin. Ini berarti Anda tidak dapat membangun {i>website<i} layar penuh yang mencakup beberapa halaman karena:

  • Mengubah URL secara terprogram menggunakan window.location = "http://example.com" akan memisahkan 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 menggunakan layar penuh.
  2. Kelola UI dan status aplikasi Anda menggunakan fragmen #.

Dengan menggunakan #syntax untuk memperbarui url (window.location = "#somestate"), dan Mendeteksi peristiwa window.onhashchange, Anda dapat menggunakan stack histori untuk mengelola perubahan status aplikasi, memungkinkan pengguna menggunakan tombol kembali perangkat kerasnya, atau menawarkan tombol kembali terprogram yang sederhana pengalaman pengguna dengan menggunakan history API sebagai berikut:

window.history.go(-1);

Izinkan pengguna memilih kapan harus menggunakan layar penuh

Tidak ada yang lebih menjengkelkan bagi pengguna daripada situs web yang melakukan sesuatu tak terduga. Saat pengguna menavigasi ke situs Anda, jangan mencoba dan mengelabui mereka untuk layar penuh.

Jangan mencegat peristiwa sentuh pertama dan memanggil requestFullscreen().

  1. Menjengkelkan.
  2. {i>Browser<i} dapat memutuskan untuk memberi tahu pengguna pada suatu saat di masa mendatang tentang memungkinkan aplikasi untuk menggunakan layar penuh.

Jika Anda ingin meluncurkan aplikasi layar penuh, pikirkan tentang menggunakan yang unik untuk setiap platform.

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

Jika Anda berencana menawarkan pengalaman layar penuh melalui mekanisme aplikasi yang diinstal memperhatikan pengguna.

  • Bersikaplah diam-diam. Gunakan banner atau {i>footer<i} untuk memberi tahu bahwa mereka dapat menginstal .
  • Jika mereka menutup perintah, jangan tampilkan lagi.
  • Pada kunjungan pertama pengguna, mereka cenderung tidak ingin menginstal aplikasi kecuali mereka puas 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 mereka tidak menginstal aplikasi Anda di masa mendatang. Jangan terus-menerus mengirimkan spam kepada mereka.

Kesimpulan

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

Masukan