Web Uygulaması Kapsam Uzantıları

Chrome 122'den itibaren, birden fazla alt alanı ve üst düzey alanı kontrol eden sitelerin tek bir web uygulaması olarak sunulmasını sağlayan scope_extensions uygulama manifesti üyesi için kaynak denemesine abone olabilirsiniz. Bu dokümanda, Chrome ekibinin bu özelliği neden kullanıma sunacağı ve ne zaman kullanmak isteyebileceğiniz açıklanmaktadır.

Demián Renzulli
Demián Renzulli
X GitHub Nostaljik
Thomas Steiner

Genel bakış

Bazı web uygulamalarının birden çok kaynağı vardır. Örneğin, ana uygulama olarak example.com, daha sonra space_1.example.com, ..., space_n.example.com, bazen special-example.com Web uygulama türünün ana marjlarıyla birleştirilir. Bu, sitenin tüm alt deneyimleridir. Sınırlamalar arasında hizmet çalışanlarını, herhangi bir cihaz türünü, yerel depolama alanını ve kaynaklar arasında izinleri paylaşamama yer alır. Ayrıca, bağımsız PWA'da kaynaklar arası gezinme, kullanıcının PWA deneyiminin dışına çıktığını gösteren bir pencere kullanıcı arayüzü ("kapsam dışı" çubuğu) gösterir. Bu sorunların bazılarını nasıl çözeceğinizi Çok kaynaklı sitelerde Progresif Web Uygulamaları ve Aynı alan adında 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 mimarisi üzerindeki bazı zorlukların üstesinden gelmesini sağlar. Bu özellik, web uygulamasının birincil kaynağı ile ilişkili kaynakları arasındaki anlaşma sayesinde web uygulamalarının birleştirilmiş bir deneyime yardımcı olmak için kapsamını başka kaynakları da içerecek şekilde genişletmesine olanak tanır.

Hedefler

Scope Extensions API'nin ana hedefi, web uygulaması kullanıcı arayüzü ve bağlantı yakalama söz konusu olduğunda birden fazla alt alanı ve üst düzey alanı denetleyen sitelerin bitişik tek bir web uygulaması gibi davranmasını sağlamaktır. Örneğin, example.com.co.uk ve support.example.com kapsayan example.com sitesinin tek bir web uygulaması gibi çalışmasını sağlamak.

Ana PWA'yı ve ilişkili alt deneyimleri gösteren şema.

Kapsam Uzantıları, web uygulaması kullanıcı arayüzü söz konusu olduğunda çok kaynaklı PWA'ların bitişik bir web uygulaması gibi davranmasını sağlar.

Pratikte bu, iki daha belirli hedeflere işaret eder:

  • Kaynaklar arası gezinme: Pencere kullanıcı arayüzünü çağırarak kullanıcıların, PWA'dan uzaklaştıkları konusunda kullanıcıları bilgilendirerek kullanıcı deneyimini kesintiye uğratmadan ilişkili kaynaklar arasında gezinmesine olanak tanır.
  • Kaynaklar arası bağlantı yakalama: Web uygulamalarının, ilişkili oldukları sitelere yönelik kullanıcı gezinmelerini 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 gezindiğinde, 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ışı" çubuğundan oluşur. Kullanıcılar aynı uygulama bağlamı içinde gezinmeye devam etmeyi bekleseler de bunun dışında tutulduklarını düşünebilirler. Bu nedenle bu durum kullanıcı deneyimini olumsuz etkiler.

Bağımsız bir PWA'nın üstündeki kapsam dışı çubuğu.

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

Kapsam Uzantıları ile kullanıcılar ilişkili kaynaklardan herhangi birine gittiğinde pencere kullanıcı arayüzü gösterilmez. Bu nedenle PWA, birleştirilmiş bir deneyim olarak sunulur.

Bağlantı Yakalama, bir uygulamanın, kapsamı içindeki bağlantıları yakalama yeteneğini belirtir. Bu özelliğin uygulanma şekli tarayıcılara ve işletim sistemlerine göre değişir. Örneğin ChromeOS'teki Chrome'da, varsayılan olarak yüklü bir PWA (Progresif Web Uygulaması) kapsamındaki bağlantılar, adres çubuğunda bu bağlantıları işleyebilecek bir uygulama olduğunu belirten bir tarayıcı sekmesi açar. Bu da kullanıcının bu noktadan itibaren otomatik bağlantı yakalamayı etkinleştirmesine olanak tanır.

Yüklü PWA için çok amaçlı adres çubuğu istemi.

ChromeOS'teki bir sekme için Chrome adres çubuğunun, bağlantının PWA tarafından işlenebileceğine dair görsel bir gösterge ve bu kararı hatırlama seçeneğini gösteren bölümü.

Bir kullanıcı, PWA'nın kapsamı dışında olan bir bağlantıyı (alt alan adlarına veya üst düzey alanlara bağlantılar dahil) tıklarsa söz konusu bağlantıya ait olmayacaktır. Örneğin bağlantılar, kullanıcıya bağlantıyı işleyebilecek bir uygulama olduğunu göstermeden bir tarayıcı sekmesinde açılır. Scope Extensions API, PWA'nın kapsamının genişletilmesine olanak tanıyarak ilişkili kaynakların kapsam içi bağlantılar olarak kabul edilmesini sağlar.

Uygulama

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

İlişkilendirilmiş kaynakların listesini bildirme

Web uygulamasının kapsamını diğer kaynakları kapsayacak şekilde genişletmek 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 onayla

Listelenen kaynakların her biri, bir /.well-known/web-app-origin-association yapılandırma dosyası kullanarak web uygulamasıyla ilişkilendirmeyi onaylar. Bu dosyanın web-app-origin-association olarak adlandırılması ve İyi Bilinen URI olduğu için tam olarak bu konumda sunulması gerekir.

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

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

Demografi

Demo, iki siteden oluşur:

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 edin

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 üzere açın. PWA, genişletilmiş kapsamdaki kaynağa ve genişletilmiş kapsamda olmayan kaynağa bağlantılar içerir.

Kapsam içi ve genişletilmiş kapsam bağlantıları içeren ana PWA penceresi.

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

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

  1. Tam ekran PWA'nın içinde bulunan genişletilmiş kapsamda olmayan kaynak bağlantısını tıklayın.
  2. Bunun sonucunda, gezinme gerçekleşir ve kapsam dışı çubuğu gösterilir.

Kapsam dışı bağlantısı tıklandıktan sonra kapsam dışı çubuğun göründüğü ana PWA penceresi.

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

Kapsam Uzantıları ile kaynaklar arası gezinme (genişletilmiş kapsamda)

  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ışı" çubuğu gösterilmesi gerekir ancak Kapsam Uzantıları ilişkilendirmesi nedeniyle gösterilmez.

Genişletilmiş kapsam bağlantısı tıklandıktan sonra kapsam dışı çubuğu olmayan ana PWA penceresi.

Kapsam Uzantıları ile kaynak ilişkilendirme yapıldıktan sonra kaynaklar arası gezinmede "Kapsam dışı" çubuğu gösterilmiyor.

  1. Ana PWA'yı bir ChromeOS cihazda açıp yükleyin.
  2. Şu bağlantıyı tıklayın: ilişkili kaynak.
  3. Bağlantı yeni bir tarayıcı sekmesinde açılır ve bağlantının yüklü PWA'da açılmasıyla ilgili bir istem gösterilir.

Genişletilmiş kapsama sahip yüklü PWA için çok amaçlı adres çubuğu istemi.

PWA'nın ilişkili kaynağına yönlendiren bağlantı 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 "Uygulamada Aç" simgesi gösterilir.

Kaynak denemesi

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

Geri bildirim

Chrome ekibi, bu API'nin ne kadar yararlı olduğuyla ilgili geri bildirim bekliyor. Ekibin, kullanışlılığı ve mevcut sürümde ele alınmayan 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

Teşekkür

Bu API'yi geliştiren ekibe özel teşekkürler. Kapsam Uzantıları, Matt Giuca'nın girdisiyle Alan Cutter ve Lu Huang tarafından belirtilmiştir. API, Google Chrome'dan Alan Cutter ve Microsoft Edge'den Hassan Talat, Kristin Lee ve Lu Huang tarafından uygulanmıştır.