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 secara lebih intuitif. Sesuai dengan metafora desktop, tab GUI dimodelkan setelah tab kartu klasik 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. Opsinya 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. Dengan menggunakan
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 untuk mode aplikasi dengan tab
Contoh situs yang dapat menggunakan mode aplikasi 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, 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 dipilih.
Perbedaan dengan "display": "browser"
"display": "browser" saat ini sudah memiliki
arti 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 | Selesai |
| 3. Mengumpulkan masukan & melakukan iterasi pada desain | Selesai |
| 4. Uji coba origin | Selesai |
| 5. Luncurkan | Selesai (ChromeOS) |
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 tidak ada, properti "tab_strip" akan ditetapkan secara default ke objek berikut:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
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.
Anggota "home_tab" dari objek "tab_strip" berisi informasi tentang "tab beranda" khusus
yang dimaksudkan untuk berfungsi sebagai menu tingkat teratas untuk aplikasi. Isinya adalah anggota berikut:
"scope_patterns": Anggota"scope_patterns"adalah daftar Pola URL yang menentukan cakupan tab beranda relatif terhadap URL manifes.
Tombol tab baru
Anggota "new_tab_button" dari objek "tab_strip" menjelaskan perilaku kemampuan UI (seperti
tombol) yang, saat diklik/diaktifkan, akan membuka konteks aplikasi baru dalam
jendela aplikasi. Class ini memiliki anggota berikut:
"url": Anggota"url"adalah string yang mewakili URL yang relatif terhadap URL manifes yang berada dalam cakupan manifes yang diproses.
Aplikasi memiliki tombol tab baru jika anggota "url"
new_tab_button manifes yang diproses berada di luar cakupan tab beranda. Jika aplikasi tidak memiliki
tombol tab baru, browser tidak akan menyediakan kemampuan "tab baru" kepada
pengguna.
Contoh lengkap
Contoh lengkap untuk mengonfigurasi perilaku aplikasi dengan antarmuka tab mungkin terlihat seperti berikut:
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
Mendeteksi mode aplikasi dengan tab
Aplikasi dapat mendeteksi apakah aplikasi berjalan dalam mode aplikasi tab dengan memeriksa
fitur media CSS display-mode
dalam 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 aplikasi dengan tab di ChromeOS:
- 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 kita buat.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada penerapan Chrome? Laporkan bug di
new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin,
petunjuk untuk mereproduksi, dan masukkan UI>Browser>WebAppInstalls di kotak Components.
Glitch sangat cocok untuk membagikan kasus reproduksi cepat.
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. Dokumen ini ditinjau oleh Joe Medley. Gambar hero oleh Till Niermann di Wikimedia Commons.
