Yüklü PWA'ların URL'leri işlemesine izin vererek daha entegre bir deneyim sunun.
URL İşleyicileri olarak PWA'lar nedir?
macOS'te Mesajlar gibi bir anlık mesajlaşma uygulamasını kullanarak arkadaşınızla sohbet ettiğinizi düşünün
müzikten bahsediyorsun. İkinizde de music.example.com
PWA yüklü olduğunu düşünün
mobil cihazda. Sevdiğiniz bir parçayı arkadaşınızla paylaşmak isterseniz
https://music.example.com/rick-astley/never-gonna-give-you-up
gibi bir derin bağlantı oluşturabilirsiniz. Bu tarihten itibaren
bağlantı oldukça uzun, music.example.com
geliştiricilerinin web sitesine başka bir
her parça için kısa bir bağlantı (örneğin, https://🎵.example.com/r-a/n-g-g-y-u
) ekleyin.
URL İşleyicileri olarak PWA, music.example.com
gibi uygulamaların kendilerini
https://music.example.com
, https://*.music.example.com
veya
https://🎵.example.com
, bu nedenle
PWA'nın dışından (ör. anlık mesajlaşma uygulamasından veya e-postadan)
bir tarayıcı sekmesinde değil de yüklü PWA'da açın.
URL İşleyicileri olarak PWA iki eklemeden oluşur:
"url_handlers"
web uygulaması manifest üyesi.- Kapsam içi ve kapsam dışı URL ilişkilendirmelerini doğrulamak için kullanılan
web-app-origin-association
dosya biçimi.
URL İşleyici olarak PWA'lar için önerilen kullanım alanları
Bu API'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:
- Müzik veya video akışı siteleri. Bu nedenle, izleme bağlantıları veya oynatma listesi bağlantıları oynatıcı deneyiminde açılır. görebilirsiniz.
- Haberler veya RSS okuyucular, bu şekilde takip edilen veya abone olunan siteler uygulamanın okuyucu modunda açılır.
PWA'lar URL işleyiciler olarak nasıl kullanılır?
about://flags aracılığıyla etkinleştirme
Yerel olarak, kaynak deneme jetonu olmadan URL İşleyicileri olarak PWA'larla denemeler yapmak için
about://flags
bölgesinde #enable-desktop-pwas-url-handling
işareti.
"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ında belirtilmesi gerekir
manifest'ini kullanabilirsiniz. Bu işlem "url_handlers"
üyesi üzerinden gerçekleşir. Benzersiz bir
origin
özelliğine sahip. Bu özellik, eşleşen kaynaklar için bir kalıp olan gerekli bir string
. Bu
kalıpların birden fazla alt alan adı (ör.*
https://*.example.com
) tıklayın. Bu kaynaklarla eşleşen URL'ler bu web uygulaması tarafından işlenebilir. Şema
her zaman https://
olduğu varsayılır ancak bunun açıkça belirtilmesi gerekir.
Aşağıdaki web uygulaması manifestinden alınan alıntıda, girişteki müzik PWA örneğinin
bunu ayarlayabilirsiniz. Joker karakterli ("https://*.music.example.com"
) ikinci giriş,
bu uygulamanın ayrıca https://www.music.example.com
veya olası başka örnekler için de etkinleştirildiğini
https://marketing-activity.music.example.com
.
{
"url_handlers": [
{
"origin": "https://music.example.com"
},
{
"origin": "https://*.music.example.com"
},
{
"origin": "https://🎵.example.com"
}
]
}
web-app-origin-association
dosyası
PWA, ihtiyaç duyduğu bazı URL'lerden farklı bir kaynakta (music.example.com
) bulunduğu için
herkese açık kullanıcı adı (ör. https://🎵.example.com
) içeriyorsa uygulamanın bu diğer kaynakların sahipliğini doğrulaması gerekir. Bu
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ı, adlı bir üyeye sahip bir nesnedir
"web_apps"
Bu üye bir nesne dizisidir ve her nesne, benzersiz bir öğeye ait bir girişi temsil eder
web uygulaması. 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ı dizilerini 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 örnek bir web-app-origin-association
dosyası aşağıda verilmiştir. Google
, 🎵.example.com
kaynağında barındırılır ve
music.example.com
PWA (web uygulaması manifest URL'si ile tanımlanır).
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
Bir URL ne zaman eşleşir?
PWA, aşağıdaki koşulların her ikisi de karşılanırsa işlenmek üzere bir URL ile eşleşir:
- URL,
"url_handlers"
içindeki kaynak dizelerinden biriyle eşleşiyor. - Tarayıcı, her biri ilgili
web-app-origin-association
dosyası aracılığıyla kaynak, bu uygulamanın bu tür bir URL'yi işlemesine izin vermeyi kabul eder.
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ı
/.well-known/
klasörü olması gerekir.
Bunun işe yaraması için dosya adının tam olarak web-app-origin-association
olması gerekir.
Demo
PWA'ları URL İşleyicileri olarak test etmek için tarayıcı işaretini
ve ardından PWA'yı yükleyin
https://mandymsft.github.io/pwa/. Bunun için
web uygulaması manifest dosyasına ait dosyayı
şu URL kalıplarına sahip URL'leri işler: https://mandymsft.github.io
ve
https://luhuangmsft.github.io
. İkincisi farklı bir kaynakta (luhuangmsft.github.io
) olduğu için
mandymsft.github.io
üzerindeki PWA'nın sahipliği kanıtlaması gerekir. Bu işlem
web-app-origin-association
dosya şu konumda barındırılıyor:
https://luhuangmsft.github.io/.well-known/web-app-origin-association.
Gerçekten çalışıp çalışmadığını test etmek için
seçtiğiniz veya macOS'teki Mail uygulaması gibi web tabanlı olmayan bir e-posta istemcisinde görüntülenen bir e-posta adresi. İlgili içeriği oluşturmak için kullanılan
e-posta veya kısa mesajda şu bağlantılardan biri bulunmalıdır: https://mandymsft.github.io
veya
https://luhuangmsft.github.io
. Her ikisi de yüklü PWA'da açılır.
Güvenlik ve izinler
Chromium ekibi, temel ilkeleri kullanarak URL İşleyiciler olarak PWA'ları tasarlayıp uyguladı Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve ergonomi.
Kullanıcı denetimi
Belirli bir URL kalıbı için birden fazla PWA, URL işleyici olarak kaydedilirse kullanıcıdan kalıbı hangi PWA ile işleyeceğini seçmesi gerekir. Şu şekilde başlayan navigasyonlar: tarayıcı sekmesi bu teklif tarafından işlenmez ve açık bir şekilde başlayan gezinmeleri, göz atabilirsiniz.
Şeffaflık
için PWA kurulumu sırasında gerekli ilişkilendirme doğrulaması başarıyla tamamlanamazsa herhangi bir nedenle tarayıcı, uygulamayı etkilenen URL'ler için etkin bir URL işleyici olarak kaydetmez. URL işleyiciler, doğru şekilde uygulanmazsa web sitelerinin trafiğini ele geçirmek için kullanılabilir. Bu nedenle uygulama ilişkilendirme mekanizması, bu şemanın önemli bir parçasıdır.
Platforma özgü uygulamalar, yüklü uygulamaları numaralandırmak için işletim sistemi API'lerini zaten kullanabiliyor.
daha ayrıntılı şekilde hazırlanır. Örneğin, Windows'daki uygulamalar
FindAppUriHandlersAsync
URL işleyicilerini numaralandırma API'si. PWA'lar Windows'da işletim sistemi düzeyinde URL işleyiciler olarak kaydedilirse
diğer uygulamalar tarafından görülebilir.
İzin kalıcılığı
Kaynaklar, PWA'larla olan ilişkilendirmelerini istediği zaman değiştirebilir. Tarayıcılar düzenli olarak yüklü web uygulamalarının ilişkilendirmelerini tekrar doğrular. URL işleyici kaydı yeniden doğrulanamazsa Çünkü ilişkilendirme verileri değişmişse veya artık kullanılamadığından tarayıcı, kayıt işlemleri.
Geri bildirim
Chromium ekibi, URL işleyici olarak PWA ile ilgili deneyimleriniz hakkında bilgi almak istiyor.
Bize API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi neden olabilir.
Uygulamayla ilgili bir sorunu bildirin
Chromium'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın.
oluşturmaya ilişkin basit talimatları uygulayın ve Bileşenler alanına UI>Browser>WebAppInstalls
yazın.
seçin. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.
API'ye desteğinizi gösterin
URL İşleyicileri olarak PWA'ları kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.
Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin
#URLHandlers
ve izin
onu nerede ve nasıl kullandığınızı bilmemiz gerekir.
Faydalı bağlantılar
- Herkese açık açıklayıcı
- Demo | Demo kaynağı
- Chromium izleme hatası
- ChromeStatus.com girişi
- Blink Bileşeni:
UI>Browser>WebAppInstalls
- TAG İncelemesi
- Microsoft dokümanları
Teşekkür
URL işleyici olarak PWA'lar, Microsoft Edge ekibinden Lu Huang ve Mandy Chen tarafından belirlenmiş ve uygulanmıştır. Bu makale tarafından incelendi Joe Potpur. Bryson Hammer tarafından oluşturulan hero resim Lansmanı kaldırın.