PWA'lar (Progresif Web Uygulaması) için URL protokol işleyici kaydı

Yüklü PWA'ların, daha entegre bir deneyim için belirli bir protokol kullanan bağlantıları işlemesine izin verin.

Thomas Steiner

Başarı: PWA'lar için URL protokol işleyici kaydı, özellikler projesinin bir parçasıdır ve Chrome 96'da kullanılabilir.

Şemalar (protokoller olarak da bilinir) hakkında genel bilgiler

Tekdüzen Kaynak Tanımlayıcı (URI), bir soyut veya fiziksel kaynağı tanımlayan kompakt bir karakter dizisidir. Her URI, söz konusu şema içindeki tanımlayıcıları atamaya ilişkin bir spesifikasyonu ifade eden bir şema adıyla başlar. URI söz dizimi, birleşik ve genişletilebilir bir adlandırma sistemidir. Bu sistemde her şemanın spesifikasyonu, ilgili şemayı kullanan tanımlayıcıların söz dizimini ve anlamını daha da kısıtlayabilir. Şemalar protokoller olarak da bilinir. Aşağıda bazı şema örnekleri görebilirsiniz.

tel:[phone]
mailto:[e-mail]
news:comp.infosystems.www.servers.unix
https://web.dev/

Tek Tip Kaynak Konum Belirleyicisi (URL) terimi, bir kaynağı tanımlamanın yanı sıra birincil erişim mekanizmasını (ör. ağ konumu) açıklayarak kaynağın yerini belirlemek için bir yol sağlayan URI'ların alt kümesini ifade eder.

registerProtocolHandler() yönteminin arka planı

Yalnızca güvenli içerik Navigator yöntemi registerProtocolHandler() sitelerin belirli URL şemalarını açma veya işleme becerilerini kaydetmesine olanak tanır. Bu nedenle, sitelerin yöntemi şu şekilde çağırması gerekir: navigator.registerProtocolHandler(scheme, url). Bu iki parametre aşağıdaki gibi tanımlanır:

• scheme: Sitenin işlemek istediği protokolü içeren bir dize.
• url: İşleyicinin URL'sini içeren bir dize. Bu URL, işlenecek çıkış karakterli URL ile değiştirilecek bir yer tutucu olarak %s içermelidir.

Şema, güvenli listedeki şemalardan biri (örneğin, mailto, bitcoin veya magnet) olmalı veya web+ ile başlamalı, ardından web+ önekinden sonra en az bir veya daha fazla küçük ASCII harf ile gelmelidir (ör. web+coffee).

Bunu daha net bir şekilde ifade etmek için, aşağıda akışa dair somut bir örnek verilmiştir:

1. Kullanıcı https://coffeeshop.example.com/ adresinde şu çağrıyı yapan bir siteyi ziyaret eder: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
2. Daha sonraki bir noktada, https://randomsite.example.com/ adresini ziyaret ederken kullanıcı <a href="web+coffee:latte-macchiato">All about latte macchiato</a> gibi bir bağlantıyı tıklar.
3. Bu işlem, tarayıcının şu URL'ye gitmesine neden olur: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. URL'nin kodu çözülmüş arama dizesi, ardından ?type=web+coffee://latte-macchiato değerini okur.

Protokol işleme ne anlama gelir?

Mevcut PWA'lar için URL protokol işleyici kaydı mekanizması, manifest dosyası aracılığıyla PWA yüklemesinin bir parçası olarak protokol işleyici kaydı sunmakla ilgilidir. PWA'yı protokol işleyici olarak kaydettikten sonra, kullanıcı bir tarayıcıdan veya platforma özel uygulamadan mailto, bitcoin ya da web+music gibi belirli bir şemaya sahip bir köprüyü tıkladığında kayıtlı PWA açılır ve URL'yi alır. Hem önerilen manifest tabanlı kaydın hem de geleneksel registerProtocolHandler() yönteminin uygulamada çok benzer roller oynadığını ve tamamlayıcı kullanıcı deneyimlerine olanak tanımaya devam ettiğini belirtmek isteriz:

• Benzerlikler arasında, kaydedilmesine izin verilen şema listesi, parametrelerin adı ve biçimi vb. konulardaki gereksinimler yer alır.
• Manifeste dayalı kayıttaki farklılıklar pek göze çarpmamakla birlikte PWA (Progresif Web Uygulaması) kullanıcılarının deneyimini geliştirmek için faydalı olabilir. Örneğin, manifest tabanlı PWA kaydı, kullanıcı tarafından başlatılan PWA yüklemesi dışında ek bir kullanıcı işlemi gerektirmeyebilir.

Kullanım alanları

• Kelime işleme PWA'da, kullanıcı bir dokümandaki web+presentations://deck2378465 gibi bir sununun bağlantısıyla karşılaşır. Kullanıcı bağlantıyı tıkladığında PWA (Progresif Web Uygulaması) sunusu otomatik olarak doğru kapsamda açılır ve slayt grubunu gösterir.
• Platforma özel bir sohbet uygulamasında, sohbet mesajındaki kullanıcıya bir magnet URL'sinin bağlantısı gönderilir. Bağlantıyı tıkladığınızda, yüklü bir torrent PWA'sı başlatılır ve indirme işlemi başlar.
• Kullanıcıda yüklü bir müzik akışı PWA'sı vardır. Bir arkadaşınız web+music://songid=1234&time=0:13 gibi bir şarkının bağlantısını paylaştığında ve kullanıcı bunu tıkladığında, müzik akışı PWA'sı otomatik olarak bağımsız bir pencerede başlatılır.

PWA'lar (Progresif Web Uygulaması) için URL protokol işleyici kaydı nasıl kullanılır?

URL protokol işleyici kaydı için API, navigator.registerProtocolHandler() üzerinde yakından modellenmiştir. Bu kez bilgiler, iki zorunlu "protocol" ve "url" anahtarıyla bir nesne dizisi alan "protocol_handlers" adlı yeni mülke web uygulaması manifest dosyası aracılığıyla bildirimli şekilde iletilir. Aşağıdaki kod snippet'inde web+tea ve web+coffee öğelerinin nasıl kaydedileceği gösterilmektedir. Değerler, işleyicinin URL'sini ve çıkış karakterli URL için gerekli %s yer tutucusunu içeren dizelerdir.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Aynı protokole kaydolan birden fazla uygulama

Birden fazla uygulama kendini aynı şema için (ör. mailto protokolü) işleyici olarak kaydederse işletim sistemi, kullanıcıya bir seçici gösterir ve kayıtlı işleyicilerden hangisinin kullanılacağına karar vermesine olanak tanır.

Aynı uygulama birden fazla protokole kayıt yapıyor

Yukarıdaki kod örneğinde görebileceğiniz gibi, aynı uygulama kendini birden çok protokol için kaydedebilir.

Uygulama güncellemeleri ve işleyici kaydı

İşleyici kayıtları, uygulama tarafından sağlanan en son manifest sürümüyle senkronize edilir. İki durum söz konusudur:

• Yeni işleyiciler ekleyen bir güncelleme, işleyici kaydını tetikler (uygulama yüklemesinden ayrı olarak).
• İşleyicileri kaldıran bir güncelleme, işleyici kaydını iptal etmeyi tetikler (uygulamayı kaldırma işleminden ayrı olarak).

Geliştirici Araçları'nda protokol işleyici hata ayıklaması

Application (Uygulama) > Manifest (Manifest) bölmesindeki Protokol İşleyicileri bölümüne gidin. Mevcut tüm protokolleri burada görüntüleyebilir ve test edebilirsiniz.

Örneğin, bu PWA demosunu yükleyin. Protokol İşleyiciler bölümüne "americano" yazın ve PWA'da kahve sayfasını açmak için Protokolü test et'i tıklayın.

Demo

Glitch'te PWA'lar için URL protokol işleyici kaydının demosunu görebilirsiniz.

1. https://protocol-handler.glitch.me/ adresine gidin, PWA'yı yükleyin ve yüklemenin ardından uygulamayı yeniden yükleyin. Tarayıcı artık PWA'yı, işletim sistemiyle web+coffee protokolü için işleyici olarak kaydetmiştir.
2. Yüklü PWA penceresinde https://protocol-handler-link.glitch.me/ bağlantısını tıklayın. Bu işlem, üç bağlantı içeren yeni bir tarayıcı sekmesi açar. Birincisini veya ikincisini (latte macchiato veya americano) tıklayın. Tarayıcı şimdi size bir istem gösterir ve uygulamanın web+coffee protokolü için protokol işleyicisi olmasının uygun olup olmadığını sorar. Kabul ederseniz PWA açılır ve seçilen kahveyi gösterir.
3. navigator.registerProtocolHandler() kullanan geleneksel akışla karşılaştırmak için PWA'daki Protokol işleyiciyi kaydet düğmesini tıklayın. Ardından, tarayıcı sekmesinde üçüncü bağlantıyı (chai) tıklayın. Benzer şekilde, bir istem gösterilir ancak PWA'yı tarayıcı penceresinde değil, bir sekmede açar.
4. Windows'da Skype gibi platforma özgü bir uygulamada <a href="web+coffee://americano">Americano</a> gibi bir bağlantıyı kullanarak kendinize bir mesaj gönderin ve bu bağlantıyı tıklayın. Aynı şekilde yüklü PWA da açılır.

Güvenlikle ilgili olarak göz önünde bulundurulması gerekenler

PWA yüklemesi bağlamın güvenli olmasını gerektirdiğinden protokol işleme bu kısıtlamayı devralır. Kayıtlı protokol işleyicileri listesi, web'e hiçbir şekilde sunulmaz. Bu nedenle, dijital parmak izi vektörü olarak kullanılamaz.

Kullanıcı tarafından başlatılmayan gezinme denemeleri

Kullanıcı tarafından başlatılmayan, ancak programatik olan gezinme denemeleri uygulamaları açmayabilir. Özel protokol URL'si, yalnızca üst düzey göz atma bağlamlarında kullanılabilir, ancak örneğin bir iframe'in URL'si olarak kullanılamaz.

İzin verilen protokoller listesi

registerProtocolHandler()'da olduğu gibi uygulamaların işlemesi için kaydolabileceği bir protokol izin verilenler listesi vardır.

İzin istemi

Çağrılan bir protokol nedeniyle PWA'nın ilk kez başlatılmasında kullanıcıya bir izin iletişim kutusu gösterilir. Bu iletişim kutusunda uygulamanın adı ile kaynağı görüntülenir ve kullanıcıya, uygulamanın protokoldeki bağlantıları işlemesine izin verilip verilmediği sorulur. Kullanıcı izin iletişim kutusunu reddederse kayıtlı protokol işleyici, işletim sistemi tarafından yok sayılır. Protokol işleyicinin kaydını iptal etmek için kullanıcının, kendisini kaydeden PWA'yı kaldırması gerekir. Kullanıcı "Seçimimi hatırla"yı ve "İzin verme"yi seçerse tarayıcı protokol işleyicinin kaydını da siler.

Geri bildirim

Chromium ekibi, PWA'lar (Progresif Web Uygulaması) için URL protokolü işleyici kaydıyla ilgili deneyimlerinizi öğrenmek istemektedir.

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 (Progresif Web Uygulaması) için URL protokol işleyici kaydı kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine, bu özellikleri desteklemenin ne kadar kritik olduğunu gösterir.

Bu bilgiyi nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın. #ProtocolHandler hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantı

• Açıklayıcı
• Spesifikasyon taslağı
• GitHub
• ChromeStatus
• Chromium hatası
• TAG incelemesi
• Söylem

Bildirimler

PWA'lar için URL protokol işleyici kaydı, Microsoft Edge ekibinden Fabio Rocha, Diego González, Connor Moody ve Samuel Tang tarafından uygulanıp belirlenmiştir. Bu makale, Joe Medley ve Fabio Rocha tarafından incelendi. JJ Ying'in Unsplash'teki lokomotif resmi.