Daha entegre bir deneyim için yüklü PWA'ların URL'leri işlemesine izin verin.
URL İşleyicileri olarak PWA'lar nedir?
macOS'te Mesajlar gibi bir anlık mesajlaşma uygulamasını kullanarak bir arkadaşınızla sohbet ettiğinizi ve müzikten bahsettiğinizi düşünün. Ayrıca, her ikinizin de cihazlarınızda music.example.com
PWA'nın yüklü olduğunu düşünün. Sevdiğiniz parçayı, keyfini çıkarması için paylaşmak istiyorsanız https://music.example.com/rick-astley/never-gonna-give-you-up
gibi bir derin bağlantı gönderebilirsiniz. Bu bağlantı oldukça uzun olduğundan music.example.com
geliştiricileri her parça için ek bir kısa bağlantı eklemeye karar vermiş olabilir (örneğin, https://🎵.example.com/r-a/n-g-g-y-u
).
URL İşleyicileri olarak PWA, music.example.com
gibi uygulamaların https://music.example.com
, https://*.music.example.com
veya https://🎵.example.com
gibi kalıplarla eşleşen URL'ler için kendilerini URL işleyicileri olarak kaydetmesine olanak tanır. Böylece PWA'nın dışından (ör. anlık mesajlaşma uygulamasından veya e-posta istemcisinden) bağlantılar, tarayıcı sekmesi yerine yüklü PWA'da açılır.
URL İşleyicileri olarak PWA, iki ekleme içerir:
"url_handlers"
web uygulaması manifest üyesi.- Kapsam içi ve kapsam dışı URL ilişkilendirmelerini doğrulamak için
web-app-origin-association
dosya biçimi.
URL İşleyicileri olarak PWA'lar için önerilen kullanım alanları
Bu API'yi kullanabilecek sitelere örnek olarak aşağıdakiler verilebilir:
- Müzik veya video akışı sitelerinin, parça bağlantılarının ya da oynatma listesi bağlantılarının uygulamanın oynatıcı deneyiminde açılması.
- Haber veya RSS okuyucular tarafından takip edilen ya da abone olunan siteler, uygulamanın okuyucu modunda açılır.
PWA'lar URL İşleyicileri olarak nasıl kullanılır?
about://flags aracılığıyla etkinleştirme
Kaynak deneme jetonu olmadan URL İşleyicileri olarak PWA'larla yerel olarak deneme yapmak için about://flags
içinde #enable-desktop-pwas-url-handling
işaretini etkinleştirin.
"url_handlers"
web uygulaması manifest üyesi
Yüklü bir PWA'yı URL kalıplarıyla ilişkilendirmek için bu kalıpların web uygulaması manifestinde belirtilmesi gerekir. Bu işlem "url_handlers"
üyesi aracılığıyla gerçekleşir. origin
özelliğine sahip nesne dizisini kabul eder. Bu özellik, başlangıç noktalarını eşleştirmek için kalıp olan zorunlu bir string
'dir. Bu kalıpların, birden fazla alt alan (ör. https://*.example.com
) içermeleri için joker karakter (*
) ön ekine sahip olmalarına izin verilir. Bu kaynaklarla eşleşen URL'ler, bu web uygulaması tarafından işlenebilir. Şemanın her zaman https://
olduğu varsayılır ancak şemanın açıkça belirtilmesi gerekir.
Aşağıdaki web uygulaması manifestinden yapılan alıntı, giriş paragrafındaki Music PWA örneğinin bunu nasıl ayarlayabileceğini göstermektedir. Joker karakterli ("https://*.music.example.com"
) ikinci giriş, uygulamanın https://www.music.example.com
veya https://marketing-activity.music.example.com
gibi olası diğer örnekler için de etkinleştirilmesini sağlar.
{
"url_handlers": [
{
"origin": "https://music.example.com"
},
{
"origin": "https://*.music.example.com"
},
{
"origin": "https://🎵.example.com"
}
]
}
web-app-origin-association
dosyası
PWA işlemesi gereken bazı URL'lerden (ör.music.example.com
https://🎵.example.com
) için uygulamanın, bu diğer kaynakların sahipliğini doğrulaması gerekir. Bu durum, diğer kaynaklarda barındırılan bir web-app-origin-association
dosyasında gerçekleşir.
Bu dosya geçerli JSON içermelidir. Üst düzey yapı, "web_apps"
adlı üyeye sahip bir nesnedir. Bu üye bir nesneler dizisidir ve her nesne benzersiz bir web uygulaması için bir girişi temsil eder. Her nesne şunları içerir:
Alan | Açıklama | Tür | Varsayılan |
---|---|---|---|
"manifest" |
(Zorunlu) İlişkilendirilmiş PWA'nın web uygulaması manifestinin URL dizesi | string |
Yok |
"details" |
(İsteğe bağlı) Dahil edilen ve hariç tutulan URL kalıplarından oluşan dizileri içeren bir nesne | object |
Yok |
Her "details"
nesnesi şunları içerir:
Alan | Açıklama | Tür | Varsayılan |
---|---|---|---|
"paths" |
(İsteğe bağlı) İzin verilen yol dizeleri dizisi | string[] |
[] |
"exclude_paths" |
(İsteğe bağlı) İzin verilmeyen yol dizeleri dizisi | string[] |
[] |
Yukarıdaki müzik PWA örneği için web-app-origin-association
dosyası aşağıda verilmiştir. 🎵.example.com
kaynağında barındırılır ve web uygulaması manifest URL'si tarafından tanımlanan music.example.com
PWA ile ilişkilendirme oluşturur.
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
Bir URL ne zaman eşleşir?
Aşağıdaki koşulların her ikisi de karşılandığında PWA, işleme için bir URL ile eşleşir:
- URL,
"url_handlers"
içindeki kaynak dizelerden biriyle eşleşiyor. - Tarayıcı, ilgili
web-app-origin-association
dosyası aracılığıyla her kaynağın, bu uygulamanın böyle bir URL'yi işlemesine izin verdiğini doğrulayabilir.
web-app-origin-association
dosya keşfi hakkında
Tarayıcının web-app-origin-association
dosyasını keşfetmesi için geliştiricilerin web-app-origin-association
dosyasını uygulama kökündeki /.well-known/
klasörüne yerleştirmesi gerekir. Bunun çalışması için dosya adı tam olarak web-app-origin-association
olmalıdır.
Demografi
PWA'ları URL İşleyicileri olarak test etmek için yukarıda açıklandığı gibi tarayıcı işaretini ayarladığınızdan ve ardından https://mandymsft.github.io/pwa/ adresinden PWA'yı yüklediğinizden emin olun. Web uygulaması manifest dosyasına bakarak şu URL kalıplarına sahip URL'leri işlediğini görebilirsiniz: https://mandymsft.github.io
ve https://luhuangmsft.github.io
. PWA'dan farklı bir kaynak (luhuangmsft.github.io
) olduğundan mandymsft.github.io
üzerindeki PWA'nın sahipliği kanıtlaması gerekir. Bu işlem https://luhuangmsft.github.io/.well-known/web-app-origin-association adresinde barındırılan web-app-origin-association
dosyası aracılığıyla gerçekleşir.
Hizmetin gerçekten çalışıp çalışmadığını test etmek için istediğiniz bir anlık mesajlaşma uygulamasını kullanarak veya macOS'teki Mail gibi web tabanlı olmayan bir e-posta istemcisinde görüntülenen bir e-postayı kullanarak kendinize bir test iletisi gönderin. E-posta veya kısa mesaj, https://mandymsft.github.io
veya https://luhuangmsft.github.io
bağlantılarından birini içermelidir. Her ikisi de yüklü PWA'da açılır.
Güvenlik ve izinler
Chromium ekibi; kullanıcı denetimi, şeffaflık ve ergonomi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan temel ilkeleri kullanarak PWA'ları URL İşleyicileri olarak tasarladı ve uyguladı.
Kullanıcı denetimi
Belirli bir URL kalıbı için birden fazla PWA, URL işleyicisi olarak kaydedilirse kullanıcıdan, kalıbı hangi PWA ile kullanmak istediğini (varsa) seçmesi istenir. Tarayıcı sekmesinde başlayan gezinmeler bu teklif tarafından işlenmemektedir. Bu teklif açıkça tarayıcının dışında başlayan gezinmeleri hedefler.
Şeffaflık
PWA yüklemesi sırasında gerekli ilişkilendirme doğrulaması herhangi bir nedenle başarılı bir şekilde tamamlanamazsa tarayıcı, uygulamayı etkilenen URL'ler için etkin bir URL işleyici olarak kaydetmez. Düzgün şekilde uygulanmadığı takdirde URL işleyicileri, web sitelerinin trafiğini ele geçirmek için kullanılabilir. Bu nedenle uygulama ilişkilendirme mekanizması, şemanın önemli bir parçasıdır.
Platforma özgü uygulamalar, kullanıcının sistemindeki yüklü uygulamaları numaralandırmak için işletim sistemi API'larını zaten kullanabilmektedir. Örneğin, Windows'daki uygulamalar URL işleyicilerini numaralandırmak için FindAppUriHandlersAsync
API'sini kullanabilir. PWA'lar Windows'da OS düzeyinde URL işleyiciler olarak kaydedilirse diğer uygulamalar tarafından görülebilir.
İzin kalıcılığı
Bir kaynak, PWA'larla ilişkilendirmelerini herhangi bir zamanda değiştirebilir. Tarayıcılar, yüklü web uygulamalarının ilişkilendirmelerini düzenli olarak tekrar doğrulamaya çalışır. Bir URL işleyici kaydı, ilişkilendirme verileri değiştiği veya artık kullanılamadığı için yeniden doğrulama yapamazsa tarayıcı kayıtları kaldırır.
Geri bildirim
Chromium ekibi, URL İşleyicileri olarak PWA'larla ilgili deneyimlerinizi öğrenmek istiyor.
Bize API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var? İlgili GitHub deposuna özellik sorunu bildiriminde bulunun veya mevcut bir soruna düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorunu bildirin
Chromium'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
new.crbug.com adresinde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve yeniden oluşturmaya ilişkin basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna UI>Browser>WebAppInstalls
yazın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.
API'ye desteği gösterin
PWA'ları URL İşleyicileri olarak kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.
#URLHandlers
hashtag'ini kullanarak @ChromiumDev'e tweet göndererek bunu nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
- Herkese açık açıklayıcı
- Demo | Demo kaynağı
- Chromium izleme hatası
- ChromeStatus.com girişi
- Yanıp Sönen Bileşen:
UI>Browser>WebAppInstalls
- TAG İncelemesi
- Microsoft dokümanları
Teşekkür
URL İşleyicileri olarak PWA'lar, Microsoft Edge ekibinden Lu Huang ve Mandy Chen tarafından belirlenmiş ve uygulanmıştır. Bu makale Joe Medley tarafından incelenmiştir. Bryson Hammer tarafından Unsplash'ta yayınlanan lokomotif resim.