Tampilan Halaman WebView
Di pelajaran sebelumnya, kita sudah mempelajari lokasi UI halaman kita. Kita akan lanjut belajar pada pelajaran ini.
Memahami Satu Tampilan Web Asli (WebView)
Semua aplikasi seluler yang dibangun dengan NativePHP menggunakan satu tampilan web asli (WebView) sebagai wadah utama. Tampilan web memungkinkan kamu membuat antarmuka aplikasi dengan teknologi web frontend apa pun yang kamu kuasai. Karena pada dasarnya ini adalah halaman web, browser tertanam akan merender semua konten halaman tersebut.
Secara bawaan, WebView akan memenuhi seluruh area layar yang terlihat. Namun saat membuka fitur seperti kamera, antarmuka kamera akan menutup WebView sementara.
Inti dari NativePHP: Backend PHP + pengembangan hibrida dengan stack frontend apapun (Vue, jQuery, Tailwind dan lainnya)
WebView selalu ditampilkan di paling depan, hanya layar penuh seperti kamera atau browser bawaan yang akan menutupnya. Semua UI yang terlihat pengguna dirender oleh WebView.
Arsitektur dasar NativePHP Mobile: Wadah WebView tunggal, tanpa lapisan halaman asli banyak. Artinya NativePHP hanya memiliki satu halaman saja; semua perpindahan halaman dan tombol kembali berjalan di dalam WebView yang sama.
Aplikasi seluler NativePHP selalu hanya memiliki satu kontrol WebView asli. Semua proses render halaman aplikasi berada di dalam wadah web ini:
- Perpindahan halaman, peralihan rute, kembali ke halaman sebelumnya, popup, sub halaman dan peralihan SPA tidak akan pernah membuat WebView kedua. Desain ini bertujuan mengurangi penggunaan memori.
- Tidak ada tumpukan halaman asli Android/iOS serta hierarki Activity/ViewController;
- Beberapa “halaman” yang kita lihat sebenarnya hanyalah peralihan DOM di dalam satu WebView melalui rute frontend (Laravel / Livewire / Vue Router dll), logikanya sama persis dengan aplikasi web satu halaman biasa.
1 Pengaturan Viewport (tag meta untuk penyesuaian layar)
Siapa pun yang pernah membuat situs web seluler pasti sudah mengenal pengaturan ini.
Sama seperti browser biasa, WebView memiliki konsep Viewport (area tampilan), dikontrol dengan tag meta dengan sintaks yang sama persis dengan halaman web tradisional.
<meta name="viewport" content="width=device-width, initial-scale=1">Code language: HTML, XML (xml)Tambahkan tag meta ini di file HTML atau Blade PHP kamu. Saat ini hampir semua situs web memasang konfigurasi ini agar bisa menyesuaikan diri dengan browser ponsel. Tanpa konfigurasi ini, halaman akan dirender berdasarkan standar PC: tulisan terlihat tipis dan tata letak berantakan, karena ponsel memiliki resolusi DPI yang tinggi.
Kamu bisa coba di situs mana saja, contoh dokumentasi resmi NativePHP: Web View – NativePHP mobile v3 – NativePHP. Klik kanan halaman lalu lihat kode sumber untuk melihat tag tersebut.
Pengaturan ini memiliki dua atribut utama:
width=device-width: Lebar halaman sama dengan lebar fisik layar perangkat
initial-scale=1: Skala awal tampilan 1:1, tidak ada perbesaran/perkecilan otomatis
2 Nonaktifkan Zoom Dua Jari (Mensimulasikan Pengalaman Aplikasi Asli)
Aplikasi asli Android atau iOS tidak mengizinkan pengguna memperbesar/kecil layar dengan dua jari, berbeda dengan browser ponsel. Agar tampilan NativePHP mirip aplikasi asli, kamu harus menonaktifkan gerakan zoom ini.
Saat mengembangkan aplikasi seluler kita butuh kontrol penuh atas tampilan, melarang zoom manual akan menghasilkan perilaku yang sama dengan aplikasi murni asli.
Tambahkan atribut berikut ke tag viewport yang sudah ada:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Code language: HTML, XML (xml)user-scalable=no: Menonaktifkan gerakan zoom manual
3 Render Sampai Tepi Layar Edge-to-Edge (Prasyarat untuk Layar Notch dan Lengkung)
Untuk memaksimalkan kebebasan desain UI, WebView secara bawaan memenuhi seluruh layar. Hanya dengan HTML/CSS/JS kamu bisa menempatkan konten di posisi mana pun di layar depan.
Tetapi tidak seluruh permukaan layar bisa digunakan dengan normal. Sebagian besar perangkat memiliki notch kamera depan, sudut melengkung, tepi layar lengkung atau Dynamic Island di iPhone. Area ini masuk ke dalam viewport namun menutup konten dan tidak bisa diklik.
Untuk menyesuaikan layar berbentuk khusus, tambahkan viewport-fit=cover di tag meta viewport dan gunakan bersama jarak aman (Safe Area Insets).
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">Code language: HTML, XML (xml)viewport-fit=cover: Membolehkan halaman dirender sampai tepi paling luar layar (termasuk notch dan sudut melengkung). Hanya parameter ini saja tidak cukup karena konten akan tertutup notch, wajib gunakan bersama gaya CSS Safe Area, silakan baca bagian selanjutnya.
Area Aman Safe Areas
Area aman adalah bagian layar yang tidak tertutup dan bisa dilihat: tidak tertutup struktur perangkat keras (sudut melengkung, notch kamera depan, Dynamic Island) maupun antarmuka sistem yang permanen (bilah gerakan bawah, bilah status).
Perangkat akan menghitung batas area aman secara otomatis dan menyesuaikan dinamis saat berganti