Web Uygulaması Kapsam Uzantıları

Chrome 122'den itibaren, birden fazla alt alan adını ve üst düzey alanı kontrol eden sitelerin tek bir web uygulaması olarak sunulmasına olanak tanıyan scope_extensionsuygulama manifesti üyesinin kaynak deneme sürümüne abone olabilirsiniz. Bu dokümanda, Chrome Ekibi'nin bu özelliği neden kullanıma sunduğu ve ne zaman kullanmak isteyebileceğiniz açıklanmaktadır.

Demián Renzulli

Thomas Steiner

Genel Bakış

Bazı web uygulamalarının birden fazla kökeni vardır. Örneğin, ana uygulama olarak example.com, ardından space_1.example.com, …, space_n.example.com (bazen special-example.com ile birlikte) alt deneyimler olarak, tümü ana uygulamanın çatısı altındadır. Bu tür bir site mimarisi, Progresif Web Uygulamaları bağlamında bazı sonuçlara yol açar. Sınırlılıklar arasında hizmet çalışanlarını, cihaz türlerini, yerel depolama alanını ve izinleri farklı kaynaklar arasında paylaşamama yer alır. Ayrıca, bağımsız bir PWA'da kaynak ötesi gezinme, kullanıcının PWA deneyiminden çıktığını belirten bir pencere kullanıcı arayüzü ("kapsam dışında" çubuğu) gösterir. Bu sorunların bazılarını nasıl gidereceğinizi Çok kaynaklı sitelerde progresif web uygulamaları ve Aynı alanda birden fazla progresif web uygulaması oluşturma makalelerinde öğrenebilirsiniz.

Scope Extensions API, web uygulamalarının aynı kaynak politikasının bu tür site mimarisine getirdiği bazı zorlukların üstesinden gelmesine olanak tanır. Web uygulamalarının, birincil kaynağı ile ilişkili kaynaklar arasında anlaşma sağlandığı takdirde birleşik bir deneyim elde etmek için kapsamlarını diğer kaynaklara genişletmesine olanak tanır.

Not: Bu doküman hazırlanırken, bu belgede açıklanan kapsam uzantıları özelliklerinin ikisini de yalnızca ChromeOS destekliyordu (kaynak alanı çapraz kapsam içi gezinme ve kaynak alanı çapraz bağlantı yakalama). Kaynaklar arası kapsam içi gezinme, Windows, macOS ve Linux'taki Chrome'da da desteklenir ancak bağlantı yakalama ile entegrasyon bu platformlarda henüz kullanılamaz. Kapsam Uzantıları henüz mobil cihazlarda kullanılamıyor.

Hedefler

Kapsam Uzantıları API'sinin ana hedefi, birden fazla alt alan adını ve üst düzey alanı kontrol eden sitelerin web uygulaması kullanıcı arayüzü ve bağlantı yakalama konusunda tek bir sürekli web uygulaması gibi davranmasına izin vermektir. Örneğin, example.com.co.uk ve support.example.com'yi kapsayan example.com sitesinin mümkün olduğunca tek bir web uygulaması gibi davranmasına izin verebilirsiniz.

Kapsam uzantıları, web uygulaması kullanıcı arayüzü söz konusu olduğunda çok kaynaklı PWA'ların birbirine bağlı bir web uygulaması gibi davranmasına olanak tanır.

Uygulamada bu, daha spesifik iki hedefe dönüşür:

• Kaynaklar arası gezinme: Kullanıcıları, PWA'dan ayrıldıklarını bildiren pencere kullanıcı arayüzünü çağırarak kullanıcı deneyimini kesintiye uğratmadan ilişkili kaynaklar arasında gezinmeye izin verin.
• Kaynaklar arası bağlantı yakalama: Web uygulamalarının, ilişkili oldukları sitelere yapılan kullanıcı gezinmelerini yakalamasına izin verir.

Kaynaklar arası kapsam içi gezinme

Varsayılan olarak, kullanıcılar bağımsız bir PWA'da kaynaklar arasında gezinirken PWA deneyiminin dışına çıktıklarını belirten bir pencere kullanıcı arayüzü gösterilir. Chrome'da bu kullanıcı arayüzü, yeni kaynağın URL'sini içeren bir "kapsam dışında" çubuğundan oluşur. Kullanıcılar aynı uygulama bağlamında gezinmeye devam etmeyi beklediğinden ancak uygulamadan çıkarıldığını algılayabileceğinden bu durum kullanıcı deneyimini olumsuz etkiler.

Kullanıcılar bağımsız bir PWA'da farklı kaynaklar arasında gezinirken Chrome'da gösterilen "Kapsam dışında" çubuğu.

Kapsam uzantılarıyla, kullanıcılar ilişkili köklerden herhangi birine gittiğinde pencere kullanıcı arayüzü gösterilmez. Böylece, PWA birleşik bir deneyim olarak sunulur.

Kaynaklar arası bağlantı yakalama

Bağlantı yakalama, bir uygulamanın kapsamı dahilindeki bağlantıları yakalama özelliğini ifade eder. Bu özelliğin uygulanması, tarayıcılar ve işletim sistemleri arasında değişiklik gösterir. Örneğin, ChromeOS'teki Chrome'da, yüklü bir PWA kapsamındaki bağlantılar varsayılan olarak bir tarayıcı sekmesi açar. Bu sekmenin adres çubuğunda, bu bağlantıları işleyebilecek bir uygulama bulunduğuna dair bir gösterge bulunur. Bu noktadan itibaren kullanıcı, otomatik bağlantı yakalamayı etkinleştirebilir.

ChromeOS'teki bir sekme için Chrome adres çubuğu fragmenti. Bağlantının bir PWA tarafından işlenebileceğine dair görsel bir gösterge ve bu kararı hatırlama seçeneği gösterilmektedir.

Bir kullanıcı, PWA'nın kapsamı dışındaki bir bağlantıyı (alt alan adlarına veya üst düzey alanlara yönlendiren bağlantılar dahil) tıklarsa bu kullanıcı, PWA'ya ait olarak tanınmaz. Örneğin, bağlantılar bir tarayıcı sekmesinde açılır ve kullanıcıya bağlantıyı işleyebilecek bir uygulamanın bulunduğuna dair herhangi bir işaret gösterilmez. Scope Extensions API, ilişkili kaynakların kapsam içi bağlantılar olarak değerlendirilmesi için PWA'nın kapsamının genişletilmesine olanak tanır.

Uygulama

Kapsam uzantılarının uygulanması, ana kaynak ile ilişkili kaynaklar arasında ilişki kurulmasını gerektirir.

İlişkili kaynakların listesini beyan etme

Web uygulamasının kapsamını diğer kaynaklara genişletmesini sağlamak için ana PWA kaynağına bir scope_extensions web uygulaması manifesti üyesi ekleyin.

Web Uygulama Manifesti (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

İlişkilendirmeleri onaylama

Listelenen kaynakların her biri, /.well-known/web-app-origin-association yapılandırma dosyası kullanarak web uygulamasıyla ilişkiyi onaylar. Bu dosya, Belirli Bir URI olduğundan web-app-origin-association olarak adlandırılmalı ve tam olarak bu konumda yayınlanmalıdır.

/.well-known/web-app-origin-association (ilişkili kaynak)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Demo

Demo iki siteden oluşur:

• Ana PWA: Web uygulaması manifestinde scope_extensions üyesi aracılığıyla ilişkili kaynakların listesini açıklayan gerçek PWA.
• Genişletilmiş kapsamda kaynak: Ana PWA'nın kapsamı dışında olan ancak ana PWA tarafından ilişkili kaynak olarak listelendikten ve web-app-origin-association dosyası aracılığıyla ilişkiyi onayladıktan sonra ana PWA ile ilişkilendirilen bir kaynak.

Aşağıdaki testleri gerçekleştirmek için about://flags/#enable-desktop-pwas-scope-extensions işaretini etkinleştirmeniz gerekir (Chrome 115 ve sonraki sürümlerde kullanılabilir).

Kaynaklar arası gezinmeyi test etme

Bu testlerin ön koşulu olarak, ana PWA'yı bir tarayıcıda açın, PWA olarak yükleyin ve bağımsız modda çalıştırmak için açın. PWA, geniş kapsamlı bir kaynağa ve geniş kapsamlı olmayan bir kaynağa bağlantılar içeriyor.

Geniş kapsamda kaynak bağlantıları ve genişletilmiş kapsamda olmayan kaynak içeren demo PWA.

Varsayılan kaynakta gezinme (geniş kapsamda değil)

1. Tam ekran PWA'da geniş kapsamda olmayan kaynağın bağlantısını tıklayın.
2. Sonuç olarak gezinme gerçekleşir ve kapsam dışında çubuğu gösterilir.

Bağımsız moddaki bir PWA'nın çapraz kaynaklı gezinmesi için varsayılan olarak gösterilen "Kapsam dışında" çubuğu.

Kapsam uzantılarıyla kaynak ötesi gezinme (genişletilmiş kapsamda)

1. PWA'nın ana sayfasına geri dönün.
2. Geniş kapsamda olmayan kaynağın bağlantısını tıklayın.
3. Varsayılan olarak "kapsam dışında" çubuğu gösterilmelidir ancak kapsam uzantıları ilişkilendirmesi nedeniyle gösterilmez.

Kapsam uzantılarıyla kaynak ilişkilendirmesi yapıldıktan sonra kaynaktan kaynaka gezinmede "Kapsam dışında" çubuğu gösterilmiyor.

Kaynaklar arası bağlantı yakalamayı test etme

1. Ana PWA'yı bir ChromeOS cihazda açıp yükleyin.
2. Aşağıdaki bağlantıyı tıklayın: İlişkili kaynak.
3. Bağlantı yeni bir tarayıcı sekmesinde açılır ve bağlantıyı yüklü PWA'da açmak için bir istem gösterilir.

Bir PWA'nın ilişkili kaynağının bağlantısı tıklandığında bağlantı yeni bir sekmede açılır ve kullanıcının otomatik bağlantı yakalamayı etkinleştirmesine olanak tanıyan bir "Uygulamada aç" simgesi gösterilir.

Kaynak denemesi

Uygulamanızda bu API'yi gerçek kullanıcılarla birlikte test etmek istiyorsanız kaynak denemesi ile bunu yapabilirsiniz. Kaynak denemeleri, alanınıza bağlı bir test jetonu elde ederek deneysel özellikleri kullanıcılarınızla denemenize olanak tanır. Ardından uygulamanızı dağıtabilir ve test ettiğiniz özelliği destekleyen bir tarayıcıda çalışmasını bekleyebilirsiniz (bu durumda, Chrome 121 ile 126 arasında kullanılabilir). Kaynak denemesi çalıştırmak için kendi jetonunuzu almak üzere başvuru formunu doldurun.

Geri bildirim

Chrome Ekibi, bu API'nin yararlılığı hakkında geri bildirim almak istiyor. Ekibin, API'nin yararlılığı ve mevcut sürümde yer almayan yeni kullanım alanları hakkındaki geri bildirimlerle bu API'yi geliştirmesine yardımcı olmak için GitHub'da bir sorun açın.

Ek kaynaklar

• Scope Extensions API - Origin Trial
• Chrome Durumu - Web Uygulaması Kapsamı Uzantıları
• Web Uygulamaları için Kapsam Uzantılarıyla İlgili Açıklama
• Deneme yapma niyeti
• Mozilla Standartları Konumlandırması
• Apple Standartları Konumlandırması
• Chromium hatası
• Çok kaynaklı sitelerde progresif web uygulamaları
• Aynı alanda birden fazla progresif web uygulaması oluşturma

Teşekkür ederiz

Bu API'nin geliştirilmesinde emeği geçen ekibe özel teşekkürler. Kapsam Uzantıları, Matt Giuca'nın katkılarıyla Alan Cutter ve Lu Huang tarafından belirlendi. API, Google Chrome'dan Alan Cutter ve Microsoft Edge'den Hassan Talat, Kristin Lee ve Lu Huang tarafından uygulandı.