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ı yönetmesine izin verin.

Thomas Steiner

Başarı: PWA'lar için URL protokol işleyici kaydı özellikler projesi ve Chrome 96'dan itibaren mevcuttur.

Şemalarla (protokol olarak da bilinir) ilgili arka plan bilgileri

Tekdüzen Kaynak Tanımlayıcısı (URI), bir soyut ya da fiziksel kaynak olabilir. Her URI şema adı bu şemadaki tanımlayıcıları atamak. Bu nedenle, URI söz dizimi birleşik ve genişletilebilir her şemanın spesifikasyonunun söz dizimini ve anlamını daha da kısıtlayabileceği bir adlandırma sistemi bu şemayı kullanan tanımlayıcılar. Şemalar, protokoller olarak da bilinir. Şunlara ilişkin bazı örnekler görebilirsiniz: daha fazla bilgi edineceksiniz.

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

Tekdüzen Kaynak Konum Belirleyicisi (URL) terimi, bir kaynağı tanımlama, birincil erişimini açıklayarak kaynağın yerinin belirlenmesi için bir yöntem sağlama mekanizmasını (ör. ağ konumu) kontrol 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 yeteneklerini kaydetmesine olanak tanır. Bu nedenle, sitelerin yöntemi şu şekilde çağırın: navigator.registerProtocolHandler(scheme, url). Bu iki parametre şu şekilde tanımlanır:

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

Şema, şunlardan biri olmalıdır: güvenli listeye eklenmiş şemalar (örneğin, mailto, bitcoin veya magnet) ya da web+ ile başlayıp en az bir veya web+ ön ekinden sonra daha küçük ASCII harfleri kullanılabilir. Örneğin, web+coffee.

Bu durumu daha anlaşılır kılmak için akışla ilgili somut bir örnek verelim:

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 https://randomsite.example.com/ ziyaret edilirken kullanıcı bir bağlantıyı tıklar (ör. <a href="web+coffee:latte-macchiato">All about latte macchiato</a>).
3. Bu, tarayıcının aşağıdaki URL'ye gitmesine neden olur: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato Arama URL'nin kodu çözülmüş dizesi ve ?type=web+coffee://latte-macchiato değeri okunur.

Protokol işleme konusu

Mevcut PWA'lar için URL protokol işleyici kaydı mekanizması, protokol işleyici sunmakla ilgilidir. manifesti aracılığıyla PWA kurulumunun bir parçası olarak kabul edildi. PWA'yı protokol işleyici; kullanıcı mailto gibi belirli bir şemaya sahip bir köprüyü tıkladığında bitcoin veya bir tarayıcıdan ya da platforma özgü bir uygulamadan web+music ayarlanırsa kayıtlı PWA açılır ve URL'yi alır. Hem önerilen manifest tabanlı kaydın hem de geleneksel registerProtocolHandler() pratikte çok benzer roller oynar. kullanıcılara yönelik aşağıdaki olanaklardan bahsedeceğiz:

• Benzerlikler arasında, kaydedilmesine izin verilen şemaların listesiyle ilgili şartlar ve parametrelerin adı ve biçimi vb.
• Manifest temelli kayıttaki farklar çok göze çarpmasa da deneyim sahibi olacaksınız. Örneğin, manifest tabanlı PWA kaydı kullanıcı tarafından başlatılan PWA yüklemesi dışında ek kullanıcı işlemi.

Kullanım alanları

• Kelime işlemci PWA'da, dokümandaki kullanıcı şuna benzer bir sunuya giden bir bağlantıyla karşılaşır: web+presentations://deck2378465 Kullanıcı bağlantıyı tıkladığında, PWA (Progresif Web Uygulaması) sunusu otomatik olarak doğru kapsamda açılır ve slayt kümesini gösterir.
• Platforma özel bir sohbet uygulamasında, sohbet mesajındaki kullanıcı magnet URL'sinin bağlantısını alır. 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 aşağıdaki gibi bir şarkının bağlantısını paylaştığında web+music://songid=1234&time=0:13 ve kullanıcı 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() Tam bu sefer bilgi, üzerinden beyanlı olarak aktarılıyor web uygulaması manifest'ini "protocol_handlers" adlı yeni bir mülkte düzenleyebilirsiniz. nesneler ("protocol" ve "url") gerekiyor. Aşağıdaki kod snippet'i, web+tea ve web+coffee için kaydolun. Değerler, çıkış karakterli URL için gerekli %s yer tutucusu.

{
  "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 için işleyici olarak kaydederse (örneğin, mailto protokolü kullanılacaksa işletim sistemi, kullanıcıya bir seçici gösterir ve hangi kayıtlı işleyicileri ekleyin.

Aynı uygulama birden fazla protokol için kaydoluyor

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. Orada iki durum vardır:

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

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

Application (Uygulama) > üzerinden Protokol İşleyicileri (Protokol İşleyicileri) bölümüne gidin Manifest bölmesini açın. Şunları yapabilirsiniz: mevcut tüm protokolleri buradan görüntüleyip test edebilirsiniz.

Örneğin, bu demo PWA'yı yükleyin. Protokol İşleyicileri bölümü, "americano" yazın ve kahve sayfasını açmak için Protokolü test et'i tıklayın göz atabilirsiniz.

Demo

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

1. https://protocol-handler.glitch.me/ adresine gidip PWA'ya yükleyin ve yükleme işleminden sonra uygulamayı yeniden yükleyin. Tarayıcı PWA'yı işleyicisi tarafından yürütülür.web+coffee
2. Yüklü PWA penceresinde bağlantıyı tıklayın https://protocol-handler-link.glitch.me/. Bu, üç bağlantı bulunan yeni bir tarayıcı sekmesi açın. Birinci veya ikinciyi (latte macchiato veya americano) Tarayıcı şimdi size bir istem gösterecek ve uygulamanın uygun olup olmadığını soracaktır. web+coffee protokolü için protokol işleyicisi. Kabul ederseniz PWA açılır ve seçildi.
3. navigator.registerProtocolHandler() kullanılan geleneksel akışla karşılaştırmak için PWA'daki Protokol işleyiciyi kaydet düğmesi. Daha sonra, tarayıcı sekmesinde üçüncü bağlantıyı tıklayın (çai) tuşlarına bası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 kendinize <a href="web+coffee://americano">Americano</a> ve tıklayın. Aynı şekilde PWA'yı yükleyebilirsiniz.

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 bunu devralır kısıtlayın. Kayıtlı protokol işleyicilerin listesi hiçbir şekilde web'e sunulmaz. Dolayısıyla 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 açılmayabilir Özel protokol URL'si yalnızca üst düzey tarama bağlamlarında kullanılabilir, örneğin kullanabilirsiniz.

İzin verilen protokoller listesi

registerProtocolHandler() ürününde olduğu gibi, uygulamaların kaydedebileceği protokollerin bir izin verilenler listesi vardır pek çok yolu vardır.

İzin istemi

Çağrılan bir protokol nedeniyle PWA'nın ilk başlatılmasında, kullanıcıya izin iletişim kutusu. Bu iletişim kutusunda, uygulama adı ile uygulamanın kaynağı görüntülenir ve kullanıcıya Uygulamanın protokolden bağlantıları işlemesine izin verilir. Bir kullanıcı izin iletişim kutusunu reddederse kayıtlı protokol işleyici, işletim sistemi tarafından yoksayılır. Protokolün kaydını iptal etmek için işleyicisi tarafından kaydettirilen PWA'nın kaldırılması gerekir. Tarayıcı, kaydı da iptal eder. kullanıcı "Seçimimi hatırla"yı seçerse protokol işleyici ve "İzin verme"yi seçer.

Geri bildirim

Chromium ekibi, şunun için URL protokol işleyici kaydıyla ilgili deneyimlerinizi öğrenmek istiyor: PWA'lar.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şeyler mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi neden olabilir.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın. oluşturmaya ilişkin basit talimatları uygulayın ve Bileşenler alanına UI>Browser>WebAppInstalls yazın. seçin. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

PWA'lar için URL protokol işleyici kaydını kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibi özellikleri önceliklendirir ve diğer tarayıcı tedarikçilerine Google Chrome'u desteklemenin ne kadar önemli olduğunu gösterir gerekir.

Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın. Tweet gönder: @ChromiumDev hashtag'ini kullanarak #ProtocolHandler ve 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

Teşekkür

PWA'lar (Progresif Web Uygulaması) için URL protokol işleyici kaydı Fabio Rocha, Diego González, Connor Moody ve Microsoft Edge ekibinden Samuel Tang. Bu makale Joe Medley ve Fabio Rocha tarafından incelendi. Hero görseli JJ Ying, Unsplash'te.