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

Daha entegre bir deneyim için yüklü PWA'ların belirli bir protokol kullanan bağlantıları yönetmesine 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'dan itibaren kullanılabilir.

Şemalar (diğer adıyla protokoller) hakkında bilgi

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

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

Tekdüzen Kaynak Konum Belirleyici (URL) terimi, bir kaynağı tanımlamanın yanı sıra birincil erişim mekanizmasını (ör. ağ konumu) açıklayarak kaynağın yerini belirleme olanağı sağlayan URI alt kümesini ifade eder.

registerProtocolHandler() yöntemi hakkında bilgi

Yalnızca güvenli içerik Navigator yöntemi registerProtocolHandler() sitelerin belirli URL şemalarını açma veya işleme kapasitelerini kaydettirmelerine 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 URL'nin yerine geçecek bir yer tutucu olarak %s içermelidir.

Şema, güvenli listedeki şemalardan (ör. mailto, bitcoin veya magnet) biri olmalı veya web+ ile başlamalı ve web+ ön ekinden sonra en az bir ya da daha fazla küçük ASCII harfi gelmelidir (ör. web+coffee).

Bunu daha net bir şekilde açıklamak için akışa dair somut bir örnek verilmiştir:

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

Protokol işlemenin ne hakkında olduğu

Mevcut PWA'lar için URL protokol işleyici kaydı mekanizması, manifest aracılığıyla PWA yüklemesinin bir parçası olarak protokol işleyici kaydı sunmaktır. Bir PWA protokol işleyici olarak kaydedildikten sonra, kullanıcı bir tarayıcıdan veya platforma özel bir uygulamadan mailto, bitcoin veya web+music gibi belirli bir şemaya sahip bir köprü bağlantısını tıkladığında kayıtlı PWA açılır ve URL'yi alır. Hem önerilen manifest tabanlı kayıt işleminin hem de geleneksel registerProtocolHandler()'ün pratikte çok benzer roller oynadığını ve yine de tamamlayıcı kullanıcı deneyimleri sunduğunu belirtmek önemlidir:

• Benzerlikler arasında, kaydedilmesine izin verilen şema listesinin yanı sıra parametrelerin adı ve biçimi gibi konularla ilgili şartlar yer alır.
• Manifest tabanlı kayıttaki farklar küçük olsa da PWA kullanıcılarının deneyimini iyileştirmek için yararlı 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'sında, dokümanda bulunan kullanıcı web+presentations://deck2378465 gibi bir sunu bağlantısıyla karşılaşır. Kullanıcı bağlantıyı tıkladığında sunu PWA'sı otomatik olarak doğru kapsamda açılır ve slayt gösterisini 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 açılır ve indirme işlemi başlar.
• Kullanıcıda müzik akışı PWA'sı yüklü olmalıdı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 için URL protokol işleyici kaydını kullanma

URL protokol işleyici kaydı için API, navigator.registerProtocolHandler()'e yakın bir şekilde modellenmiştir. Tam bu kez bilgiler, "protocol" ve "url" adlı gerekli iki anahtarla bir nesne dizisi alan "protocol_handlers" adlı yeni bir mülkte web uygulaması manifesti aracılığıyla bildirimli olarak aktarılır. Aşağıdaki kod snippet'inde, web+tea ve web+coffee öğelerinin nasıl kaydedileceği gösterilmektedir. Değerler, çıkış karakterli URL için gerekli %s yer tutucusuyla birlikte işleyicinin URL'sini içeren dizelerdir.

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

Aynı protokol için kaydettirilen birden fazla uygulama

Birden fazla uygulama kendilerini aynı şema (ör. mailto protokolü) için 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ı uygulamanın birden fazla protokole kaydolması

Yukarıdaki kod örneğinde görebileceğiniz gibi, aynı uygulama kendisini 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 vardır:

• Yeni işleyiciler ekleyen bir güncelleme, işleyici kaydını tetikler (uygulama yükleme işleminden ayrıdır).
• İşleyicileri kaldıran bir güncelleme, işleyicinin kaydını iptal eder (uygulama kaldırma işleminden ayrıdır).

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

Uygulama > Manifest bölmesinden Protokol işleyicileri bölümüne gidin. Mevcut tüm protokolleri buradan görüntüleyip test edebilirsiniz.

Örneğin, bu demo PWA'yı yükleyin. Protokol işleyiciler bölümüne "americano" yazın ve Test Protocol'u (Protokol test et) tıklayarak PWA'da kahve sayfasını açın.

Demo

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

1. https://protocol-handler.glitch.me/ adresine gidin, PWA'yı yükleyin ve yükleme işleminden sonra uygulamayı yeniden yükleyin. Tarayıcı artık PWA'yı, işletim sistemiyle web+coffee protokolünün işleyicisi 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. İlk veya ikinciyi (latte macchiato ya da americano) tıklayın. Tarayıcı, size bir istem göstererek uygulamanın web+coffee protokolü için bir protokol işleyicisi olmasını kabul edip etmediğinizi 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'da Protokol işleyiciyi kaydet düğmesini tıklayın. Ardından tarayıcı sekmesinde üçüncü bağlantıyı (chai) tıklayın. Bu durumda da bir istem gösterilir ancak PWA, tarayıcı penceresinde değil, sekmede açılır.
4. Windows'da Skype gibi platforma özgü bir uygulamada kendinize <a href="web+coffee://americano">Americano</a> gibi bağlantı içeren bir mesaj gönderin ve bu mesajı tıklayın. Bu işlem, yüklü PWA'yı da açar.

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

PWA kurulumu bağlamın güvenli olmasını gerektirdiğinden, protokol işleme bu kısıtlamayı devralır. Kayıtlı protokol işleyicileri listesi, hiçbir şekilde web'e 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 tarama bağlamlarında kullanılabilir ancak örneğin bir iframe'in URL'si olarak kullanılamaz.

Protokollerin izin verilenler listesi

registerProtocolHandler()'te olduğu gibi, uygulamaların işleyebilmek için kaydettirebileceği protokollerin izin verilenler listesi vardır.

İzin istemi

PWA'nın çağrılan bir protokol nedeniyle ilk kez başlatılmasında kullanıcıya izin iletişim kutusu gösterilir. Bu iletişim kutusunda uygulamanın adı ve kaynağı gösterilir ve kullanıcıdan uygulamanın protokoldeki bağlantıları işlemesine izin verilip verilmediğini sorar. Kullanıcı izin iletişim kutusunu reddederse kayıtlı protokol işleyici işletim sistemi tarafından yoksayılır. Protokol işleyicinin kaydını iptal etmek için kullanıcının, işleyiciyi 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 için URL protokol işleyici kaydıyla ilgili deneyimleriniz hakkında bilgi almak istiyor.

API tasarımı hakkında bilgi verin

API ile ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? 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 bir spesifikasyon sorunu bildirin veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorunları bildirme

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 için URL protokol işleyici kaydını 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.

Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın. #ProtocolHandler hashtag'ini kullanarak @ChromiumDev hesabına bir Tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantı

• Açıklayıcı
• Özellik taslağı
• GitHub
• ChromeStatus
• Chromium hatası
• TAG incelemesi
• Discourse

Teşekkür ederiz

PWA'lar için URL protokol işleyici kaydı, Microsoft Edge ekibinden Fabio Rocha, Diego González, Connor Moody ve Samuel Tang tarafından uygulanmış ve belirtilmiştir. Bu makale Joe Medley ve Fabio Rocha tarafından incelenmiştir. Unsplash'taki JJ Ying tarafından oluşturulan hero resim.