PWA'lar (Progresif Web Uygulaması) için sekmeli uygulama modu

Progresif Web Uygulamanızda sekmelerle aynı anda birden fazla doküman üzerinde çalışma

Thomas Steiner

Bilgisayar dünyasında masaüstü metaforu, kullanıcıların bilgisayarla daha sezgisel bir şekilde 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 klasik 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. Seçenekler fullscreen, standalone, minimal-ui ve browser'tır. 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, "display_override" mülkünü kullanarak gerekirse 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 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ın ayrı tarayıcı sekmelerinde olması, kaynak yalıtımı sağlar. Bu, günümüzde web'i kullanarak 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, seçili doküman sayfasına değil, geliştirici tarafından oluşturulan sekmeli arayüz sayfasına uygulanır.

"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ırma" anlamına gelmesi geliştiricilerin beklentilerini büyük ölçüde boşa çıkarırdı.

"display": "browser" ayarını yaparak uygulama penceresine yönlendirilmeyi devre dışı bırakabilirsiniz.

Mevcut durum

Step Durum
1. Açıklayıcı oluşturma Tamamlandı
2. Spesifikasyonun ilk taslağını oluşturma Tamamlandı
3. Geri bildirim toplama ve tasarımda iterasyon yapma Tamamlandı
4. Kaynak denemesi Tamamlandı
5. Başlat Tamamlandı (ChromeOS)

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" mülkü mevcut değilse varsayılan olarak aşağıdaki nesne kullanılır:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

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.

"tab_strip" nesnesinin "home_tab" üyesi, uygulamanın üst düzey menüsü olarak hizmet etmesi amaçlanan özel bir "ana sayfa sekmesi" hakkında bilgi içerir. Aşağıdaki üyeyi içerir:

  • "scope_patterns": "scope_patterns" üyesi, ana sayfa sekmesinin kapsamını manifest URL'sine göre tanımlayan URL Kalıpları'nın bir listesidir.

Yeni sekme düğmesi

"tab_strip" nesnesinin "new_tab_button" üyesi, tıklandığında/etkinleştirildiğinde uygulama penceresinde yeni bir uygulama bağlamı açan kullanıcı arayüzü olanağının (ör. düğme) davranışını tanımlar. Aşağıdaki üyeye sahiptir:

  • "url": "url" üyesi, işlenen bir manifestin kapsamı dahilindeki manifest URL'sine göre bir URL'yi temsil eden bir dizedir.

İşlenen manifest'in new_tab_button "url" üyesi ana sayfa sekmesi kapsamının dışındaysa uygulamada yeni sekme düğmesi vardır. Uygulamada yeni sekme düğmesi yoksa tarayıcı, "yeni sekme" olanağı kullanıcıya sunulmaz.

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:

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

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

ChromeOS'te sekmeli uygulamayı deneyebilirsiniz:

  1. tabbed-application-mode.glitch.me uygulamasını (kaynak kodu) yükleyin.
  2. Farklı sekmelerdeki farklı bağlantıları tıklayın.

Sekmeli uygulama modu demosunu tabbed-application-mode.glitch.me adresinde bulabilirsiniz.

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 hatayı yeniden oluşturma talimatları eklediğinizden emin olun. Bileşenler kutusuna UI>Browser>WebAppInstalls yazın. Glitch, hızlıca yeniden oluşturma örnekleri paylaşmak için mükemmel bir araçtır.

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.

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 doküman Joe Medley tarafından incelenmiştir. Wikimedia Commons'ta Till Niermann tarafından oluşturulan lokomotif resim.