Bekerja di lebih dari satu dokumen sekaligus dengan tab di Progressive Web App Anda
Dalam dunia komputasi, metafora desktop adalah metafora antarmuka yang merupakan sekumpulan 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 berdasarkan 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 dimuat dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih di 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 beralih ke mode tampilan berikutnya dalam rantai. Dengan menggunakan properti
"display_override", developer dapat menentukan rantai penggantian mereka sendiri
jika diperlukan.
Apa yang dimaksud dengan mode aplikasi bertab
Salah satu hal yang belum ada di platform ini adalah cara agar developer PWA dapat menawarkan antarmuka dokumen dengan tab kepada pengguna mereka, misalnya, untuk mengaktifkan pengeditan berbagai file di jendela PWA yang sama. Mode aplikasi bertab menutup kesenjangan ini.
Kasus penggunaan untuk mode aplikasi bertab
Contoh situs yang dapat menggunakan mode aplikasi bertab mencakup:
- 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 baca yang membuka link artikel di tab dalam aplikasi baru.
Perbedaan dengan tab buatan developer
Membuka dokumen di tab browser terpisah dilengkapi dengan isolasi resource, yang tidak mungkin dilakukan menggunakan web saat ini. Tab buatan developer tidak akan diskalakan dengan baik ke ratusan tab seperti tab browser. Kemampuan browser seperti histori navigasi, "Salin URL halaman ini", "Transmisikan tab ini", atau "Buka halaman ini di browser web" akan diterapkan ke halaman antarmuka bertab buatan 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 diinginkannya terkait UI, jelas akan terjadi subversi yang cukup besar terhadap ekspektasi developer jika "display": "browser" tiba-tiba berarti "jalankan di jendela khusus aplikasi terpisah tanpa kemampuan browser, tetapi dengan antarmuka dokumen bertab".
Menetapkan "display": "browser" secara efektif adalah cara Anda memilih untuk tidak dimasukkan ke dalam jendela aplikasi.
Status saat ini
| Langkah | Status |
|---|---|
| 1. Membuat penjelasan | Selesai |
| 2. Buat draf awal spesifikasi | Selesai |
| 3. Mengumpulkan masukan & mengulangi desain | Selesai |
| 4. Uji coba origin | Selesai |
| 5. Luncurkan | Selesai (ChromeOS) |
Menggunakan mode aplikasi bertab
Untuk menggunakan mode aplikasi bertab, developer harus mengikutsertakan 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, yaitu "home_tab" dan "new_tab_button". Jika properti "tab_strip" tidak ada, properti tersebut 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 dibuka. Tab ini tidak boleh membuka halaman lain. Link yang diklik dari tab ini akan terbuka di tab aplikasi baru. Aplikasi dapat memilih untuk menyesuaikan URL yang dituju 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 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 afordans UI (seperti
tombol) yang, saat diklik/diaktifkan, akan membuka konteks aplikasi baru dalam
jendela aplikasi. Objek ini memiliki anggota berikut:
"url": Anggota"url"adalah string yang merepresentasikan URL relatif terhadap URL manifes yang berada dalam cakupan manifes yang diproses.
Aplikasi memiliki tombol tab baru jika anggota'new_tab_button' dari manifes yang diproses
"url" berada di luar cakupan tab beranda. Jika aplikasi tidak memiliki tombol tab baru, browser tidak menyediakan kemampuan "tab baru" kepada pengguna.
Contoh lengkap
Contoh lengkap untuk mengonfigurasi perilaku aplikasi dengan antarmuka ber-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 bertab
Aplikasi dapat mendeteksi apakah aplikasi berjalan dalam mode aplikasi bertab 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 pembukaan jendela duplikat. Saat aplikasi bertab menetapkan "client_mode": "navigate-new", peluncuran aplikasi akan membuka tab baru di jendela aplikasi yang ada.
Demo
Anda dapat mencoba aplikasi bertab di ChromeOS:
- Instal aplikasi Tabbed Application Mode (kode sumber).
- Klik berbagai link di berbagai tab.
Masukan
Tim Chrome ingin mengetahui pengalaman Anda dengan mode aplikasi bertab.
Beri tahu kami tentang desain API
Apakah ada sesuatu tentang mode aplikasi bertab yang tidak berfungsi seperti yang Anda harapkan? Beri komentar pada Masalah manifes aplikasi web yang telah kami 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 Komponen.
Menunjukkan dukungan untuk API
Apakah Anda berencana menggunakan mode aplikasi bertab? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan untuk fitur tersebut.
Kirim tweet ke @ChromiumDev menggunakan hashtag
#TabbedApplicationMode
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.
Link penting
- Penjelasan
- Masalah spesifikasi manifes aplikasi web
- Bug Chromium
- Komponen Blink:
UI>Browser>WebAppInstalls
Ucapan terima kasih
Mode aplikasi bertab dijelajahi oleh Matt Giuca. Implementasi eksperimental di Chrome adalah hasil karya Alan Cutter. Dokumen ini telah ditinjau oleh Joe Medley. Gambar utama oleh Till Niermann di Wikimedia Commons.
