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ı kullanarak bir arkadaşınızla sohbet ettiğinizi ve müzikten bahsettiğinizi varsayalım. Ayrıca, her iki cihazınızda da music.example.com PWA'nın yüklü olduğunu varsayalım. Arkadaşınızın keyfini çıkarması 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'ün 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 işleyici olarak PWA, music.example.com gibi uygulamaların kendilerini https://music.example.com, https://*.music.example.com veya https://🎵.example.com gibi kalıplarla eşleşen URL'ler için URL işleyicisi olarak kaydettirmesine olanak tanır. Böylece, PWA'nın dışındaki bağlantılar (ör. bir anlık mesajlaşma uygulamasından veya e-posta istemciden gelen bağlantılar) tarayıcı sekmesinde değil, yüklü PWA'da açılır.

URL işleyicisi olarak PWA, iki ek bileşenden oluşur:

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

• Müzik veya video akışı siteleri; izleme bağlantıları veya oynatma listesi bağlantıları, uygulamanın oynatıcı deneyiminde açılır.
• Takip edilen veya abone olunan haber veya RSS okuyucuları, uygulamanın okuyucu modunda açılır.

PWA'ları URL işleyici olarak kullanma

about://flags üzerinden etkinleştirme

URL işleyici olarak yerel olarak PWA'ları denemek için kaynak deneme jetonu olmadan about://flags'te #enable-desktop-pwas-url-handling işaretini etkinleştirin.

"url_handlers" web uygulaması manifesti üyesi

Yüklü bir PWA'yı URL kalıplarıyla ilişkilendirmek için bu kalıpların web uygulaması manifest'inde belirtilmesi gerekir. Bu işlem, "url_handlers" üyesi aracılığıyla gerçekleşir. Bir origin mülküne sahip bir nesne dizisi kabul eder. Bu origin, kaynak eşleştirmek için kullanılan bir kalıp olan zorunlu bir string'tır. Bu kalıpların, birden fazla alt alan adı (https://*.example.com gibi) içermesi için joker karakter (*) önekine sahip olması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 bu ayarı nasıl yapabileceği gösterilmektedir. Joker karakter içeren ikinci giriş ("https://*.music.example.com"), 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.music.example.com https://🎵.example.com) 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ı, "web_apps" adlı bir üyeye sahip bir nesnedir. Bu üye bir nesne dizisidir ve her nesne, benzersiz bir web uygulamasına ait 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 örnek bir web-app-origin-association dosyası aşağıda verilmiştir. 🎵.example.com kaynağında barındırılır ve web uygulaması manifesti URL'si ile 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şılanırsa PWA, işlenmek üzere bir URL ile eşleşir:

• URL, "url_handlers" içindeki kaynak dizelerinden biriyle eşleşir.
• 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 dosyası 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ı uygulamanın kökündeki /.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 yukarıda açıklandığı şekilde tarayıcı işaretini ayarladığınızdan ve ardından PWA'yı https://mandymsft.github.io/pwa/ adresinden yüklediğinizden emin olun. Web uygulaması manifest dosyasına bakarak, aşağıdaki 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) bulunduğundan mandymsft.github.io'daki 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.

Gerçekten çalışıp çalışmadığını test etmek için, istediğ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 bir test mesajı 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ı kontrolü, şeffaflık ve ergonomi gibi Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme başlıklı makalede tanımlanan temel ilkeleri kullanarak PWA'ları URL işleyicileri olarak tasarlayıp uyguladı.

Kullanıcı denetimi

Belirli bir URL kalıbı için URL işleyici olarak birden fazla PWA kaydedilirse kullanıcıdan kalıbı hangi PWA ile (varsa) ele alacağını seçmesi istenir. Tarayıcı sekmesinde başlayan gezinmeler bu teklif tarafından ele alınmaz. Bu teklif, tarayıcının dışında başlayan gezinmeleri açıkça hedefler.

Şeffaflık

PWA yüklemesi sırasında herhangi bir nedenle gerekli ilişkilendirme doğrulaması başarıyla tamamlanamazsa tarayıcı, uygulamayı etkilenen URL'ler için etkin bir URL işleyici olarak kaydetmez. Doğru şekilde uygulanmazsa URL işleyicileri, web sitelerinin trafiğini ele geçirmek için kullanılabilir. Bu nedenle uygulama ilişkilendirme mekanizması, planı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'lerini zaten kullanabilir. Örneğin, Windows'daki uygulamalar URL işleyicilerini numaralandırmak için FindAppUriHandlersAsync API'sini kullanabilir. PWA'lar Windows'da işletim sistemi düzeyinde URL işleyiciler olarak kaydedilirse varlıkları diğer uygulamalar tarafından görülebilir.

İzin kalıcılığı

Bir kaynak, PWA'larla olan ilişkilendirmelerini dilediğinde değiştirebilir. Tarayıcılar, yüklü web uygulamalarının ilişkilendirmelerini düzenli olarak yeniden doğrulamaya çalışır. Bir URL işleyici kaydı, ilişkilendirme verileri değiştiği veya artık mevcut olmadığı için 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 beklediğiniz gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, hatayı yeniden oluşturmayla ilgili basit talimatlar verin ve Bileşenler kutusuna UI>Browser>WebAppInstalls yazın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

API'yi destekleme

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çi firmalarına 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

• Herkese açık açıklama
• Demo | Demo kaynağı
• Chromium izleme hatası
• ChromeStatus.com girişi
• Blink Bileşeni: UI>Browser>WebAppInstalls
• TAG İncelemesi
• Microsoft dokümanları

Teşekkür ederiz

URL işleyicisi olarak PWA'lar, Microsoft Edge ekibinden Lu Huang ve Mandy Chen tarafından tanımlanıp uygulandı. Bu makale Joe Medley tarafından incelenmiştir. Unsplash'taki Bryson Hammer tarafından oluşturulan hero resim.