Desain aplikasi

Bab ini berfokus pada beberapa aspek penting dalam merender konten di luar tab browser.

Jendela

Sistem operasi yang berbeda memiliki gagasan yang berbeda tentang jendela aplikasi. Misalnya, di iPhone, aplikasi selalu menggunakan 100% layar. Di Android dan iPad, aplikasi biasanya berjalan dalam layar penuh, tetapi Anda dapat berbagi layar antara dua aplikasi. Namun, hanya ada satu instance aplikasi yang terbuka dalam satu waktu. Sebaliknya, di perangkat desktop, aplikasi dapat memiliki lebih dari satu instance yang terbuka sekaligus. Aplikasi ini berbagi 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 berdasarkan 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 Mulai atau Menu Aplikasi (Windows, ChromeOS, Linux).
• Panel Dock, TaskBar, atau Multi-tugas (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 shape mask yang berbeda pada ikon tersebut, seperti yang ada pada gambar di bawah.

Membuat tema aplikasi

Ada sejumlah cara untuk menyesuaikan gaya visual aplikasi di PWA Anda, termasuk:

• Warna tema: menentukan warna panel judul jendela di desktop dan warna status bar di perangkat seluler. Dengan menggunakan tag meta, Anda dapat memiliki opsi untuk berbagai skema, 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.

PWA desktop yang menampilkan warna tema dan aksen, serta layar pembuka PWA Android yang menampilkan warna tema dan latar belakang.

Catatan: Saat merencanakan antarmuka pengguna Progressive Web App, perhatikan bahwa Anda tidak dapat menggunakan gambar, atau gradien untuk tema, hanya warna biasa. Sebaiknya pilih warna tanpa transparansi, dan gunakan warna rgb atau hsl, kode heksadesimal, atau warna yang diberi nama. Tema aplikasi Anda juga dapat memengaruhi tema browser meskipun tanpa menginstal aplikasi, seperti saat menggunakan elemen <meta name="theme-color">.

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

Anda juga dapat menggunakan area panel judul di samping kontrol jendela untuk membuat PWA Anda terasa lebih seperti aplikasi dengan mode tampilan lanjutan yang disebut Overlay Kontrol Jendela. Lihat Menyesuaikan overlay kontrol jendela di panel judul PWA Anda.

Catatan: Jika mode tampilan tertentu tidak didukung atau tidak dapat digunakan untuk menampilkan PWA Anda, mode tersebut akan kembali ke mode tampilan berikutnya yang tersedia. Layar penuh akan kembali ke mandiri, mandiri akan kembali ke antarmuka pengguna minimal, dan antarmuka pengguna minimal akan kembali ke browser, yang merupakan default. Anda dapat menggunakan kolom display_override untuk menentukan rantai penggantian mode tampilan Anda sendiri yang akan diterapkan sebelum mengevaluasi anggota display. Mode tampilan browser tidak muncul sebagai jendelanya sendiri, tetapi menampilkan PWA Anda di tab di browser tempat PWA diinstal, seperti bookmark web di layar utama.

Pengalaman layar penuh

Pengalaman layar penuh cocok untuk pengalaman imersif, seperti 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 yang paling umum untuk Progressive Web App, mode mandiri menampilkan PWA Anda di jendela standar OS tanpa UI navigasi browser. Jendela juga dapat menyertakan 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 panel URL saat PWA dirender di tab.

Gambar di atas menunjukkan bagaimana PWA ditampilkan dalam mode mandiri di desktop di Microsoft Edge, dan Chrome.

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. Aplikasi ini sering kali tidak memiliki 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 Android dan sistem operasi desktop. Saat Anda menggunakannya, browser yang merender PWA akan menampilkan antarmuka pengguna minimal untuk membantu pengguna menavigasi dalam aplikasi.

Di Android, Anda akan mendapatkan panel judul yang merender elemen <title> saat ini dan asal dengan menu drop-down kecil yang tersedia. Di desktop, Anda akan mendapatkan serangkaian 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.

Peringatan: Safari di iOS dan iPadOS tidak mendukung mode UI Minimal untuk PWA. Sebagai gantinya, pintasan browser digunakan sebagai penggantian. Pengguna dapat menambahkan ikon ke layar utama, tetapi ikon tersebut akan mengarah ke Safari sebagai bookmark, dan mereka tidak akan memiliki pengalaman aplikasi di luar tab browser.

Mengoptimalkan desain untuk desktop

Saat mendesain Progressive Web App agar berfungsi di desktop, Anda perlu memikirkan kemungkinan ukuran jendela yang tak terbatas dibandingkan dengan berada di tab browser atau sebagai aplikasi di sistem operasi seluler.

Di Bab 3, kita telah menyebutkan mode mini: aplikasi desktop dapat berukuran sekecil 200x100 piksel. Jendela ini akan menggunakan konten elemen <title> di HTML Anda sebagai judul jendela. Konten tersebut juga dirender saat Anda melakukan alt-tab antara aplikasi dan di tempat lain.

Perhatikan elemen <title> HTML Anda dan pikirkan kembali cara Anda menggunakannya. <title> tidak hanya untuk SEO atau untuk merender karakter pertama di tab browser; <title> akan menjadi bagian dari pengalaman pengguna jendela desktop mandiri Anda.

Catatan: Jika Anda mengembangkan aplikasi menggunakan library sisi klien, seperti React atau Vue, jangan lupa untuk mengubah <title> menjadi nilai praktis tertentu saat berpindah di antara bagian atau rute aplikasi. Saatnya menata ulang <title>.

Praktik terbaik CSS

Semua pengalaman Anda dengan tata letak, desain, dan animasi CSS valid saat konten dirender dalam pengalaman mandirinya. Namun, ada beberapa tips dan trik untuk membuat pengalaman lebih baik untuk jendela mandiri.

Ingatlah bahwa CSS hanya menentukan gaya untuk konten PWA; nanti dalam kursus ini, kita akan melihat cara menentukan deklarasi gaya untuk jendela di sekitar konten Anda, seperti properti dalam manifes aplikasi web.

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 bagian informasi tertentu hanya saat pengguna menggunakan aplikasi Anda dari ikon sistem. Hal ini dapat mencakup penambahan tombol kembali untuk digunakan saat aplikasi 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) {
}

Catatan: Pengguna mengharapkan aplikasi terintegrasi dengan platform, jadi sebaiknya tawarkan mode gelap dan terang menggunakan prefers-colors-scheme dan penuhi kueri media prefers-reduced-motion untuk menonaktifkan atau mengurangi transisi dan animasi.

Pengalaman aplikasi

Saat menggunakan PWA terinstal, pengguna 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 berguna untuk konten, mode ini tidak memberikan pengalaman terbaik untuk item navigasi, menu, dan tombol dalam PWA Anda.

Oleh karena itu, sebaiknya nonaktifkan pemilihan pengguna pada elemen ini menggunakan user-select: none dan versi awalan -webkit-:

.unselectable {
   user-select: none;
}

Pemilihan pengguna adalah fitur penting dari setiap aplikasi web untuk kegunaan dan aksesibilitas. Jangan nonaktifkan pemilihan pengguna di semua konten, hanya pada elemen UI jika tidak melakukannya akan menghasilkan pengalaman yang buruk atau tidak terduga.

Warna aksen

Di PWA, Anda dapat menentukan warna agar cocok dengan 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 menyegarkan halaman saat dibuka. 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, layarnya mungkin berbentuk berbeda, seperti lingkaran, atau memiliki bagian layar yang tidak dapat digunakan, seperti notch iPhone 13. Dalam kasus ini, beberapa browser akan mengekspos variabel lingkungan dengan area aman yang dapat menampilkan konten.

Jika Anda menginginkan 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.

Perhatian: Saat menerapkan viewport-fit=cover, ingatlah bahwa Anda kini dapat merender piksel di belakang sudut membulat dan notch, sehingga Anda harus selalu menggunakan margin atau padding yang aman untuk konten penting dan elemen interaktif.

Resource

• Kueri media mode tampilan CSS
• Mengontrol scroll: menyesuaikan efek pull-to-refresh dan overflow
• preferensis-color-schema: Halo kegelapan, teman lamaku
• prefers-reduced-motion: Terkadang lebih sedikit gerakan lebih baik
• Fungsi CSS env()
• Warna Accent CSS
• Overlay Kontrol Jendela