URL İşleyicileri olarak PWA'lar

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:

  1. "url_handlers" web uygulaması manifest üyesi.
  2. 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.

Yüklü demo PWA'nın yanındaki Windows Skype anlık mesajlaşma uygulaması, Skype sohbet mesajında işlenen bir bağlantı tıklandıktan sonra bağımsız modda açılıyor.

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

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.