Bilgisayar dünyasında, masaüstü metaforu Kullanıcıların bilgisayarla daha kolay etkileşime girmesine yardımcı olmak için grafik kullanıcı arabirimleri (GUI) tarafından kullanılan bir dizi birleştirici kavram olan bir arabirim metaforudur. Masaüstü benzetmesine uygun olarak, GUI sekmeleri kitaplara, kağıt dosyalara veya kart dizinlerine eklenen geleneksel kart sekmelerinden sonra modellenmiştir. A sekmeli belge arabirimi (TDI) veya sekme, birden çok belgenin veya panelin tek bir pencerede yer almasına izin veren, sekmeleri belge grupları arasında geçiş yapmak için gezinme widget’ı olarak kullanan bir grafik kontrol öğesidir.
Aşamalı Web Uygulamaları, tarafından belirlenen çeşitli görüntüleme modlarında çalışabilir. display web uygulaması bildirimindeki özellik. Örnekler fullscreen, standalone, minimal-uiVe browser. Bu ekran modları bir iyi tanımlanmış geri dönüş zinciri ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Bir tarayıcı belirli bir modu desteklemiyorsa, zincirdeki bir sonraki görüntüleme moduna geri döner. üzerinden "display_override" özelliği, geliştiriciler gerekirse kendi yedek zincirlerini belirtebilir.
sekmeli uygulama modu nedir #
Şimdiye kadar platformda eksik olan bir şey, PWA geliştiricilerinin kullanıcılarına, örneğin aynı PWA penceresinde farklı dosyaları düzenlemeyi etkinleştirmek için sekmeli bir belge arabirimi sunmasına izin vermenin bir yoludur. Sekmeli uygulama modu bu açığı kapatır.
Sekmeli uygulama modu için önerilen kullanım örnekleri #
Sekmeli uygulama modunu kullanabilen site örnekleri şunları içerir:
- Kullanıcının aynı anda birden fazla belgeyi (veya dosyayı) düzenlemesine izin veren üretkenlik uygulamaları.
- Kullanıcının sekme başına farklı odalarda konuşma yapmasına izin veren iletişim uygulamaları.
- Yeni uygulama içi sekmelerde makale bağlantılarını açan okuma uygulamaları.
Geliştirici tarafından oluşturulan sekmelerdeki farklılıklar #
Belgeleri ayrı tarayıcı sekmelerinde bulundurmak ücretsiz olarak kaynak izolasyonu ile birlikte gelir; bu, günümüzde web kullanılarak mümkün değildir. Geliştirici tarafından oluşturulan sekmeler, tarayıcı sekmelerinde olduğu gibi yüzlerce sekmeye ölçeklenemez. Gezinme geçmişi, “Bu sayfa URL’sini kopyala”, “Bu sekmeyi yayınla” veya “Bu sayfayı bir web tarayıcısında aç” gibi tarayıcı olanakları, geliştirici tarafından oluşturulmuş sekmeli arayüz sayfasına uygulanır, ancak seçili olan belge sayfasına uygulanmaz.
farklılıklar "display": "browser" #
Mevcut "display": "browser" zaten bir özel anlam:
Kullanıcı aracısında (örneğin, bir tarayıcı sekmesinde veya yeni bir pencerede) köprüleri açmak için platforma özgü kuralı kullanarak web uygulamasını açar.
Tarayıcılar, kullanıcı arayüzü ile ilgili istediklerini yapabilirken, geliştirici beklentilerinin oldukça büyük bir yıkımı olacağı açıktır. "display": "browser" aniden “tarayıcı özelliği olmayan, ancak sekmeli bir belge arabirimi olan uygulamaya özel ayrı bir pencerede çalıştırın” anlamına geliyordu.
Ayar "display": "browser" etkili bir şekilde vazgeçmek bir uygulama penceresine konulacak.
Şu anki durum #
Sekmeli uygulama modunu kullanma #
Sekmeli uygulama modunu kullanmak için, geliştiricilerin uygulamalarını belirli bir ayarlayarak etkinleştirmeleri gerekir. "display_override" web uygulaması bildirimindeki mod değeri.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Daha sonra, mülk "tab_strip" sekme davranışında ince ayar yapmak için isteğe bağlı olarak kullanılabilir. İzin verilen iki alt özelliği vardır, "home_tab" Ve "new_tab_button". Eğer "tab_strip" özellik mevcut değil, belirli özellikler’ "auto" değerler kullanılır. Tarayıcı hangi değerlerin kullanılacağını belirler. "auto".
Giriş sekmesi #
Giriş sekmesi, bir uygulama için etkinleştirildiyse, uygulama açıkken her zaman mevcut olması gereken sabitlenmiş bir sekmedir. Bu sekme asla gezinmemelidir. Bu sekmeden tıklanan bağlantılar yeni bir uygulama sekmesinde açılmalıdır. Uygulamalar, bu sekmenin kilitlendiği URL’yi ve sekmede görüntülenen simgeyi özelleştirmeyi seçebilir.
için izin verilen değerler "home_tab" bunlar:
"auto"tarayıcının ne yapacağını belirlemesine izin vermek için."absent"tarayıcıya bir giriş sekmesi göstermemesini söylemek için.- İki alt özelliği olan bir nesne:
"url"izin verilen değerlerle"auto"veya giriş sekmesini kilitlemek için bir URL."icons"izin verilen değerlerle"auto"veya ana menüdeki gibi bir simgeler dizisi"icons"mülk.
Yeni sekme düğmesi #
Yeni sekme düğmesi varsa, uygulamanın kapsamındaki bir URL’de yeni bir sekme açmalıdır. Uygulama, bu düğme için özel bir URL ve simge ayarlamayı seçebilir. Tarayıcılar, yeni pencereler oluşturmak veya tarayıcı sekmeleriyle birleştirmek için bu sekmeleri nasıl sürükleyeceklerine karar verebilirler.
için izin verilen değerler "new_tab_button" bunlar:
"auto"tarayıcının ne yapacağını belirlemesine izin vermek için."absent"tarayıcıya yeni bir sekme düğmesi göstermemesini söylemek için.- İki alt özelliği olan bir nesne:
"url"izin verilen değerlerle"auto"veya yeni sekmeler açmak için kapsam içi bir URL."icons"izin verilen değerlerle"auto"veya ana menüdeki gibi bir simgeler dizisi"icons"mülk.
Tam örnek #
Sekmeli arayüze sahip bir uygulamanın davranışını yapılandırmak için eksiksiz bir örnek aşağıdaki gibi görünebilir:
{
"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"
}
]
}
}
}
Demo #
Bir tarayıcı bayrağı ayarlayarak sekmeli uygulama modunu deneyebilirsiniz:
- Yı kur
#enable-desktop-pwas-tab-stripbayrak. - uygulamayı yükle sekmeli uygulama modu.glitch.me (kaynak kodu).
- Farklı sekmelerdeki farklı bağlantıları tıklayın.
Geri bildirim #
Chrome ekibi, sekmeli uygulama moduyla ilgili deneyimlerinizi öğrenmek istiyor.
Bize API tasarımından bahsedin #
Sekmeli uygulama modunda beklediğiniz gibi çalışmayan bir şey mi var? hakkında yorum yap web uygulaması manifest sorunu yarattığımız
Uygulamayla ilgili bir sorun bildirin #
Chrome’un uygulamasında bir hata mı buldunuz? Şu adrese bir hata bildirin: yeni.crbug.com. Mümkün olduğu kadar çok ayrıntıyı, çoğaltma için basit talimatları eklediğinizden emin olun ve UI>Browser>WebAppInstalls içinde Bileşenler kutu. Kusur hızlı ve kolay çoğaltma vakalarını paylaşmak için harika çalışıyor.
API desteğini göster #
Sekmeli uygulama modunu kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bunları desteklemenin ne kadar önemli olduğunu gösterir.
Şuraya bir tweet gönder: @ChromiumDev etiketi kullanmak #TabbedApplicationMode ve onu nerede ve nasıl kullandığınızı bize bildirin.
Kullanışlı bağlantılar #
teşekkürler #
Sekmeli uygulama modu tarafından keşfedildi Matt Giuca. Chrome’daki deneysel uygulama, alan kesici. Bu makale tarafından incelendi Joe Karışık. Kahraman görseli Niermann’a kadar Açık Wikimedia Commons.