URL İşleyicileri olarak PWA'lar

Daha entegre bir deneyim için yüklü PWA'ların URL'leri işlemesine izin verin.

Thomas Steiner

URL işleyici olarak PWA'lar nedir?

macOS'teki Mesajlar gibi bir anlık mesajlaşma uygulamasını kullanarak bir arkadaşınızla müzik hakkında sohbet ettiğinizi düşünün. Ayrıca, her ikinizin de cihazlarınızda music.example.com PWA'nın yüklü olduğunu varsayalım. Arkadaşınızın da dinlemesi için en sevdiğiniz parçayı 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çaya https://🎵.example.com/r-a/n-g-g-y-u gibi ek bir kısa bağlantı eklemeye karar vermiş olabilir.

URL İşleyici 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şleyici olarak kaydetmesine olanak tanır. Böylece, PWA dışından (ör. bir anlık mesajlaşma uygulamasından veya e-posta istemcisinden) gelen bağlantılar tarayıcı sekmesi yerine yüklü PWA'da açılır.

URL İşleyici 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 işleyici olarak PWA'lar için önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:

  • Dijital yayın siteleri veya video dijital yayın siteleri. Böylece parça bağlantıları veya oynatma listesi bağlantıları, uygulamanın oynatıcı deneyiminde açılır.
  • Takip edilen veya abone olunan sitelerin uygulamanın okuyucu modunda açılması için haber veya RSS okuyucular.

PWA'ları URL işleyici olarak kullanma

about://flags ile etkinleştirme

PWA'ları URL işleyici olarak yerel olarak denemek için kaynak denemesi jetonu olmadan 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ı manifest dosyasında belirtilmesi gerekir. Bu işlem, "url_handlers" üyesi aracılığıyla gerçekleşir. origin özelliğine sahip bir nesne dizisi kabul eder. Bu özellik, kaynakları eşleştirmek için kullanılan bir kalıp olan zorunlu bir string değeridir. Bu kalıpların, birden fazla alt alan adını (ör. https://*.example.com) dahil etmek için joker karakter (*) ön eki kullanması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 açıkça belirtilmesi gerekir.

Aşağıdaki web uygulaması manifesti alıntısında, giriş paragrafındaki müzik PWA örneğinin bunu nasıl ayarlayabileceği gösterilmektedir. Joker karakter ("https://*.music.example.com") içeren ikinci giriş, uygulamanın https://www.music.example.com veya https://marketing-activity.music.example.com gibi diğer olası ö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 URL'lerden bazılarından (ör. https://🎵.example.com) farklı bir kaynakta (music.example.com) bulunduğundan 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ı bir üyeye sahip bir nesnedir. Bu üye, bir nesne dizisidir ve her nesne, benzersiz bir web uygulaması için girişi temsil eder. Her nesne şunları içerir:

Alan Açıklama Tür Varsayılan
"manifest" (Zorunlu) İlişkili PWA'nın web uygulaması manifestinin URL dizesi string Yok
"details" (İsteğe bağlı) Dahil edilen ve hariç tutulan URL kalıplarının 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. 🎵.example.com kaynağında barındırılır ve web uygulaması manifest URL'si ile tanımlanan music.example.com PWA ile ilişki kurar.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

URL ne zaman eşleşir?

Aşağıdaki koşulların ikisi de karşılanıyorsa PWA, işleme için bir URL ile eşleşir:

  • URL, "url_handlers" politikasındaki kaynak dizelerinden biriyle eşleşiyorsa.
  • Tarayıcı, her kaynağın bu uygulamanın böyle bir URL'yi işlemesine izin verdiğini ilgili web-app-origin-association dosyasını kullanarak doğrulayabilir.

web-app-origin-association dosya keşfi hakkında

Tarayıcının web-app-origin-association dosyasını bulabilmesi için geliştiricilerin web-app-origin-association dosyasını uygulamanın kök dizinindeki /.well-known/ klasörüne yerleştirmesi gerekir. Bunun işe yaraması için dosya adının tam olarak web-app-origin-association olması gerekir.

Demo

PWA'ları URL işleyici olarak test etmek için tarayıcı işaretini açıklandığı şekilde ayarladığınızdan emin olun ve ardından PWA'yı https://mandymsft.github.io/pwa/ adresinden yükleyin. Web uygulaması manifestine bakarak şu URL kalıplarına sahip URL'leri işlediğini görebilirsiniz: https://mandymsft.github.io ve https://luhuangmsft.github.io. İkincisi, PWA'dan farklı bir kaynakta (luhuangmsft.github.io) olduğundan mandymsft.github.io üzerindeki PWA'nın sahipliğini 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ı kullanılarak yapılır.

Çalıştığını test etmek için, seçtiğiniz bir anlık mesajlaşma uygulamasını veya macOS'teki Mail gibi web tabanlı olmayan bir e-posta istemcisinde görüntülenen bir e-postayı kullanarak kendinize test mesajı gönderin. E-posta veya kısa mesajda https://mandymsft.github.io ya da https://luhuangmsft.github.io bağlantılarından biri bulunmalıdır. İkisi de yüklü PWA'da açılmalıdı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ır.

Güvenlik ve izinler

Chromium ekibi, PWA'ları URL işleyiciler olarak tasarlayıp uygularken Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan temel ilkeleri (kullanıcı kontrolü, şeffaflık ve ergonomi dahil) kullandı.

Kullanıcı denetimi

Belirli bir URL kalıbı için URL işleyici olarak birden fazla PWA kayıtlıysa kullanıcıdan, kalıbı hangi PWA ile işlemek istediğini seçmesi istenir. Tarayıcı sekmesinde başlayan gezinmeler bu teklif kapsamında ele alınmaz. Teklif, açıkça tarayıcı dışında başlayan gezinmeleri hedeflemektedir.

Şeffaflık

PWA yüklemesi sırasında gerekli ilişkilendirme doğrulaması herhangi bir nedenle başarıyla tamamlanamazsa tarayıcı, uygulamayı etkilenen URL'ler için etkin bir URL işleyici olarak kaydetmez. URL işleyiciler, yanlış uygulanırsa 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 özel uygulamalar, kullanıcının sisteminde yüklü uygulamaları listelemek için işletim sistemi API'lerini zaten kullanabilir. Örneğin, Windows'daki uygulamalar URL işleyicileri listelemek 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 olan ilişkilendirmelerini istediği zaman değiştirebilir. Tarayıcılar, yüklü web uygulamalarının ilişkilendirmelerini düzenli olarak yeniden doğrulamaya çalışır. İlişkilendirme verileri değiştiği veya artık mevcut olmadığı için URL işleyici kaydı yeniden doğrulanamazsa tarayıcı, kayıtları kaldırır.

Geri bildirim

Chromium ekibi, URL işleyici olarak PWA'larla ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin

API'de beklendiği gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorun bildirme

Chromium'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinde bir hata bildirin. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturma talimatlarını eklediğinizden ve Bileşenler kutusuna UI>Browser>WebAppInstalls yazdığınızdan emin olun.

API'yi desteklediğinizi gösterme

PWA'ları URL işleyici olarak kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçilerine bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

#URLHandlers hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Onaylar

URL İşleyici olarak PWA'lar, Microsoft Edge ekibinden Lu Huang ve Mandy Chen tarafından belirtilmiş ve uygulanmıştır. Bu belge Joe Medley tarafından incelenmiştir.