Bildirimli Bağlantı Yakalama ile kapsam içi bağlantıların PWA'nızı nasıl açacağını seçin

Thomas Steiner

Bildirim Temelli Bağlantı Yakalama nedir?

Web'deki bağlantıları tıklamak bazen hoş bir sürpriz olabilir. Örneğin, bir mobil cihazda YouTube'a yönlendiren bir web sayfası bağlantısı tıklandığında, yüklüyse YouTube iOS veya Android uygulaması açılır. Ancak YouTube PWA'yı bir masaüstü bilgisayara yükleyip bir bağlantıyı tıkladığınızda uygulama bir tarayıcı sekmesinde açılır.

Ama daha karmaşık bir hal alıyor. Bağlantı bir web sitesinde değil de Google'ın sohbet uygulamalarından birinde aldığınız sohbet mesajında görünüyorsa ne olur? Ayrı uygulama pencereleri fikrine sahip masaüstü işletim sistemlerinde, uygulama zaten açıksa her bağlantı tıklaması için yeni bir pencere veya sekme oluşturulmalı mıdır? Bu konuyu düşündüğünüzde, bağlantıları ve gezinmeleri yakalamanın birçok yolu vardır. Bunlardan bazıları şunlardır:

Bildirimli Bağlantı Yakalama, "capture_links" adında bir web uygulaması manifest mülkü teklifidir. Geliştiriciler, tarayıcının gezinme kapsamının dışındaki bir bağlamdan, uygulamanın gezinme kapsamındaki bir URL'ye gitmesi istendiğinde ne olacağını bildirerek belirlemelerine olanak tanır. Bu teklif, kullanıcı zaten gezinme kapsamındaysa (örneğin, kullanıcının kapsam dahilinde bir tarayıcı sekmesi varsa ve bir dahili bağlantıyı tıklarsa) geçerli değildir.

Bir bağlantının orta tıklanması (veya sağ tıklayıp "yeni sekmede aç") gibi bazı özel durumlar genellikle bağlantı yakalama davranışını tetiklemez. Bir bağlantının target=_self veya target=_blank olması önemli değildir. Bu nedenle, bir tarayıcı penceresinde (veya farklı bir PWA'nın penceresinde) tıklanan bağlantılar, normalde aynı sekmede gezinmeye neden olacak olsa bile PWA'da açılır.

Önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak aşağıdakiler verilebilir:

  • Kullanıcı bir bağlantıyı tıkladığında tarayıcı sekmesi yerine pencere açmak isteyen PWA'lar. Masaüstü ortamında, aynı anda birden fazla uygulama penceresinin açık olması genellikle mantıklıdır.
  • Geliştiricinin herhangi bir zamanda uygulamanın yalnızca tek bir örneğini açık tutmayı tercih ettiği, yeni gezinmelerin mevcut örneğe odaklandığı tek pencereli PWA'lar. Alt kullanım alanları şunlardır:
    • Yalnızca tek bir örneğinin çalışmasının mantıklı olduğu uygulamalar (ör. müzik çalar, oyun).
    • Tek bir örnekte birden çok doküman yönetimi içeren uygulamalar (ör. HTML uygulanan bir sekme şeridi).

about://flags aracılığıyla etkinleştirme

Kaynak deneme jetonu olmadan Bildirimli Bağlantı Yakalama ile yerel olarak deneme yapmak için about://flags içinde #enable-desktop-pwas-link-capturing işaretini etkinleştirin.

Bildirimli Bağlantı Yakalama nasıl kullanılır?

Geliştiriciler, ek web uygulaması manifest alanından "capture_links" yararlanarak bağlantıların nasıl yakalanması gerektiğini bildirimli bir şekilde belirleyebilir. Değeri olarak bir dizeyi veya dize dizisini alır. Bir dize dizisi verilirse kullanıcı aracısı, varsayılan olarak "none" değerini belirleyerek listedeki ilk desteklenen öğeyi seçer. Aşağıdaki değerler desteklenir:

  • "none" (varsayılan): Bağlantı yakalamaz. Bu PWA kapsamına giden bağlantılar, PWA penceresi açılmadan normal bir şekilde gezinir.
  • "new-client": Tıklanan her bağlantı, ilgili URL'de yeni bir PWA penceresi açar.
  • "existing-client-navigate": Tıklanan bağlantı, varsa mevcut bir PWA penceresinde veya yoksa yeni pencerede açılır. Birden fazla PWA penceresi varsa tarayıcı rastgele bir tane seçebilir. Açık pencere yoksa "new-client" işlevi görür. 🚨 Dikkatli ol! Sayfalar rastgele bir şekilde gidebileceği için bu seçenek potansiyel olarak veri kaybına yol açabilir. Siteler, bu seçeneği belirleyerek söz konusu davranışın etkinleştirileceğini bilmelidir. Bu seçenek, müzik oynatıcılar gibi kullanıcı verilerini bellekte tutmayan "salt okunur" sitelerde çalışır. Sayfadan çıkılan sayfada bir beforeunload etkinliği varsa kullanıcı, gezinme tamamlanmadan önce istemi görür.

Demografi

Bildirimli Bağlantı Yakalama demosu aslında birbiriyle etkileşime giren iki demodan oluşur:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

Aşağıdaki ekran video kaydında bu ikisinin nasıl etkileşimde bulunduğu gösterilmektedir. "new-client" ve "existing-client-navigate" olmak üzere iki farklı davranış gösterirler. Davranış farkını görmek için uygulamaları farklı durumlarda, bir sekmede çalıştırarak veya yüklü PWA olarak test ettiğinizden emin olun.

Güvenlik ve izinler

Chromium ekibi; kullanıcı kontrolü, ş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 Bildirimli Bağlantı Yakalama özelliğini tasarladı ve uyguladı. Bu API, sitelere yeni ek denetim seçenekleri sunar. Birincisi, yüklü uygulamaları otomatik olarak bir pencerede açabilmek. Bu, mevcut kullanıcı arayüzünü kullanır ancak sitenin otomatik olarak tetiklemesini mümkün kılar. İkincisi, mevcut bir pencereyi kendi alanına odaklayabilme ve tıklanan URL'yi içeren bir etkinliği tetiklemektir. Bunun amacı, sitenin mevcut bir pencereden yeni bir sayfaya gitmesine izin vererek varsayılan HTML gezinme akışını geçersiz kılmasıdır.

Launch Handler API'ye geçiş

Declarative Link Capturing API kaynak denemesinin, Chromium 97 ve önceki sürümleri için 30 Mart 2022'de süresi sona erdi. Bu özelliğin yerini, Chromium 98 ve sonraki sürümlerde, kullanıcı tarafından etkinleştirilen bağlantı yakalama ve Launch Handler API'yi içeren bir dizi yeni özellik ve API alacaktır.

Chromium 98'de, otomatik bağlantı yakalama artık bir web uygulamasına yükleme sırasında izin vermek yerine kullanıcının etkinleştirme davranışıdır. Bağlantı yakalamayı etkinleştirmek için kullanıcının Birlikte aç'ı kullanarak tarayıcıdan yüklü bir uygulamayı başlatması ve Seçimimi hatırla'yı seçmesi gerekir.

Yüklü bir uygulamanın "Seçimimi hatırla" seçeneğinin etkin olduğu "Birlikte aç" ayarına ilişkin örnek.

Alternatif olarak, kullanıcılar uygulama yönetimi ayarları sayfasında belirli bir web uygulaması için bağlantı yakalamayı açabilir veya kapatabilir.

Yüklü bir uygulamanın ayarlar sayfası örneği.

Bağlantı yakalama, şimdilik yalnızca ChromeOS'te kullanılabilen bir özelliktir. Windows, macOS ve Linux desteği devam etmektedir.

Handler API'yi başlatma

Gelen gezinmenin denetimi Launch Handler API'ye taşınır. Bu API, web uygulamalarının bağlantı yakalama, paylaşım hedefi veya dosya işleme gibi çeşitli durumlarda web uygulamalarının nasıl başlatılacağına karar vermesine olanak tanır. Declarative Link Capturing API'den Launch Handler API'ye geçiş yapmak için:

  1. Sitenizi İşleyici kaynak denemesini başlatma için kaydedin ve kaynak deneme anahtarını web uygulamanıza yerleştirin.

  2. Sitenizin manifest dosyasına bir "launch_handler" girişi ekleyin.

    • "capture_links": "new-client" uygulamasını kullanmak için şunu ekleyin:"launch_handler": { "route_to": "new-client" }.
    • "capture_links": "existing-client-navigate" özelliğini kullanmak için şunu ekleyin: "launch_handler": { "route_to": "existing-client-navigate" }.
    • Bildirimli Bağlantı Yakalama kaynak denemesinde hiçbir zaman uygulanmayan "capture_links": "existing-client-event" yöntemini kullanmak için şunu ekleyin: "launch_handler": { "route_to": "existing-client-retain" }. Bu seçenekle, bir bağlantıda gezinme yakalandığında uygulama kapsamınızdaki sayfalar artık otomatik olarak gezinmez. Gezinmeyi etkinleştirmek için window.launchQueue.setConsumer() yöntemini çağırarak JavaScript'te LaunchParams öğesini işlemeniz gerekir.

capture_links alanı ve Bildirimli Bağlantı Yakalama kaynak denemesi kaydı 30 Mart 2022'ye kadar kullanılabilir. Bu işlem, Chromium 97 ve önceki sürümlerin, web uygulamasını yakalanan bir bağlantıdan başlatmaya devam etmesini sağlar.

Daha fazla bilgi için Uygulamanızın nasıl kullanıma sunulduğunu kontrol etme konusuna bakın.

Geri bildirim

Chromium ekibi, Bildirimli Bağlantı Yakalama ile 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

Bildirimli Bağlantı Yakalama özelliğini kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.

#DeclarativeLinkCapturing hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

Bildirim Temelli Bağlantı Yakalama, Alan Cutter ve Dominick Ng'den gelen girdilerle Matt Giuca tarafından belirlenmiştir. API, AlanCutter tarafından uygulandı. Bu makale Joe Medley, Matt Giuca, AlanCutter ve Shunya Shishido tarafından incelenmiştir. Zulmaury Saavedra tarafından Unsplash'teki lokomotif resim.