Mempersiapkan mode tampilan besok

PWA dapat menggunakan properti "display_override" untuk menangani mode tampilan khusus.

Thomas Steiner

Manifes aplikasi web adalah file JSON yang memberi tahu browser tentang Progressive Web App Anda dan cara aplikasi tersebut harus berperilaku saat diinstal di desktop atau perangkat seluler pengguna. Melalui properti display, Anda dapat menyesuaikan UI browser yang ditampilkan saat aplikasi diluncurkan. Misalnya, Anda dapat menyembunyikan kolom URL dan chrome browser. Game bahkan dapat dibuat untuk diluncurkan dalam layar penuh. Sebagai ringkasan singkat, berikut adalah mode tampilan yang ditentukan pada saat artikel ini ditulis.

Properti Penggunaan
fullscreen Membuka aplikasi web tanpa UI browser apa pun dan menggunakan seluruh area tampilan yang tersedia.
standalone Membuka aplikasi web agar terlihat dan terasa seperti aplikasi mandiri. Aplikasi berjalan di jendelanya sendiri, terpisah dari browser, dan menyembunyikan elemen UI browser standar seperti kolom URL.
minimal-ui Mode ini mirip dengan standalone, tetapi menyediakan sekumpulan elemen UI minimal bagi pengguna untuk mengontrol navigasi (seperti kembali dan muat ulang).
browser Pengalaman browser standar.

Mode tampilan ini mengikuti rantai penggantian yang ditentukan dengan baik ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Jika browser tidak mendukung mode tertentu, browser akan melakukan penggantian ke mode tampilan berikutnya dalam rantai.

Kekurangan properti display

Masalah dengan pendekatan rantai penggantian yang di-hard-wire ini ada tiga:

  • Developer tidak dapat meminta "minimal-ui" tanpa dipaksa kembali ke mode tampilan "browser" jika "minimal-ui" tidak didukung oleh browser tertentu.
  • Developer tidak dapat menangani perbedaan lintas browser, seperti jika browser menyertakan atau mengecualikan tombol kembali di jendela untuk mode "standalone".
  • Perilaku saat ini membuat pengenalan mode tampilan baru secara kompatibel dengan versi sebelumnya menjadi tidak mungkin, karena eksplorasi seperti mode aplikasi bertab tidak memiliki tempat alami dalam rantai penggantian.

Properti display_override

Masalah ini diselesaikan oleh properti display_override, yang dianggap sebelum properti display oleh browser. Nilainya adalah urutan string yang dianggap berurutan, dan mode tampilan pertama yang didukung akan diterapkan. Jika tidak ada yang didukung, browser akan melakukan fallback untuk mengevaluasi kolom display.

Dalam contoh di bawah, rantai penggantian mode tampilan adalah sebagai berikut. (Detail "window-controls-overlay" berada di luar cakupan artikel ini.)

  1. "window-controls-overlay" (Pertama, lihat display_override.)
  2. "minimal-ui"
  3. "standalone" (Jika display_override habis, evaluasi display.)
  4. "minimal-ui" (Terakhir, gunakan rantai penggantian display.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Agar tetap kompatibel dengan versi sebelumnya, mode tampilan mendatang hanya akan dapat diterima sebagai nilai display_override, tetapi bukan display. Browser yang tidak mendukung display_override akan kembali ke properti display dan mengabaikan display_override sebagai properti manifes aplikasi web yang tidak diketahui.

Ucapan terima kasih

Properti display_override diformalkan oleh Daniel Murphy.