Bab ini berfokus pada beberapa aspek penting dari rendering konten di luar tab browser.
Jendela
Sistem operasi yang berbeda memiliki gagasan yang berbeda tentang jendela aplikasi. Misalnya, pada iPhone, aplikasi selalu memenuhi 100% layar. Di Android dan iPad, aplikasi biasanya menjalankan layar penuh tetapi memungkinkan untuk berbagi layar antara dua aplikasi, tetapi hanya ada satu instance aplikasi yang terbuka pada satu waktu. Sebaliknya, di perangkat desktop, sebuah aplikasi dapat membuka lebih dari satu instance sekaligus. Aplikasi membagikan ruang layar yang tersedia dengan semua aplikasi terbuka lainnya. Setiap instance aplikasi dapat diubah ukurannya dan diposisikan di mana saja pada layar, bahkan tumpang tindih dengan aplikasi lain.
Ikon
Kami mengenali aplikasi dari ikonnya. Ikon tersebut muncul saat Anda menelusuri aplikasi, di setelan, di mana pun Anda meluncurkan aplikasi, dan di tempat Anda melihat aplikasi yang sedang berjalan.
Fitur tersebut meliputi:
- Layar utama (iOS, iPadOS, Android).
- Peluncur Aplikasi (macOS, Android).
- Menu Mulai atau Menu Aplikasi (Windows, ChromeOS, Linux).
- Panel Dok, TaskBar, atau Multi-task (semua sistem operasi).
Saat membuat ikon untuk Progressive Web App, pastikan ikonnya tidak bergantung pada platform, karena setiap sistem operasi dapat merender ikon dan menerapkan mask bentuk yang berbeda pada ikon tersebut, seperti pada gambar di bawah.
Tema aplikasi
Ada sejumlah cara untuk menyesuaikan gaya aplikasi di PWA Anda, termasuk:
- Warna tema: menentukan warna panel judul jendela pada desktop dan warna status bar di perangkat seluler. Dengan menggunakan tag meta, Anda dapat memiliki opsi untuk skema yang berbeda, seperti mode gelap atau terang dan opsi tersebut akan digunakan berdasarkan preferensi pengguna.
- Warna latar belakang: menentukan warna jendela sebelum aplikasi dan CSS-nya dimuat.
- Warna aksen: menentukan warna komponen browser bawaan, seperti kontrol formulir.
Mode tampilan
Anda dapat menentukan jenis pengalaman jendela yang diinginkan untuk Progressive Web App. Ada tiga opsi yang dapat dipilih:
- Layar penuh
- Mandiri
- Antarmuka Pengguna Minimal
Pengalaman layar penuh
Pengalaman layar penuh cocok untuk pengalaman yang imersif, seperti pengalaman game, VR, atau AR. Saat ini, alat ini hanya tersedia di perangkat Android, dan menyembunyikan status bar serta menu navigasi, sehingga PWA Anda memiliki 100% layar untuk konten Anda.
Di desktop dan iPadOS, PWA layar penuh tidak didukung; tetapi, Anda dapat menggunakan Fullscreen API dari dalam PWA untuk menampilkan aplikasi Anda dalam layar penuh atas permintaan pengguna.
Pengalaman mandiri
Opsi paling umum untuk Progressive Web App, mode mandiri menampilkan PWA Anda di jendela standar OS tanpa UI navigasi browser apa pun. Jendela ini juga dapat menyertakan menu yang dikontrol browser tempat pengguna dapat:
- Salin URL saat ini.
- Lihat, terapkan, atau nonaktifkan ekstensi browser.
- Lihat dan ubah izin.
- Periksa origin saat ini dan sertifikat SSL.
Panel judul juga dapat menampilkan izin dan penggunaan hardware yang menggantikan omnibox atau kolom URL saat PWA merender di tab.
Di perangkat seluler, pengalaman PWA mandiri akan membuat layar standar yang membuat status bar tetap terlihat, sehingga pengguna masih dapat melihat notifikasi, waktu, dan level baterai. Sering kali tidak ada menu yang dikontrol browser seperti yang dapat disertakan oleh pengalaman mandiri desktop.
Beberapa browser di Android membuat notifikasi tetap dan senyap saat PWA berada di latar depan yang memungkinkan pengguna menyalin URL saat ini atau opsi lainnya.
Antarmuka pengguna minimal
Mode ini tersedia untuk Progressive Web App di sistem operasi Android dan desktop. Saat Anda menggunakannya, browser yang merender PWA Anda akan menampilkan antarmuka pengguna minimal untuk membantu pengguna bernavigasi di dalam aplikasi.
Di Android, Anda akan mendapatkan panel judul yang merender elemen <title> saat ini dan origin dengan menu drop-down kecil yang tersedia. Di desktop, Anda akan mendapatkan sekumpulan tombol di panel judul untuk membantu navigasi, termasuk tombol kembali dan kontrol yang beralih antara tindakan berhenti dan muat ulang, berdasarkan status pemuatan saat ini.
Mengoptimalkan desain untuk desktop
Saat mendesain Progressive Web App agar berfungsi di desktop, Anda perlu mempertimbangkan kemungkinan tak terbatas untuk ukuran jendela, jika dibandingkan dengan berada di tab browser atau sebagai aplikasi di sistem operasi seluler.
Dalam Bab 3, kami menyebutkan mode mini: aplikasi desktop dapat berukuran sekecil 200 x 100 piksel. Jendela ini akan menggunakan konten elemen <title> di HTML Anda sebagai judul jendela. Konten tersebut juga dirender saat Anda melakukan alt-tab di antara aplikasi dan di tempat lain.
Perhatikan elemen <title> HTML dan pertimbangkan kembali cara Anda menggunakannya. <title> bukan hanya untuk SEO atau merender hanya karakter pertama pada tab browser; ini akan menjadi bagian dari pengalaman pengguna pada jendela desktop mandiri Anda.
Praktik terbaik CSS
Semua pengalaman Anda dengan tata letak, desain, dan animasi CSS akan valid jika konten dirender dalam pengalaman mandiri. Namun, ada beberapa tips dan trik untuk meningkatkan kualitas pengalaman menggunakan jendela mandiri.
Kueri Media
Kueri media pertama yang dapat Anda manfaatkan di PWA adalah properti display-mode yang menerima nilai browser, standalone, minimal-ui, atau fullscreen.
Kueri media ini menerapkan gaya yang berbeda untuk setiap mode. Misalnya, Anda dapat merender undangan penginstalan hanya saat dalam mode browser, atau merender satu informasi tertentu hanya saat pengguna menggunakan aplikasi Anda dari ikon sistem. Hal ini mungkin termasuk menambahkan tombol kembali untuk digunakan saat aplikasi Anda diluncurkan dalam mode mandiri.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
Pengalaman aplikasi
Saat pengguna menggunakan PWA yang diinstal, mereka mengharapkan perilaku aplikasi. Meskipun tidak mudah untuk menentukan artinya, perilaku web default tidak memberikan pengalaman terbaik dalam beberapa situasi.
Pilihan pengguna
Konten umumnya dapat dipilih dengan mouse atau pointer, atau gestur sentuh tekan dan tahan. Meskipun membantu untuk konten, fitur ini tidak memberikan pengalaman terbaik untuk item navigasi, menu, dan tombol dalam PWA Anda.
Oleh karena itu, sebaiknya nonaktifkan pilihan pengguna pada elemen ini menggunakan user-select: none dan versi awalan -webkit--nya:
.unselectable {
user-select: none;
}
Warna aksen
Di PWA, Anda dapat menentukan warna agar cocok dengan merek Anda dalam kontrol formulir HTML menggunakan properti accent-color.
Font sistem
Jika ingin elemen, seperti dialog atau pesan, cocok dengan font platform default pengguna, Anda dapat menggunakan jenis font berikut:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Tarik untuk me-refresh
Browser seluler modern, seperti Google Chrome dan Safari, memiliki fitur yang memuat ulang halaman saat halaman dibuka. Di beberapa browser, seperti Chrome di Android, perilaku tersebut juga diaktifkan di PWA mandiri.
Sebaiknya nonaktifkan tindakan ini. Misalnya, saat menyediakan pengelolaan gestur atau tindakan refresh Anda sendiri, atau jika ada kemungkinan pengguna akan memicu tindakan tersebut secara tidak sengaja.
Anda dapat menonaktifkan perilaku ini menggunakan overscroll-behavior-y: contain:.
body {
overscroll-behavior-y: contain;
}
Area aman
Beberapa perangkat tidak memiliki layar persegi panjang yang tidak terhalang; sebaliknya, bentuk layarnya mungkin berbeda, seperti lingkaran, atau memiliki bagian layar yang tidak dapat digunakan, seperti lekukan iPhone 13. Dalam kasus ini, beberapa browser akan mengekspos variabel lingkungan dengan area aman yang dapat menampilkan konten.
Jika Anda ingin mendapatkan akses penuh ke layar, bahkan area yang tidak terlihat, untuk merender warna atau gambar Anda, sertakan viewport-fit=cover dalam konten tag <meta name="viewport"> Anda. Kemudian, gunakan variabel lingkungan safe-area-inset-* untuk memperluas konten Anda dengan aman ke area tersebut.