Mengerjakan lebih dari satu dokumen sekaligus dengan tab di Progressive Web App
Dalam dunia komputasi, metafora desktop adalah metafora antarmuka yang merupakan kumpulan konsep gabungan yang digunakan oleh antarmuka pengguna grafis (GUI) untuk membantu pengguna berinteraksi lebih mudah dengan komputer. Sesuai dengan metafora desktop, tab GUI dimodelkan berdasarkan tab kartu tradisional yang dimasukkan dalam buku, file kertas, atau indeks kartu. Antarmuka dokumen dengan tab (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 di 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 tersebut. Melalui
properti "display_override", developer dapat menentukan rantai penggantian mereka sendiri
jika perlu.
Apa yang dimaksud dengan mode aplikasi tab
Sesuatu yang belum ada di platform sejauh ini adalah cara untuk memungkinkan developer PWA menawarkan antarmuka dokumen bertab kepada pengguna, misalnya, untuk memungkinkan pengeditan 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 mungkin menggunakan mode aplikasi tab antara lain:
- 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.
- Membaca aplikasi yang membuka link artikel di tab dalam aplikasi baru.
Perbedaan dengan tab buatan developer
Memiliki dokumen di tab browser terpisah dilengkapi dengan isolasi resource secara gratis, yang tidak dapat dilakukan menggunakan web saat ini. Tab yang dibuat developer tidak akan dapat diskalakan 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 tab yang dibuat oleh 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 akan menjadi subversi yang cukup besar dari ekspektasi developer jika "display": "browser" tiba-tiba berarti "berjalan di jendela khusus aplikasi terpisah tanpa kemampuan browser, tetapi antarmuka dokumen bertab".
Menyetel "display": "browser" secara efektif adalah cara Anda memilih untuk tidak dimasukkan ke jendela
aplikasi.
Status saat ini
| Langkah | Status |
|---|---|
| 1. Buat pesan penjelasan | Selesai |
| 2. Membuat draf awal spesifikasi | Not started |
| 3. Mengumpulkan masukan & mengulangi desain | Dalam proses |
| 4. Uji coba origin | Dalam proses |
| 5. Peluncuran | Not started |
Menggunakan mode aplikasi tab
Untuk menggunakan mode aplikasi dengan tab, 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" secara opsional dapat digunakan untuk menyesuaikan perilaku tab. Properti tersebut 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 tersemat yang, jika diaktifkan untuk aplikasi, akan selalu ada saat aplikasi terbuka. Tab ini tidak boleh dibuka. Link yang diklik dari tab ini akan terbuka di tab aplikasi baru. Aplikasi dapat memilih untuk menyesuaikan URL tempat tab ini dikunci 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 menentukan cara menangani penarikan tab ini untuk membuat jendela baru atau menggabungkannya 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 dapat terlihat sebagai 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 dengan 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 menyetel "client_mode": "navigate-new", peluncuran aplikasi akan membuka tab baru di
jendela aplikasi yang sudah ada.
Demo
Anda dapat mencoba mode aplikasi dengan tab dengan menyetel tanda browser:
- Tetapkan flag
#enable-desktop-pwas-tab-strip. - Instal aplikasi tabbed-application-mode.glitch.me (kode sumber).
- Klik tautan yang berbeda di tab yang berbeda.
Masukan
Tim Chrome ingin mengetahui pengalaman Anda terkait mode aplikasi tab.
Beri tahu kami tentang desain API
Apakah ada sesuatu tentang mode aplikasi 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 implementasi Chrome? Laporkan bug di
new.crbug.com. Pastikan Anda menyertakan detail sebanyak mungkin, petunjuk sederhana
untuk mereproduksi, dan masukkan UI>Browser>WebAppInstalls di kotak Components.
Glitch sangat cocok untuk berbagi kasus reproduksi yang cepat dan mudah.
Menunjukkan dukungan untuk API
Apakah Anda berencana menggunakan mode aplikasi 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 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 tab dijelajahi oleh Matt Giuca. Implementasi eksperimental di Chrome dilakukan oleh Alan Cutter. Artikel ini ditinjau oleh Joe Medley. Banner besar oleh Till Niermann di Wikimedia Commons.
