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 İş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:

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

Her "details" nesnesi şunları içerir:

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.