Mengaktifkan Mode Full Screen Chrome Di Android/IOS dengan JavaScript Full Screen API

Mengaktifkan Mode Full Screen Chrome Di Android/IOS dengan JavaScript Full Screen API


Salam, ada kondisi di mana seorang web developer lebih menginginkan aplikasi berjalan di website, ketimbang menjadikan aplikasi tersebut sebagai apps yang running di environment tertentu misalnya seperti di smartphone, menggunakan android atau di iOS. Terlebih lagi saat ini sudah marak penggunaan PWA, yang memanfaatkan service worker. Terlebih lagi keunggulan PWA seperti sudah mendukung Push Notification dan Background Sync. Dan tentunya pada masa yang akan datang fitur-fitur lainnya akan terus di tambahkan. Namun saat ini kita tidak akan membahas PWA lebih jauh. Pembahasan kali ini jauh lebih sederhana. Tetapi akan sangat bermanfaat jika diterapkan sesuai dengan kebutuhan Anda. Tutorial kali ini mengenai suatu kasus, dimana seorang web developer dihadapkan kepada pembuatan UX yang lebih efisien. Dimana mode fullscreen pada UI nya menjadi amat dibutuhkan oleh user dalam menjalankan suatu proses. 


Sederhananya bagaimana dalam smartphone menjalankan mode fullscreen di browsernya, entah itu chrome, firefox atau yang lainnya. 

Mozilla sudah jauh-jauh hari memikirkan hal ini, dan mengeluarkan API nya sendiri untuk menangani masalah seperti ini. Dokumentasi lengkap bisa di dapatkan di https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Kita tidak akan membahas dokumentasinya tapi lebih kepada implementasinya. 

Yang jadi catatan adalah, FullScreen API ini bisa bekerja ketika ada suatu event yang di lakukan oleh user. Tidak bisa dijalankan lewat mode onload di element body-nya. Event di sini misalkan ketika user menekan enter, atau meng-klik suatu button, ataupun yang lainnya. Jadi tidak bisa bekerja misalnya ketika body di load lalu dijalankan lah mode fullscreen, tidak bekerja seperti itu.

Oleh karena itu Fullscreen API ini sangat cocok di integrasikan dengan modal windows yang dimiliki bootstrap, seperti ketika halaman di load akan muncul notif modal (bootstrap) dengan pertanyaan seperti, Anda akan masuk ke dalam mode fullscreen. Dengan satu tombol Ok saja tanpa cancel. 

Oke berikut implementasi sederhana, tanpa menggunakan modal, kita hanya menggunakan satu tombol button saja.

Untuk demonya silahkan bisa cek di sini https://www.ilmuwebsite.com/tutorial/javascript/full-screen.html

Berikut adalah source code yang bisa Anda gunakan.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head></head>
	<body onload="toggleFullScreen()">
		<button id="full-screen">FULL SCREEN</button>
		
		<script type="text/javascript"/>
			document.getElementById("full-screen").addEventListener("click", function(e) {			  
				toggleFullScreen();			 
			}, false);
			
			function toggleFullScreen() {
			  if (!document.fullscreenElement) {
				  document.documentElement.requestFullscreen();
			  } else {
				if (document.exitFullscreen) {
				  document.exitFullscreen(); 
				}
			  }
			}
		</script>
		
	</body>
</html>

 

Singkatnya kita menggunakan

document.documentElement.requestFullscreen();

yang mana ini merupakan API yang disediakan oleh Mozilla yang sudah diterapkan ke browser terbaru saat ini, yang mana daftar dan detil mengenai Fullscreen API ini bisa Anda cek di https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Baik cukup segitu saja, semoga bermanfaat, selamat mencoba, selamat bereksperimen. Jangan lupa untuk share jika dirasa tutorial ini bermanfaat.

Loka Dwiartara
Co-Founder Ilmuwebsite

 

Artikel Terkait :