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.
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.
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.
"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.
Kaynaklar arası bağlantı yakalama
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.
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:
- Ana PWA: PWA'nın
ilişkili kaynakların listesini
scope_extensions
üyesi üzerinden bildirir web uygulaması manifest'inde bulabilirsiniz. - Genişletilmiş kapsamdaki kaynak:
ana PWA'nın kapsamı dışında kalan ancak listelendikten sonra onunla ilişkilendirilen kaynak
ilişkilendirilmiş kaynak olarak ana PWA tarafından gerçekleştiriliyor ve ilişkiyi onaylıyor
aracılığıyla
web-app-origin-association
dosyası.
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.
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)
- Kaynak, genişletilmiş kapsamda değil bağlantısını tıklayın PWA'yı kullanabilirsiniz.
- Bunun sonucunda gezinme gerçekleşir ve kapsam dışı çubuğu gösterilir.
"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)
- PWA'nın ana sayfasına geri dönün.
- Şu bağlantıyı tıklayın: kaynak genişletilmiş kapsamda değil.
- Varsayılan olarak "kapsam dışı" çubuğu görünür olmalıdır ancak Kapsam uzantılar ilişkilendirmesi değildir.
"Kapsam dışı" kaynak ilişkilendirmesinden sonra kaynaklar arası gezinmede çubuk gösterilmiyor Kapsam Uzantıları ile yapıldı.
Kaynaklar arası bağlantı yakalamayı test etme
- Ana PWA'yı ChromeOS cihaz.
- Aşağıdaki bağlantıyı tıklayın: ilişkilendirilmiş kaynak.
- 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ı)
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
- Scope Extensions API - Kaynak Denemesi
- Chrome Durumu - Web Uygulaması Kapsamındaki Uzantılar
- Web Uygulamaları İçin Kapsam Uzantıları Açıklaması
- Deneme Amacı
- Mozilla Standartları Konumu
- Apple Standartları Konumu
- Chromium hatası
- Çok kaynaklı sitelerde progresif web uygulamaları
- Aynı alan adında birden fazla Progresif Web Uygulaması (pwa) oluşturma
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.