Menangani lebih dari satu dokumen sekaligus dengan tab di Progressive Web App
Dalam dunia komputasi, metafora desktop adalah metafora antarmuka yang merupakan kumpulan konsep pemersatu yang digunakan oleh antarmuka pengguna grafis (GUI) untuk membantu pengguna berinteraksi dengan komputer dengan lebih mudah. Sesuai dengan metafora desktop, tab GUI dibuat berdasarkan tab kartu tradisional yang disisipkan dalam buku, file kertas, atau indeks kartu. Antarmuka dokumen bertab (TDI) atau tab adalah elemen kontrol grafis yang memungkinkan beberapa dokumen atau panel ditempatkan dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih antara kumpulan dokumen.
Progressive Web App dapat berjalan dalam berbagai mode tampilan yang ditentukan oleh
properti display dalam manifes aplikasi web. Contohnya adalah fullscreen, standalone, minimal-ui,
dan browser. Mode tampilan ini mengikuti
rantai penggantian yang ditentukan dengan baik
("fullscreen" → "standalone" → "minimal-ui" → "browser"). Jika browser tidak mendukung
mode tertentu, browser akan kembali ke mode tampilan berikutnya dalam rantai. Melalui
properti "display_override", developer dapat menentukan rantai penggantian mereka sendiri
jika perlu.
Apa yang dimaksud dengan mode aplikasi dengan tab
Yang belum ada di platform ini sejauh ini adalah cara agar developer PWA dapat menawarkan antarmuka dokumen dengan tab kepada pengguna, misalnya, untuk mengedit file yang berbeda di jendela PWA yang sama. Mode aplikasi dengan tab menutup kesenjangan ini.
Kasus penggunaan yang disarankan untuk mode aplikasi dengan tab
Contoh situs yang dapat menggunakan mode aplikasi dengan tab meliputi:
- Aplikasi produktivitas yang memungkinkan pengguna mengedit lebih dari satu dokumen (atau file) secara bersamaan.
- Aplikasi komunikasi yang memungkinkan pengguna melakukan percakapan di ruang yang berbeda per tab.
- Aplikasi membaca yang membuka link artikel di tab baru dalam aplikasi.
Perbedaan dengan tab yang dibuat developer
Memiliki dokumen di tab browser terpisah dilengkapi dengan isolasi resource secara gratis, yang tidak mungkin dilakukan menggunakan web saat ini. Tab yang dibuat developer tidak akan diskalakan secara wajar ke ratusan tab seperti tab browser. Fasilitas browser seperti histori navigasi, "Salin URL halaman ini", "Transmisikan tab ini", atau "Buka halaman ini di browser web" akan diterapkan ke halaman antarmuka tab yang dibuat developer, tetapi tidak ke halaman dokumen yang saat ini dipilih.
Perbedaan dengan "display": "browser"
"display": "browser" saat ini sudah memiliki
makna tertentu:
Membuka aplikasi web menggunakan konvensi khusus platform untuk membuka hyperlink di agen pengguna (misalnya, di tab browser atau jendela baru).
Meskipun browser dapat melakukan apa pun yang mereka inginkan terkait UI, hal ini jelas merupakan subversi
yang cukup besar terhadap ekspektasi developer jika "display": "browser" tiba-tiba berarti "berjalan di jendela khusus
aplikasi terpisah tanpa kemampuan browser, tetapi antarmuka dokumen dengan tab".
Menetapkan "display": "browser" secara efektif adalah cara Anda memilih tidak ikut dimasukkan ke jendela
aplikasi.
Status saat ini
| Langkah | Status |
|---|---|
| 1. Membuat penjelasan | Selesai |
| 2. Membuat draf awal spesifikasi | Belum dimulai |
| 3. Mengumpulkan masukan & melakukan iterasi pada desain | Sedang berlangsung |
| 4. Uji coba origin | Sedang berlangsung |
| 5. Luncurkan | Belum dimulai |
Menggunakan mode aplikasi dengan tab
Untuk menggunakan mode aplikasi dengan tab, developer harus mengaktifkan aplikasi mereka dengan menetapkan nilai mode
"display_override" tertentu dalam manifes aplikasi web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Selanjutnya, properti "tab_strip" dapat digunakan secara opsional untuk menyesuaikan perilaku tab. Properti ini memiliki dua
sub-properti yang diizinkan, "home_tab" dan "new_tab_button". Jika properti "tab_strip" tidak
ada, nilai "auto" properti tertentu akan digunakan. Browser menentukan nilai yang akan
digunakan untuk "auto".
Tab Beranda
Tab beranda adalah tab yang disematkan yang, jika diaktifkan untuk aplikasi, harus selalu ada saat aplikasi terbuka. Tab ini tidak boleh menavigasi. Link yang diklik dari tab ini akan terbuka di tab aplikasi baru. Aplikasi dapat memilih untuk menyesuaikan URL yang dikunci tab ini dan ikon yang ditampilkan di tab.
Nilai yang diizinkan untuk "home_tab" adalah:
"auto"untuk memungkinkan browser menentukan tindakan yang akan dilakukan."absent"untuk memberi tahu browser agar tidak menampilkan tab beranda.- Objek dengan dua sub-properti:
"url"dengan nilai"auto"yang diizinkan atau URL untuk mengunci tab beranda."icons"dengan nilai"auto"yang diizinkan atau array ikon seperti dalam properti"icons"utama.
Tombol tab baru
Tombol tab baru, jika ada, akan membuka tab baru di URL yang berada dalam cakupan aplikasi. Aplikasi dapat memilih untuk menetapkan URL dan ikon kustom untuk tombol ini. Browser dapat memutuskan cara menangani penarikan tab ini untuk membuat jendela baru atau menggabungkan dengan tab browser.
Nilai yang diizinkan untuk "new_tab_button" adalah:
"auto"untuk memungkinkan browser menentukan tindakan yang akan dilakukan."absent"untuk memberi tahu browser agar tidak menampilkan tombol tab baru.- Objek dengan dua sub-properti:
"url"dengan nilai"auto"yang diizinkan atau URL dalam cakupan untuk membuka tab baru."icons"dengan nilai"auto"yang diizinkan atau array ikon seperti dalam properti"icons"utama.
Contoh lengkap
Contoh lengkap untuk mengonfigurasi perilaku aplikasi dengan antarmuka tab mungkin terlihat seperti berikut:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
Mendeteksi mode aplikasi dengan tab
Aplikasi dapat mendeteksi apakah aplikasi berjalan dalam mode aplikasi tab dengan memeriksa
fitur media CSS display-mode
di CSS atau JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Interaksi dengan Launch Handler API
Launch Handler API memungkinkan situs mengalihkan peluncuran
aplikasi ke jendela aplikasi yang ada untuk mencegah jendela duplikat dibuka. Saat
aplikasi dengan tab menetapkan "client_mode": "navigate-new", peluncuran aplikasi akan membuka tab baru di
jendela aplikasi yang ada.
Demo
Anda dapat mencoba mode aplikasi dengan tab dengan menetapkan flag browser:
- Tetapkan flag
#enable-desktop-pwas-tab-strip. - Instal aplikasi tabbed-application-mode.glitch.me (kode sumber).
- Klik link yang berbeda di tab yang berbeda.
Masukan
Tim Chrome ingin mengetahui pengalaman Anda dengan mode aplikasi tab.
Ceritakan kepada kami tentang desain API
Apakah ada sesuatu tentang mode aplikasi dengan tab yang tidak berfungsi seperti yang Anda harapkan? Berikan komentar pada Masalah manifes aplikasi web yang telah kami buat.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada penerapan Chrome? Ajukan bug di
new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana
untuk mereproduksi, dan masukkan UI>Browser>WebAppInstalls di kotak Components.
Glitch sangat cocok untuk membagikan kasus reproduksi yang cepat dan mudah.
Menampilkan dukungan untuk API
Apakah Anda berencana menggunakan mode aplikasi dengan tab? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.
Kirim tweet ke @ChromiumDev menggunakan hashtag
#TabbedApplicationMode
dan beri tahu kami tempat dan cara Anda menggunakannya.
Link penting
- Penjelas
- Masalah spesifikasi manifes aplikasi web
- Bug Chromium
- Komponen Blink:
UI>Browser>WebAppInstalls
Ucapan terima kasih
Mode aplikasi dengan tab dieksplorasi oleh Matt Giuca. Implementasi eksperimental di Chrome adalah karya Alan Cutter. Artikel ini ditinjau oleh Joe Medley. Gambar hero oleh Till Niermann di Wikimedia Commons.
