Web Uygulaması Kapsam Uzantıları

Chrome 122'den itibaren, birden fazla alt alan adını ve üst düzey alan adını kontrol eden sitelerin tek bir web uygulaması olarak sunulmasına olanak tanıyan scope_extensions uygulama manifesti üyesi için deneme sürecine abone olabilirsiniz. Bu belgede, Chrome ekibinin bu özelliği neden kullanıma sunduğu ve bu özelliği ne zaman kullanmak isteyebileceğiniz açıklanmaktadır.

Demián Renzulli

Thomas Steiner

Genel Bakış

Bazı web uygulamalarının birden fazla kaynağı vardır. Örneğin, example.com ana uygulama, space_1.example.com, …, space_n.example.com, bazen de special-example.com ile birlikte ana uygulamanın çatısı altında alt deneyimler olarak kullanılır. Bu tür site mimarisi, Progressive Web App'ler bağlamında sonuçlar doğurur. Sınırlamalar arasında hizmet çalışanlarını, herhangi bir cihaz türünü, yerel depolamayı ve izinleri kaynaklar arasında paylaşamama yer alır. Ayrıca, bağımsız bir PWA'da kaynaklar arası gezinme, kullanıcının PWA deneyiminin dışına çıktığını belirten bir pencere kullanıcı arayüzü ("kapsam dışı" çubuğu) gösterir. Bu sorunların bazılarını nasıl aşacağınızı Çok kaynaklı sitelerde progresif web uygulamaları ve Aynı alanda birden fazla progresif web uygulaması oluşturma başlıklı makalelerden öğrenebilirsiniz.

Scope Extensions API, web uygulamalarının aynı kaynak politikasının bu tür site mimarisine getirdiği bazı zorlukların üstesinden gelmesini sağlar. Web uygulamalarının, birleşik bir deneyim sunmak için kapsamlarını diğer kaynaklara genişletmelerine olanak tanır. Bu özellik, web uygulamasının birincil kaynağı ile ilişkili kaynaklar arasında anlaşma yapılması koşuluyla kullanılabilir.

Not: Bu yazı hazırlandığı sırada, bu belgede ele alınan Scope Extensions özelliklerinin (kaynaklar arası kapsam içi gezinme ve kaynaklar arası bağlantı yakalama) her ikisini de yalnızca ChromeOS desteklemektedir. Windows, macOS ve Linux'taki Chrome'da da kaynaklar arası kapsam içi gezinme desteklenir ancak bağlantı yakalama ile entegrasyon bu platformlarda henüz kullanılamamaktadır. Kapsam Uzantıları henüz mobil cihazlarda kullanılamamaktadır.

Hedefler

Scope Extensions API'nin temel amacı, birden fazla alt alanı ve üst düzey alanı kontrol eden sitelerin, web uygulaması kullanıcı arayüzü ve bağlantı yakalama söz konusu olduğunda tek bir bitişik web uygulaması gibi davranmasına olanak tanımaktır. Örneğin, example.com.co.uk ve support.example.com alanlarını kapsayan example.com sitesinin mümkün olduğunca tek bir web uygulaması gibi davranmasına izin verme.

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

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

• Kaynaklar arası gezinme: Kullanıcıların, ilişkili kaynaklar arasında gezinmesine izin verin. Kullanıcıya PWA'dan uzaklaştığını bildiren pencere kullanıcı arayüzünü çağırarak kullanıcı deneyimini kesintiye uğratmayın.
• Kaynaklar arası bağlantı yakalama: Web uygulamalarının, kullanıcıların bağlı oldukları sitelere yaptığı gezinmeleri yakalamasına izin verin.

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 beklediklerinden bu durum kullanıcı deneyimini olumsuz etkiler. Kullanıcılar, uygulama bağlamının dışına çıkarıldıklarını düşünebilir.

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

Kapsam uzantıları sayesinde, kullanıcılar ilişkili kaynaklardan 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 kendi kapsamındaki bağlantıları yakalama özelliğini ifade eder. Bu özelliğin uygulanma şekli tarayıcılar ve işletim sistemleri arasında farklılık gösterir. Örneğin ChromeOS'teki Chrome'da, yüklü bir PWA kapsamındaki bağlantılar varsayılan olarak adres çubuğunda bu bağlantıları işleyebilecek bir uygulama olduğunu belirten bir tarayıcı sekmesinde açılır. Bu sayede kullanıcı, o noktadan itibaren bağlantıların otomatik olarak yakalanmasını etkinleştirebilir.

ChromeOS'teki bir sekmenin Chrome adres çubuğunun bir bölümünde, bağlantının PWA tarafından işlenebileceğini gösteren görsel bir işaret ve bu kararı hatırlama seçeneği yer alıyor.

Bir kullanıcı, PWA kapsamı dışında kalan bir bağlantıyı (alt alanlara veya üst düzey alanlara giden bağlantılar dahil) tıklarsa bu bağlantı, PWA'ya ait olarak tanınmaz. Örneğin, bağlantılar, bağlantıyı işleyebilecek bir uygulama olduğuna dair kullanıcıya herhangi bir gösterge verilmeden tarayıcı sekmesinde açılır. Scope Extensions API, PWA'nın kapsamının genişletilmesine olanak tanır. Böylece ilişkili kaynaklar kapsam dahilindeki bağlantılar olarak değerlendirilir.

Uygulama

Kapsam genişletmelerinin uygulanması için ana kaynak ile ilişkili kaynaklar arasında ilişki kurulması gerekir.

İlişkili kaynakların listesini bildirme

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

Web uygulaması 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ını kullanarak web uygulamasıyla ilişkilendirmeyi onaylar. Bu dosyanın web-app-origin-association olarak adlandırılması ve Well-Known URI olduğu için tam olarak bu konumda yayınlanması gerekir.

/.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ı manifestindeki scope_extensions üyesi aracılığıyla ilişkili kaynakların listesini bildiren gerçek PWA.
• Genişletilmiş kapsamda kaynak: Ana PWA'nın kapsamı dışında olan ancak ana PWA tarafından ilişkili kaynak olarak listelenip web-app-origin-association dosyası aracılığıyla ilişki onaylandı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 v115'ten itibaren 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şletilmiş kapsamdaki bir kaynağa ve genişletilmiş kapsamda olmayan bir kaynağa bağlantılar içeriyor.

Genişletilmiş kapsamdaki kaynağa ve genişletilmiş kapsamda olmayan kaynağa bağlantılar içeren PWA demosunu inceleyin.

Varsayılan kaynaklar arası gezinme (genişletilmiş kapsamda değil)

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

Bağımsız moddaki bir PWA için kaynaklar arası gezinmede varsayılan olarak "Kapsam dışında" çubuğu gösterilir.

Kapsam uzantılarıyla (genişletilmiş kapsamda) kaynaklar arası gezinme

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

Kaynak ilişkilendirmesi, kapsam uzantılarıyla yapıldıktan sonra kaynaklar arası gezinmede "kapsam dışında" çubuğu gösterilmiyor.

Kaynaklar arası bağlantı yakalamayı test etme

1. ChromeOS cihazda ana PWA'yı açıp yükleyin.
2. Aşağıdaki bağlantıyı tıklayın: associated origin.
3. Bağlantı yeni bir tarayıcı sekmesinde açılır ve yüklenen PWA'da açılması için bir istem gösterilir.

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

Kaynak denemesi

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

Geri bildirim

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

Ek kaynaklar

• Scope Extensions API - Origin Trial
• Chrome Status - Web App Scope Extensions
• Web uygulamaları için kapsam uzantıları açıklayıcısı
• Deneme Yapma Amacı
• Mozilla Standards Position
• Apple'ın Standartlar Konumu
• Chromium hatası
• Çok kaynaklı sitelerde progresif web uygulamaları
• Aynı alanda birden fazla progresif web uygulaması oluşturma

Teşekkür

Bu API'nin geliştirilmesinde emeği geçen ekibe teşekkür ederiz. Scope Extensions, Alan Cutter ve Lu Huang tarafından Matt Giuca'nın katkılarıyla belirlenmiştir. API, Google Chrome'dan Alan Cutter ve Microsoft Edge'den Hassan Talat, Kristin Lee ve Lu Huang tarafından uygulanmıştır.