Progresif Web Uygulamanızdaki sekmelerle aynı anda birden fazla doküman üzerinde çalışma
Bilgisayar dünyasında masaüstü metaforu, kullanıcıların bilgisayarla daha kolay etkileşimde bulunmasına yardımcı olmak için grafik kullanıcı arayüzleri (GUI) tarafından kullanılan birleştirici kavramlardan oluşan bir arayüz metaforudur. Masaüstü metaforu doğrultusunda, GUI sekmeleri kitaplara, kağıt dosyalarına veya kart dizinlerine eklenen geleneksel kart sekmelerine göre modellenir. Sekmeli belge arayüzü (TDI) veya sekme, birden fazla dokümanın veya panelin tek bir pencerede barındırılmasına olanak tanıyan grafiksel bir kontrol öğesidir. Sekmeler, belge grupları arasında geçiş yapmak için gezinme widget'ı olarak kullanılır.
Progresif Web Uygulamaları, web uygulaması manifest dosyasındaki display özelliği tarafından belirlenen çeşitli görüntü modlarında çalışabilir. Örnek olarak şunlar verilebilir: fullscreen, standalone, minimal-ui ve browser. Bu görüntüleme modları, iyi tanımlanmış bir yedek zincirini ("fullscreen" → "standalone" → "minimal-ui" → "browser") izler. Belirli bir tarayıcı, zincirde bir sonraki görüntüleme moduna geçer. Geliştiriciler, isterlerse "display_override" özelliği aracılığıyla kendi yedek zincirlerini belirtebilir.
Sekmeli uygulama modu nedir?
Şu ana kadar platformda eksik olan bir şey var: PWA geliştiricilerinin kullanıcılarına sekmeli bir doküman arayüzü sunmaları. Örneğin, aynı PWA penceresinde farklı dosyaların düzenlenmesini sağlayabilirler. Sekmeli uygulama modu bu açığı kapatır.
Sekmeli uygulama modu için önerilen kullanım alanları
Sekmeli uygulama modunu kullanabilecek sitelere örnekler:
- Kullanıcının aynı anda birden fazla dokümanı (veya dosyayı) düzenlemesine olanak tanıyan üretkenlik uygulamaları.
- Kullanıcının her sekmede 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 uygulamaları okuma.
Geliştirici tarafından oluşturulan sekmelerle olan farklar
Belgelerin ayrı tarayıcı sekmelerinde olması, kaynak izolasyonunu ücretsiz olarak sunar. Ancak günümüzde bu mümkün değildir. Geliştirici tarafından oluşturulan sekmeler, tarayıcı sekmeleri gibi yüzlerce sekmeye ölçeklenemez. Gezinme geçmişi, "Bu sayfanın URL'sini kopyala", "Bu sekmeyi yayınla" veya "Bu sayfayı web tarayıcısında aç" gibi tarayıcı özellikleri, geliştirici tarafından oluşturulan sekmeli arayüz sayfasına uygulanır, ancak halihazırda seçili olan doküman sayfasına uygulanmaz.
"display": "browser" ile arasındaki farklar
Geçerli "display": "browser" zaten belirli bir anlama sahip:
Köprülerin kullanıcı aracısında (ör. bir tarayıcı sekmesinde veya yeni bir pencerede) açılması için platforma özel kuralı kullanarak web uygulamasını açar.
Tarayıcılar kullanıcı arayüzü konusunda istedikleri her şeyi yapabilse de, "display": "browser" aniden "tarayıcının sunduğu olanaklar olmadan, sekmeli bir belge arayüzüyle ayrı bir uygulamaya özel pencerede çalıştır" anlamına geliyorsa bu, açıkça geliştirici beklentilerinin oldukça büyük bir yıkımına yol açar.
"display": "browser" ayarlamak, bir uygulama penceresine dahil edilmeyi devre dışı bırakmanın etkili bir yoludur.
Mevcut durum
| Adım | Durum |
|---|---|
| 1. Açıklayıcı oluşturun | Tamamlandı |
| 2. İlk spesifikasyon taslağını oluşturma | Başlatılmadı |
| 3. Geri bildirim alma ve tasarımı yineleme | Devam ediyor |
| 4. Kaynak denemesi | Devam ediyor |
| 5. Lansman | Başlatılmadı |
Sekmeli uygulama modunu kullanma
Sekmeli uygulama modunu kullanmak için geliştiricilerin web uygulaması manifest dosyasında belirli bir "display_override" modu değeri ayarlayarak uygulamalarında uygulamaları etkinleştirmeleri gerekir.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Daha sonra, sekme davranışında ince ayar yapmak için "tab_strip" özelliği isteğe bağlı olarak kullanılabilir. İzin verilen iki alt mülkü vardır: "home_tab" ve "new_tab_button". "tab_strip" özelliği mevcut değilse belirli mülklerin "auto" değerleri kullanılır. "auto" için hangi değerlerin kullanılacağını tarayıcı belirler.
Ana Sayfa sekmesi
Ana sayfa sekmesi, bir uygulama için etkinleştirilirse uygulama açıkken her zaman bulunması gereken sabit bir sekmedir. Bu sekme hiçbir zaman gitmemelidir. Bu sekmede tıklanan bağlantılar yeni bir uygulama sekmesinde açılır. Uygulamalar, bu sekmenin kilitlendiği URL'yi ve sekmede görüntülenen simgeyi özelleştirmeyi seçebilir.
"home_tab" için izin verilen değerler:
- Tarayıcının ne yapacağını belirlemesine izin vermek için
"auto". - Tarayıcıya ana sayfa sekmesi göstermemesini bildirmek için
"absent". - İki alt özelliği olan bir nesne:
- İzin verilen
"auto"değerlerine veya ana sayfa sekmesinin kilitleneceği bir URL ile"url". - İzin verilen
"auto"değerleriyle veya ana"icons"özelliğindeki simge dizisiyle"icons".
- İzin verilen
Yeni sekme düğmesi
Yeni sekme düğmesi (varsa) uygulama 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 için bu sekmeleri sürüklemenin veya tarayıcı sekmeleriyle birleştirmenin nasıl gerçekleştirileceğine karar verebilir.
"new_tab_button" için izin verilen değerler:
- Tarayıcının ne yapacağını belirlemesine izin vermek için
"auto". - Tarayıcıya yeni sekme düğmesi göstermemesini bildirmek için
"absent". - İki alt özelliği olan bir nesne:
- İzin verilen
"auto"değerlerine veya yeni sekmeler açılacak kapsam içi URL'ye sahip"url". - İzin verilen
"auto"değerleriyle veya ana"icons"özelliğindeki simge dizisiyle"icons".
- İzin verilen
Eksiksiz örnek
Bir uygulamanın davranışını sekmeli arayüzle yapılandırmaya ilişkin eksiksiz bir örnek aşağıdaki gibi olabilir:
{
"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'teki 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, sitelerin yinelenen pencerelerin açılmasını önlemek amacıyla uygulama başlatmalarını mevcut uygulama pencerelerine yönlendirmesine olanak tanır. Sekmeli bir uygulama "client_mode": "navigate-new" özelliğini ayarladığında, uygulama başlatılırken mevcut bir uygulama penceresinde yeni bir sekme açılır.
Demografi
Bir tarayıcı işareti ayarlayarak sekmeli uygulama modunu deneyebilirsiniz:
#enable-desktop-pwas-tab-stripişaretini ayarla.- tabbed-application-mode.glitch.me uygulamasını yükleyin (kaynak kod).
- Farklı sekmelerdeki farklı bağlantıları tıklayın.
Geri bildirim
Chrome ekibi, sekmeli uygulama moduyla ilgili deneyimlerinizi öğrenmek istiyor.
Bize API tasarımı hakkında bilgi verin
Sekmeli uygulama moduyla ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Oluşturduğumuz web uygulaması manifest sorununu yorumlayın.
Uygulamayla ilgili bir sorunu bildirin
Chrome'un uygulamasında bir hata buldunuz mu? new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca çok ayrıntı eklediğinizden ve yeniden oluşturmaya ilişkin basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna UI>Browser>WebAppInstalls yazın.
Glitch, hızlı ve kolay yeniden oluşturma kılıflarını paylaşmak için idealdir.
API'ye desteği gösterin
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 onları desteklemenin ne kadar kritik olduğunu gösterir.
#TabbedApplicationMode hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantı
- Açıklayıcı
- Web uygulaması manifest spesifikasyon sorunu
- Chromium hatası
- Yanıp Sönen Bileşen:
UI>Browser>WebAppInstalls
Teşekkür
Sekmeli uygulama modu Matt Giuca tarafından keşfedilmiştir. Chrome'daki deneysel uygulama Alan Cutter'ın çalışmasıydı. Bu makale, Joe Medley tarafından incelendi. Wikimedia Commons'da Till Niermann tarafından hazırlanan lokomotif resim.
