Progresif Web Uygulamanızda sekmelerle aynı anda birden fazla dokümanda çalışma
Bilgisayar dünyasında masaüstü metaforu, kullanıcıların bilgisayarla daha kolay etkileşim kurmasına yardımcı olmak için grafik kullanıcı arayüzleri (GUI) tarafından kullanılan birleştirici bir kavramlar grubu olan bir arayüz metaforudur. Masaüstü metaforuna uygun olarak, GUI sekmeleri kitaplara, kağıt dosyalara veya kart dizinlerine eklenen geleneksel kart sekmelerine göre modellenmiştir. Sekmeli belge arayüzü (TDI) veya sekme, sekmeleri belge grupları arasında geçiş yapmak için gezinme widget'ı olarak kullanarak birden fazla belgenin veya panelin tek bir pencerede yer almasına olanak tanıyan bir grafik kontrol öğesidir.
Progresif web uygulamaları, web uygulaması manifest dosyasında display mülküne göre belirlenen çeşitli görüntüleme modlarında çalışabilir. Örnekler: fullscreen, standalone, minimal-ui ve browser. Bu görüntüleme modları, iyi tanımlanmış bir yedek zincirine ("fullscreen" → "standalone" → "minimal-ui" → "browser") uyar. Bir tarayıcı belirli bir modu desteklemiyorsa zincirdeki bir sonraki görüntüleme moduna geçer. Geliştiriciler, gerekirse "display_override" mülkü aracılığıyla kendi yedek zincirlerini belirtebilir.
Sekmeli uygulama modu nedir?
Platformda şimdiye kadar eksik olan noktalardan biri, PWA geliştiricilerinin kullanıcılarına sekmeli doküman arayüzü sunmasının bir yolu. Örneğin, aynı PWA penceresinde farklı dosyaları düzenlemeyi mümkün kılmak. Sekmeli uygulama modu bu açığı kapatır.
Sekmeli uygulama modu için önerilen kullanım alanları
Sekmeli uygulama modunu kullanabilecek sitelere örnek olarak şunlar verilebilir:
- Kullanıcının aynı anda birden fazla dokümanı (veya dosyayı) düzenlemesine olanak tanıyan üretkenlik uygulamaları.
- Kullanıcının her sekme için farklı odalarda görüşme yapmasına olanak tanıyan iletişim uygulamaları.
- Makale bağlantılarını yeni uygulama içi sekmelerde açan okuma uygulamaları.
Geliştirici tarafından oluşturulan sekmelerle arasındaki farklar
Ayrı tarayıcı sekmelerinde dokümanlar, ücretsiz olarak kaynak izolasyonu sağlar. Bu da günümüzde web'de mümkün değildir. Geliştirici tarafından oluşturulan sekmeler, tarayıcı sekmeleri gibi yüzlerce sekmeye uygun şekilde ölçeklendirilemez. Gezinme geçmişi, "Bu sayfanın URL'sini kopyala", "Bu sekmeyi yayınla" veya "Bu sayfayı bir web tarayıcısında aç" gibi tarayıcı özellikleri, geliştirici tarafından oluşturulan sekmeli arayüz sayfasına uygulanır ancak seçili belge sayfasına uygulanmaz.
"display": "browser" ile olan farklar
Mevcut "display": "browser"'ün belirli bir anlamı vardır:
Web uygulamasını, kullanıcı aracısında köprüleri açmayla ilgili platforma özgü kuralı kullanarak (ör. tarayıcı sekmesinde veya yeni bir pencerede) açar.
Tarayıcılar kullanıcı arayüzüyle ilgili istediklerini yapabilir ancak "display": "browser"'ün birden "tarayıcı özelliklerine sahip olmayan, sekmeli bir doküman arayüzüyle uygulamaya özel ayrı bir pencerede çalıştırın" anlamına gelmesi geliştiricilerin beklentilerini büyük ölçüde boşa çıkarırdı.
"display": "browser" uygulamasını ayarlamak, uygulama penceresine eklenmeyi devre dışı bırakmanın etkili bir yoludur.
Mevcut durum
| Step | Durum |
|---|---|
| 1. Açıklayıcı oluşturma | Tamamlandı |
| 2. Spesifikasyonun ilk taslağını oluşturma | Başlatılmadı |
| 3. Geri bildirim toplayın ve tasarımda iterasyon yapın | Devam ediyor |
| 4. Kaynak denemesi | Devam ediyor |
| 5. Başlat | Başlatılmadı |
Sekmeli uygulama modunu kullanma
Sekmeli uygulama modunu kullanmak isteyen geliştiricilerin, web uygulaması manifest dosyasında belirli bir "display_override" mod değeri ayarlayarak uygulamalarını etkinleştirmesi gerekir.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Ardından, sekme davranışında ince ayar yapmak için isteğe bağlı olarak "tab_strip" özelliği kullanılabilir. İzin verilen iki alt mülkü ("home_tab" ve "new_tab_button") vardır. "tab_strip" özelliği mevcut değilse belirli özelliklerin "auto" değerleri kullanılır. Tarayıcı, "auto" için hangi değerlerin kullanılacağını belirler.
Ana Sayfa sekmesi
Ana sayfa sekmesi, bir uygulama için etkinleştirilmişse, uygulama açıkken her zaman mevcut olması gereken sabit bir sekmedir. Bu sekme hiçbir zaman gezinmemelidir. Bu sekmeden tıklanan bağlantılar yeni bir uygulama sekmesinde açılır. Uygulamalar, bu sekmenin kilitlendiği URL'yi ve sekmede gösterilen simgeyi özelleştirebilir.
"home_tab" için izin verilen değerler şunlardır:
"auto"değerini ayarlayarak tarayıcının ne yapacağını belirlemesine izin verebilirsiniz."absent"ekleyerek tarayıcıya ana sayfa sekmesi göstermemesini söyleyebilirsiniz.- İki alt özelliğe sahip bir nesne:
"url","auto"değerlerine izin verilir veya ana sayfa sekmesinin kilitleneceği bir URL."icons"("auto"izin verilen değerlerle) veya ana"icons"mülkünde olduğu gibi bir simge dizisi.
Yeni sekme düğmesi
Varsa yeni sekme düğmesi, 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 ayarlayabilir. Tarayıcılar, bu sekmeleri sürükleyerek yeni pencereler oluşturma veya tarayıcı sekmeleriyle birleştirme işlemlerini nasıl işleyeceğine karar verebilir.
"new_tab_button" için izin verilen değerler şunlardır:
"auto"değerini ayarlayarak tarayıcının ne yapacağını belirlemesine izin verebilirsiniz."absent"simgesini tıklayarak tarayıcıya yeni sekme düğmesi göstermemesini söyleyin.- İki alt özelliğe sahip bir nesne:
- Yeni sekmeler açmak için izin verilen
"auto"değerleri veya kapsam içi URL ile"url". "icons"("auto"izin verilen değerlerle) veya ana"icons"mülkünde olduğu gibi bir simge dizisi.
- Yeni sekmeler açmak için izin verilen
Tam örnek
Sekmeli arayüze sahip bir uygulamanın davranışını yapılandırmaya yönelik 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"
}
]
}
}
}
Sekmeli uygulama modunu algılama
Uygulamalar, CSS veya JavaScript'de display-mode CSS medya özelliğini kontrol ederek sekmeli uygulama modunda çalışıp çalışmadıklarını algılayabilir:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Launch Handler API ile etkileşim
Launch Handler API, yinelenen pencerelerin açılmasını önlemek için sitelerin uygulama açılışlarını mevcut uygulama pencerelerine yönlendirmesine olanak tanır. Sekmeli bir uygulama "client_mode": "navigate-new" değerini ayarlarsa uygulama başlatıldığında mevcut bir uygulama penceresinde yeni bir sekme açılır.
Demo
Bir tarayıcı işareti ayarlayarak sekmeli uygulama modunu deneyebilirsiniz:
#enable-desktop-pwas-tab-stripişaretini ayarlayın.- tabbed-application-mode.glitch.me uygulamasını (kaynak kodu) yükleyin.
- Farklı sekmelerdeki farklı bağlantıları tıklayın.
Geri bildirim
Chrome Ekibi, sekmeli uygulama moduyla ilgili deneyimlerinizi öğrenmek istiyor.
API tasarımı hakkında bilgi verin
Sekmeli uygulama modunda beklediğiniz gibi çalışmayan bir şey var mı? Oluşturduğumuz web uygulaması manifesti sorunu hakkında yorum yapın.
Uygulamayla ilgili sorunları bildirme
Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve sorunu yeniden oluşturma talimatlarını ekleyin. Bileşenler kutusuna UI>Browser>WebAppInstalls yazın.
Glitch, hataları hızlı ve kolay bir şekilde paylaşmak için idealdir.
API'yi destekleme
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ı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.
#TabbedApplicationMode hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantı
- Açıklayıcı
- Web uygulaması manifesti spesifikasyonu sorunu
- Chromium hatası
- Blink Bileşeni:
UI>Browser>WebAppInstalls
Teşekkür ederiz
Sekmeli uygulama modu Matt Giuca tarafından keşfedildi. Chrome'daki deneysel uygulama Alan Cutter tarafından gerçekleştirildi. Bu makale Joe Medley tarafından incelenmiştir. Wikimedia Commons'ta Till Niermann tarafından oluşturulan lokomotif resim.
