Web Uygulaması Kapsam Uzantıları

Chrome 122'den scope_extensions için kaynak denemesine abone olabilirsiniz Birden çok alt alanı ve üst alanı kontrol eden sitelere izin veren uygulama manifesti üyesi tek bir web uygulaması olarak sunulacak düzey alan adları. Bu dokümanda, Google'ın Chrome ekibi bu özelliği tanıtıyor ve bu özelliği ne zaman kullanmak isteyebileceğiniz.

Demián Renzulli
Demián Renzulli
X GitHub Arıza
Thomas Steiner

Genel Bakış

Bazı web uygulamalarında birden fazla origins örneğin, ana uygulama olarak example.com, ardından space_1.example.com, ..., space_n.example.com, bazen special-example.com ile birlikte, şu şekilde tüm alt deneyimler ana uygulama altında toplanıyor. Bu site türü mimarisinin Progresif Web Uygulamaları bağlamında bazı etkileri vardır. Service Worker'ları, her türlü cihazı paylaşamama, kaynaklar ve kaynaklar arasında izinler bulunur. Ayrıca, bağımsız bir PWA, kullanıcının artık PWA (progresif web uygulaması) deneyiminden vazgeçti. Bazı proje yönetimi süreçlerinin bu sorunları Çok kaynaklı sitelerde progresif web uygulamaları ve Aynı alan adında birden fazla Progresif Web Uygulaması (pwa) geliştirme.

Kapsam Uzantıları API'si, web uygulamalarının "the" same-origin politikası bu tür bir site mimarisine iter. Web uygulamalarının diğer kaynakları kapsamı web uygulamasının birincil kaynak ve ilişkili kaynaklar.

Hedefler

Kapsam Uzantıları API'sinin ana hedefi, tek bir bitişik web uygulaması gibi davranmak üzere birden fazla alt alan adı ve üst düzey alan adı ilgili en iyi uygulamaları paylaşacağız. Örneğin, siteye bir example.com.co.uk ve support.example.com kapsayan example.com şu şekilde davranır: tek bir web uygulaması kadar zahmetsiz hale getirebilirsiniz.

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

Kapsam Uzantıları, aşağıdaki durumlarda çok kaynaklı PWA'ların bitişik web uygulaması gibi davranmasına olanak tanır kullanıcı arayüzüyle ilgili.

Pratikte bu, iki belirli hedef daha anlamına gelir:

  • Kaynaklar arası gezinme: Kullanıcıların ilişkili kaynaklar arasında gezinmesine izin verin pencere kullanıcı arayüzünü çağırarak kullanıcı deneyimini kesintiye uğratmadan kullanıcıları PWA'dan uzaklaştırıyor.
  • Kaynaklar arası bağlantı yakalama: Web uygulamalarının kullanıcı gezinmelerini yakalamasına izin verin. bağlı oldukları sitelerdir.

Kaynaklar arası kapsam içi gezinme

Varsayılan olarak, kullanıcılar bağımsız bir PWA'da kaynaklar arasında gezindiğinde PWA'nın dışına geçiş yaptıklarını gösteren bir pencere kullanıcı arayüzü gösteriliyor. Chrome'da bu kullanıcı arayüzü "kapsam dışı" bir ayardan oluşuyor şunun URL'sini içeren çubuk: yeni başlangıç noktası. Kullanıcılar beklentilerinden dolayı bu durum kullanıcı deneyimini olumsuz etkiler. aynı uygulama bağlamında gezinmeye devam etmekle birlikte, bundan çıkarılıyorlar.

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

"Kapsam dışı" kullanıcılar farklı kaynaklardan gezindiğinde Chrome'da gösterilen çubuk geliştirmeyi öğreneceksiniz.

Kapsam uzantıları kullanıldığında, kullanıcılar herhangi bir Böylece PWA'nın birleşik bir deneyim olarak sunulması için ilişkili kaynakların hepsine göz atmayı unutmayın.

Bağlantı Yakalama, bir uygulamanın kapsam. Bunun uygulanma şekli tarayıcılar ve işletim sistemleri arasında farklılık gösterir sistemlerdir. Örneğin ChromeOS'teki Chrome'da, PWA, varsayılan olarak adres çubuğunda Bu bağlantıları işleyebilen bir uygulama vardır. Kullanıcının o noktadan itibaren otomatik bağlantı yakalamayı etkinleştirebilir.

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

ChromeOS'teki bir sekmeye ait, görsel bir uyarı gösteren Chrome adres çubuğunun parçası bağlantının PWA tarafından işlenebileceği ve bu kararı hatırlama seçeneğinin sunulması.

Kullanıcı PWA'nın kapsamı dışındaki bir bağlantıyı tıklarsa ( alt alan adları veya üst düzey alanlara yönelik bağlantılar) içeriyorsa bu bağlantılar ait olarak algılanmaz . Örneğin, bağlantılar herhangi bir gösterge olmadan bir tarayıcı sekmesinde açılır bunu yapabilen bir uygulama olduğunu bilmeniz önemlidir. Kapsam Extensions API, PWA'nın kapsamını genişleterek ilişkili kaynaklar kapsam içi bağlantılar olarak kabul edilir.

Uygulama

Kapsam uzantılarının uygulanması, DMAIC ve PDCA gibi ve ilişkili kaynaklar.

İlişkilendirilmiş kaynakların listesini bildir

Şu işlemleri yapmak için ana PWA kaynağına bir scope_extensions web uygulaması manifest üyesi ekleyin: web uygulamasının, kapsamını diğer kaynakları içerecek şekilde genişletmesini sağlar.

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, web uygulamasıyla ilişkilendirmeyi bir /.well-known/web-app-origin-association yapılandırma dosyası. Bu dosya için gerekenler: adı web-app-origin-association olmalı ve tam olarak bu konumda sunulmalıdır. İyi Bilinen URI'dir.

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

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

Demo

Demo iki siteden oluşur:

Aşağıdaki testleri gerçekleştirmek için about://flags/#enable-desktop-pwas-scope-extensions flag'i (En düşük fiyat: Chrome v115 ve sonraki sürümler).

Kaynaklar arası gezinmeyi test etme

Bu testler için ön koşul olarak main PWA kullanıyorsanız bunu PWA olarak yüklemek ve bağımsız modda çalıştırmak için açın. PWA, bir genişletilmiş kapsamdaki bir kaynağa ve kaynak, genişletilmiş kapsamda değil.

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

Genişletilmiş kapsamda ve kaynakta kaynaklara bağlantılar içeren demo PWA (genişletilmiş kapsamda değil) kapsam.

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

  1. Kaynak, genişletilmiş kapsamda değil bağlantısını tıklayın PWA'yı kullanabilirsiniz.
  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ğunun gösterildiği ana PWA penceresi.

"Kapsam dışı" şurada bir PWA'ya yönelik kaynaklar arası gezinme için varsayılan olarak gösterilen çubuk bağımsız modda çalışır.

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

  1. PWA'nın ana sayfasına geri dönün.
  2. Şu bağlantıyı tıklayın: kaynak genişletilmiş kapsamda değil.
  3. Varsayılan olarak "kapsam dışı" çubuğu görünür olmalıdır ancak Kapsam uzantılar ilişkilendirmesi değildir.

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

"Kapsam dışı" kaynak ilişkilendirmesinden sonra kaynaklar arası gezinmede çubuk gösterilmiyor Kapsam Uzantıları ile yapıldı.

  1. Ana PWA'yı ChromeOS cihaz.
  2. Aşağıdaki bağlantıyı tıklayın: ilişkilendirilmiş kaynak.
  3. Bağlantı yeni bir tarayıcı sekmesinde açılır ve bağlantıyı şurada açmak için bir istem gösterilir: yüklü PWA (Progresif Web Uygulaması)

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

Bir PWA'nın ilişkili kaynağına giden bağlantı tıklandığında bağlantı yeni bir sekmede açılır. "Uygulamada Aç" yazıyor Kullanıcının otomatik bağlantı için kaydolmasını sağlayan simge tanımlar.

Kaynak denemesi

Bu API'yi uygulamanızda test etmek istiyorsanız, Bunu bir kaynak denemesi için geçerlidir. Kaynak denemeleri, Google Cloud Platform'u kullanarak deneysel özellikleri kullanıcılarınızla alan adınıza bağlı bir test jetonudur. Ardından uygulamanızı dağıtabilir ve özelliğini destekleyen bir tarayıcıda çalışmasını bekleyin (bu sayfada Chrome'da 121 ile 126 arasında kullanılabilir). Kendi jetonunuzu almak için kaynak denemesi çalıştırmak üzere başvuru formunu doldurun.

Geri bildirim

Chrome ekibi, bu API'nin kullanışlılığıyla ilgili geri bildirim bekliyor. Alıcı: yararlı olduğuna ilişkin geri bildirimler alarak ekibin API'yi geliştirmesine yardımcı olur ve yeni kullanım alanları oluşturmak istiyorsanız GitHub ile ilgili sorun.

Ek kaynaklar

Teşekkür

Bu API'nin geliştirilmesinde destek olan ekibe teşekkür ederiz. Kapsam Uzantıları Alan Cutter tarafından belirtilmiş Lu Huang, kaynağı: Matt Giuca. API'yi uygulayan Alan Cutter ve Hasan Talat, Kristin Lee ve Microsoft Edge'den Lu Huang.