Progressive Web Apps (PWA) atau Aplikasi Web Progresif menjembatani kesenjangan antara situs web dengan aplikasi asli. Declan Chidlow dari Smashing Magazine menjelaskan bagaimana PWA mengubah aplikasi web menjadi pengalaman mandiri yang menyerupai aplikasi native1. Tantangan desain muncul ketika mode tampilan berbeda diterapkan.
Empat Mode Tampilan Utama PWA
File manifest mendefinisikan PWA kita. Mode tampilan tersedia dalam empat pilihan yang menawarkan tingkat visibilitas antarmuka browser berbeda2.
| Mode 🎯 | Karakteristik Utama | UI Browser |
|---|---|---|
| Fullscreen | Menyembunyikan semua UI browser, menggunakan seluruh layar | Tidak ada |
| Standalone | Terlihat seperti aplikasi asli, menyembunyikan kontrol browser | Hanya sistem UI |
| Minimal-UI | Menampilkan elemen UI browser yang minimal | Sangat terbatas |
| Browser | Pengalaman browser web standar lengkap | Penuh |
| Window Controls | PWA mengambil seluruh jendela (eksperimental) | Overlay tombol |
| Tabbed | Relevan untuk multiple aplikasi dalam satu jendela | Tab interface |
| Picture-in-Picture | Berlaku untuk mode gambar-dalam-gambar | Floating window |
Kita sering ingin PWA terasa seperti aplikasi bukan situs web di browser. Maka mode fullscreen atau standalone dipilih untuk menyembunyikan antarmuka browser3. Ini bagus untuk membuat aplikasi terasa lebih natural, tetapi menimbulkan masalah yang biasanya tidak kita pertimbangkan saat membangun untuk web.
Media Queries untuk Menargetkan Mode
Browser memberikan banyak fungsi kepada kita. Tombol maju/mundur, kemampuan refresh halaman, pencarian dalam halaman, atau manipulasi URL adalah fitur yang disediakan browser4. Pengguna bisa kehilangan akses ketika UI browser disembunyi.
Implementasi CSS dan JavaScript
Fitur media display-mode bisa digunakan seperti media query lainnya. Query @media (display-mode: standalone) hanya berlaku untuk halaman yang disetel ke mode standalone5. Begitu pula dengan mode fullscreen, minimal-ui, dan browser yang masing-masing memiliki query tersendiri.
CSS tidak selalu cukup kadang. JavaScript juga bisa mereferensikan mode tampilan dengan window.matchMedia untuk membuat penyesuaian yang diperlukan6. Kode ini mendengarkan perubahan mode tampilan secara dinamis.
Properti Scope dan Start URL
Cara lain menyembunyikan konten adalah mengatur properti scope dan start_url. Ini bukan menggunakan media query tetapi harus dipertimbangkan sebagai cara menyajikan konten berbeda7. Scope mendefinisikan level teratas PWA, ketika pengguna keluar dari scope mereka masih punya antarmuka mirip aplikasi tapi mendapat akses ke elemen UI browser.
Aplikasi Praktis Optimasi
Konten Disesuaikan untuk Pengguna PWA
Pengguna yang menginstal aplikasi sebagai PWA sudah terkonversi. Anda bisa mengubah aplikasi untuk mengurangi bahasa marketing dan fokus pada pengalaman pengguna8. Mereka mungkin tidak butuh konten promosi atau prompt instalasi lagi.
Fitur dan Opsi Lebih Banyak Ditampilkan
Anda perlu langsung mengekspos lebih banyak hal dalam mode PWA karena orang tidak bisa mengakses pengaturan browser dengan mudah ketika UI browser tersembunyi9. Fitur seperti mengubah ukuran font, beralih antara mode terang dan gelap, bookmark, berbagi, atau tab mungkin memerlukan alternatif dalam aplikasi.
Bilah navigasi bawah umum di aplikasi mobile asli berkat kemudahan jangkauan yang diberikan, tapi tidak umum di situs web. Orang kadang mencetak situs web tetapi sangat jarang mencetak aplikasi10. Pertimbangkan apakah fitur seperti tombol cetak harus disembunyikan dalam mode PWA.
Prompt Instalasi yang Cerdas
Gangguan umum adalah prompt untuk menginstal situs sebagai PWA muncul ketika pengguna sudah menginstal situs tersebut. Browser idealnya akan memberikan prompt instalasi sendiri jika PWA kita dikonfigurasi dengan benar11. Kita bisa memperbaiki dengan menyembunyikan prompt instalasi menggunakan media query atau mendeteksi mode tampilan saat ini dengan JavaScript.
Transisi Visual yang Ditingkatkan
Transisi tampilan bisa terasa asing di web tetapi merupakan fitur umum aplikasi asli. Kita bisa mengatur transisi hanya untuk PWA dengan membungkus CSS yang relevan dengan tepat12. Bahkan bisa mengubah desain situs sepenuhnya agar lebih sesuai dengan sistem desain asli saat berjalan sebagai PWA dengan memasangkan pemeriksaan mode tampilan dengan pemeriksaan perangkat atau browser yang digunakan.
Dukungan Browser dan Pengujian
Dukungan browser untuk media query mode tampilan bagus dan luas, namun Firefox tidak memiliki dukungan PWA13. Firefox untuk Android hanya menampilkan PWA dalam mode browser sehingga pertimbangan yang diperlukan harus dibuat. Untungnya peningkatan progresif ada di pihak kita memberikan degradasi yang anggun.
Menguji PWA bisa menantang karena setiap perangkat dan browser menangani mereka secara berbeda. Setiap mode tampilan berperilaku sedikit berbeda di setiap kombinasi browser dan OS14. Browser tidak memiliki cara yang nyaman untuk mensimulasikan mode tampilan untuk pengujian. Anda harus menguji PWA pada perangkat, browser, dan sistem operasi berbeda untuk memastikan semuanya berfungsi di mana pun seharusnya.
Kesimpulan
Menggunakan PWA adalah pengalaman yang fundamental berbeda dari menggunakan aplikasi web di browser. Media query display-mode menyediakan cara kuat untuk membuat Aplikasi Web Progresif yang benar-benar adaptif15. Dengan memanfaatkan query ini kita bisa menyembunyikan prompt instalasi yang redundan, menyediakan bantuan navigasi yang sesuai, menyesuaikan konten dan fungsionalitas, serta menciptakan pengalaman yang lebih terasa asli. Kuncinya adalah mengingat bahwa pengguna PWA dalam mode standalone memiliki kebutuhan dan ekspektasi berbeda dari pengunjung situs web standar.
Daftar Pustaka
- Chidlow, Declan. "Optimizing PWAs For Different Display Modes." Smashing Magazine, 26 Agustus 2025. https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
- Ibid.
