Bab ini berfokus pada beberapa aspek penting dari proses rendering konten di luar tab browser.
Jendela
Sistem operasi yang berbeda memiliki gambaran yang berbeda tentang jendela aplikasi. Misalnya, di iPhone, sebuah aplikasi selalu memenuhi 100% layar. Di Android dan iPad biasanya aplikasi dijalankan secara layar penuh, tetapi ada kemungkinan untuk berbagi layar antara dua aplikasi, tetapi hanya ada satu instance aplikasi yang terbuka pada satu waktu. Sebaliknya, pada perangkat desktop, sebuah aplikasi dapat membuka lebih dari satu instance pada satu waktu. DNS membagikan real estate 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 mana pun Anda melihat aplikasi yang sedang berjalan.
Ini mencakup:
- Layar utama (iOS, iPadOS, Android).
- Peluncur Aplikasi (macOS, Android).
- Menu Start atau Menu Aplikasi (Windows, ChromeOS, Linux).
- Dok, TaskBar, atau Panel multi-tugas (semua sistem operasi).
Saat membuat ikon untuk Progressive Web App pastikan ikonnya tidak bergantung pada platform, karena setiap sistem operasi bisa merender ikon dan menerapkan bentuk mask yang berbeda, seperti pada gambar di bawah ini.
Pemberian tema aplikasi
Ada sejumlah cara untuk menyesuaikan gaya visual aplikasi di PWA Anda, termasuk:
- Warna tema: menentukan warna baris judul jendela di 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 skema 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 Anda inginkan 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 hanya tersedia di perangkat Android, dan menyembunyikan status bar dan menu navigasi, memberi PWA 100% layar untuk konten Anda.
Di desktop dan iPadOS, PWA layar penuh tidak didukung; Namun, Anda dapat menggunakan Fullscreen API dari dalam PWA untuk menampilkan layar penuh aplikasi 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 akan menampilkan menu yang dikontrol browser tempat pengguna dapat:
- Salin URL saat ini.
- Melihat, menerapkan, atau menonaktifkan ekstensi browser.
- Melihat dan mengubah 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 dirender di tab.
Di perangkat seluler, pengalaman PWA mandiri akan membuat layar standar yang membuat status bar tetap terlihat, sehingga pengguna tetap dapat melihat notifikasi, waktu, dan level baterai. Sering kali tidak ada menu yang dikontrol browser seperti yang mungkin disertakan dalam 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 menavigasi dalam aplikasi.
Di Android, Anda akan mendapatkan kolom judul yang merender elemen <title> saat ini dan origin dengan menu drop-down kecil yang tersedia. Di desktop, Anda akan mendapatkan serangkaian tombol di kolom judul untuk membantu navigasi, termasuk tombol kembali dan kontrol yang ditukar antara tindakan berhenti dan muat ulang, berdasarkan status pemuatan saat ini.
Mengoptimalkan desain untuk desktop
Ketika Anda mendesain Progressive Web App untuk bekerja di {i>desktop<i}, Anda harus memikirkan kemungkinan yang tak terbatas untuk ukuran jendela dibandingkan dengan berada di tab browser atau sebagai aplikasi di sistem operasi seluler.
Dalam Bab 3, kami menyebutkan mode mini: aplikasi desktop dapat memiliki ukuran 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 alternatif tab antara aplikasi dan di tempat lain.
Perhatikan elemen <title> HTML Anda dan pikirkan kembali cara Anda menggunakannya. <title> tidak hanya digunakan untuk SEO atau untuk merender karakter pertama di tab browser saja; itu akan menjadi bagian dari pengalaman pengguna
pada jendela {i>desktop<i} mandiri Anda.
Praktik terbaik CSS
Semua pengalaman Anda dengan tata letak, desain, dan animasi CSS akan valid jika konten dirender dalam pengalaman mandirinya. Namun, ada beberapa tips dan trik untuk menjadikan pengalaman lebih baik untuk 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 menggunakan PWA terinstal, pengguna mengharapkan perilaku aplikasi. Meskipun tidak mudah untuk menentukan maksudnya, 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 bermanfaat 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-:
.unselectable {
user-select: none;
}
Warna aksen
Di PWA, Anda dapat menentukan warna untuk mencocokkan merek Anda dalam kontrol formulir HTML menggunakan properti accent-color.
Font sistem
Jika Anda ingin elemen, seperti dialog atau pesan, agar 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 memperbarui halaman saat halaman ditarik. Di beberapa browser, seperti Chrome di Android, perilaku tersebut juga diaktifkan di PWA mandiri.
Sebaiknya nonaktifkan tindakan ini. Misalnya saat menyediakan pengelolaan gestur Anda sendiri atau tindakan refresh, atau jika ada kemungkinan pengguna akan memicu tindakan secara tidak sengaja.
Perilaku ini dapat dinonaktifkan menggunakan overscroll-behavior-y: contain:.
body {
overscroll-behavior-y: contain;
}
Area aman
Beberapa perangkat tidak memiliki layar persegi panjang yang tidak terhalang; sebagai gantinya, layar mereka mungkin memiliki bentuk yang berbeda, seperti lingkaran, atau memiliki bagian layar yang tidak dapat digunakan, seperti takik iPhone 13. Dalam kasus ini, beberapa browser akan mengekspos variabel lingkungan dengan area aman yang dapat menampilkan konten.
Jika Anda ingin akses penuh ke layar, bahkan area yang tidak terlihat, untuk merender warna atau gambar, sertakan viewport-fit=cover dalam konten tag <meta name="viewport">. Kemudian, gunakan variabel lingkungan safe-area-inset-* untuk memperluas konten Anda dengan aman ke area tersebut.