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 belgede, Chrome Ekibi'nin bu özelliği neden kullanıma sunduğu ve ne zaman kullanmak isteyebileceğiniz açıklanmaktadır.
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 ve 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 önemli sonuçlar doğurur.
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. Bağımsız bir PWA'daki kaynaklar arası gezinme, kullanıcının PWA deneyiminden çıktığını belirten bir pencere kullanıcı arayüzü ("kapsam dışı" çubuğu) gösterir. Bu sorunlardan bazılarının nasıl çözüleceğini Ç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 mimarisine getirdiği bazı zorlukların üstesinden gelmesine olanak tanır. Web uygulamalarının birincil kaynağı ile ilişkili kaynaklar arasındaki anlaşmaya göre, birleşik bir deneyim elde etmeye yardımcı olması için kapsamını diğer kaynakları içerecek şekilde genişletmesine olanak tanır.
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 özelliklerini kapsayan example.com sitesinin, tek bir web uygulaması kadar aynı şekilde davranmasına izin vermek.
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.
Pratikte bu, iki belirli hedef daha anlamına gelir:
- 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 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ışı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ı ile kullanıcılar ilişkili kaynaklardan herhangi birine gittiğinde pencere kullanıcı arayüzü gösterilmez. Böylece PWA, birleştirilmiş bir deneyim olarak sunulur.
Kaynaklar arası bağlantı yakalama
Bağlantı Yakalama, bir uygulamanın kendi kapsamı içindeki bağlantıları yakalayabilmesini 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 adres çubuğunda bu bağlantıları işleyebilen bir uygulama olduğunu belirten bir tarayıcı sekmesi açar. Bu bilgi, kullanıcının söz konusu noktadan otomatik bağlantı yakalamayı etkinleştirmesine olanak tanır.
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.
Kullanıcı, PWA'nın kapsamı dışındaki bir bağlantıyı (alt alan adları veya üst düzey alan bağlantıları dahil) tıklarsa bu bağlantıya ait olarak algılanmaz. Ö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şkinin 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-associationdosyası 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)
- Tam ekran PWA'nın içinde kaynak, genişletilmiş kapsamda değil bağlantısını tıklayın.
- Bunun sonucunda gezinme gerçekleşir ve kapsam dışı çubuğu gösterilir.
Bağımsız modda bir PWA için kaynaklar arası gezinme için varsayılan olarak gösterilen "Kapsam dışı" çubuğu.
Kapsam uzantılarıyla kaynak ötesi gezinme (genişletilmiş kapsamda)
- PWA'nın ana sayfasına geri dönün.
- Geniş kapsamda olmayan kaynağın bağlantısını tıklayın.
- Varsayılan olarak "kapsam dışında" çubuğu gösterilmelidir ancak kapsam uzantıları ilişkilendirmesi nedeniyle gösterilmez.
Kapsam Uzantıları ile kaynak ilişkilendirmesi yapıldıktan sonra kaynaklar arası gezinmede "Kapsam dışı" çubuğu gösterilmez.
Kaynaklar arası bağlantı yakalamayı test etme
- Ana PWA'yı açıp ChromeOS cihazına yükleyin.
- Aşağıdaki bağlantıyı tıklayın: İlişkili kaynak.
- Bağlantı yeni bir tarayıcı sekmesinde açılır ve yüklenen PWA'da açma istemi 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 üzere kendi jetonunuzu almak için 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 - Kaynak Denemesi
- Chrome Durumu - Web Uygulaması Kapsamı Uzantıları
- Web Uygulamaları için Kapsam Uzantılarıyla İlgili Açıklama
- Deneme Amacı
- 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, Microsoft Edge'den Hassan Talat, Kristin Lee ve Lu Huang tarafından uygulanmıştır.