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, belge grupları arasında geçiş yapmak için gezinme widget'ı olarak sekmeler kullanılarak 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 şu ana kadar eksik olan bir özellik, PWA geliştiricilerin kullanıcılarına sekmeli bir doküman arayüzü sunmalarına olanak tanımaktır. Örneğin, aynı PWA penceresinde farklı dosyaların düzenlenmesini sağlamak için bu özellik kullanılabilir. 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 sekme başına 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
Dokümanları ayrı tarayıcı sekmelerinde bulundurmak, ücretsiz olarak kaynak yalıtımı sağlar. Bu, 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 arasındaki 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" ayarını yaparak uygulama penceresine girmeyi devre dışı bırakabilirsiniz.
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" mülkü kullanılabilir. İzin verilen iki alt mülkü ("home_tab" ve "new_tab_button") vardır. "tab_strip" mülkü mevcut değilse söz konusu mülkün "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ştirilirse uygulama açıkken her zaman mevcut olması gereken sabitlenmiş 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
Mevcutsa 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 sekme açmak için
"auto"değerine izin verilen"url"veya kapsam içi bir URL. "icons"("auto"izin verilen değerlerle) veya ana"icons"mülkünde olduğu gibi bir simge dizisi.
- Yeni sekme açmak için
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
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 uygulamasında bir hata mı buldunuz? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve sorunun yeniden oluşturulmasına yönelik basit talimatlar eklediğinizden emin olun. 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.
