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 menggunakancancelFullScreen()
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
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.)
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:
- Memberi tahu browser tentang manifes Anda
- 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:
- Gunakan mekanisme aplikasi web yang dapat diinstal untuk beralih ke layar penuh.
- 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()
.
- Hal ini menjengkelkan.
- 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.