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

Thomas Steiner

Bildirime Dayalı Bağlantı Yakalama nedir?

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

Ancak durum daha karmaşık. 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 kavramının olduğu masaüstü işletim sistemlerinde, uygulama zaten açıksa her bağlantı tıklaması için yeni bir pencere mi yoksa sekme mi oluşturulmalıdır? Bağlantıların ve gezinme işlemlerinin yakalanabileceği birçok yol vardır. Bunlardan bazıları:

Bildirimli bağlantı yakalama, geliştiricilerin tarayıcıdan uygulamanın gezinme kapsamı içindeki bir URL'ye gezinmesi istendiğinde ne olacağını bildirimli olarak belirlemesine olanak tanıyan "capture_links" adlı bir web uygulaması manifest özelliği önerisidir. Kullanıcı zaten gezinme kapsamındaysa (örneğin, kapsam dahilinde bir tarayıcı sekmesi açıkken bir iç bağlantıyı tıklarsa) bu öneri geçerli değildir.

Bir bağlantıyı orta tıklama (veya sağ tıklayıp "yeni sekmede aç"ı seçme) gibi bazı özel koşullar genellikle bağlantı yakalama davranışını tetiklemez. Bağlantının target=_self veya target=_blank olması fark etmez. Böylece, normalde aynı sekmede gezinmeye neden olsa bile bir tarayıcı penceresinde (veya farklı bir PWA'nın penceresinde) tıklanan bağlantılar PWA'da açılır.

Önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:

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

about://flags üzerinden etkinleştirme

Bildirimli bağlantı yakalamayı kaynak deneme jetonu olmadan yerel olarak denemek için about://flags adresinde #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ı "capture_links"'dan yararlanarak bağlantıların nasıl yakalanacağını bildirimsel olarak belirleyebilir. Değer olarak bir dize veya dize dizisi alır. Bir dizi dize verilirse kullanıcı aracısı, listedeki ilk desteklenen öğeyi seçer ve varsayılan olarak "none" kullanılır. Aşağıdaki değerler desteklenir:

  • "none" (varsayılan): Bağlantı yakalama yok. Bu PWA kapsamına yönlendiren tıklanan bağlantılar, PWA penceresi açılmadan normal şekilde gezinir.
  • "new-client": Tıklanan her bağlantı, söz konusu URL'de yeni bir PWA penceresi açar.
  • "existing-client-navigate": Tıklanan bağlantı, varsa mevcut bir PWA penceresinde, yoksa yeni bir pencerede açılır. Birden fazla PWA penceresi varsa tarayıcı bunlardan birini rastgele seçebilir. Şu anda açık pencere yoksa bu komut "new-client" gibi davranır. 🚨 Dikkatli olun. Bu seçenek, sayfalardan rastgele çıkılabileceği için veri kaybına yol açabilir. Siteler, bu seçeneği belirleyerek bu tür bir davranışa dahil olduklarının farkında olmalıdır. Bu seçenek, kullanıcı verilerini bellekte tutmayan "salt okunur" siteler (ör. müzik çalarlar) için en iyi sonucu verir. Kullanıcının ayrıldığı sayfada bir beforeunload etkinliği varsa kullanıcı, gezinme işlemi tamamlanmadan önce istemi görür.

Demo

Bildirimli bağlantı yakalama demosunda, birlikte etkileşimde bulunan iki demo yer alır:

  1. Site 1
  2. Site 2

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

Güvenlik ve izinler

Chromium ekibi, kullanıcı kontrolü, şeffaflık ve ergonomi gibi Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanan temel ilkeleri kullanarak Bildirimli Bağlantı Yakalama'yı tasarlayıp uyguladı. Bu API, sitelere yeni ek kontrol seçenekleri sunar. İlk olarak, yüklü uygulamaları otomatik olarak pencerede açabilme. Bu özellik, mevcut kullanıcı arayüzünü kullanır ancak sitenin otomatik olarak tetiklemesini sağlar. İkincisi, mevcut bir pencereyi kendi alanına odaklama ve tıklanan URL'yi içeren bir etkinlik tetikleme özelliği. Bu, sitenin mevcut bir pencerede yeni bir sayfaya gitmesine ve varsayılan HTML gezinme akışını geçersiz kılmasına olanak tanımak için tasarlanmıştır.

Launch Handler API'ye geçiş yapma

Declarative Link Capturing API kaynak denemesi, Chromium 97 ve önceki sürümler için 30 Mart 2022'de sona erdi. Bu API, Chromium 98 ve sonraki sürümlerde kullanıcı tarafından etkinleştirilen bağlantı yakalama ve Launch Handler API gibi bir dizi yeni özellik ve API ile değiştirilecektir.

Chromium 98'de otomatik bağlantı yakalama özelliği artık kullanıcı tarafından etkinleştirilmesi gereken bir davranış olarak sunuluyor. Bu özellik, yükleme sırasında web uygulamalarına verilmiyordu. Bağlantı yakalamayı etkinleştirmek için kullanıcının, yüklenen bir uygulamayı tarayıcıdan Birlikte aç'ı kullanarak başlatması ve Seçimimi hatırla'yı seçmesi gerekiyor.

"Seçimimi hatırla" seçeneği etkinleştirilmişken yüklü bir uygulamanın "Bununla 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ı etkinleştirebilir veya devre dışı bırakabilir.

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

Bağlantı yakalama özelliği şu anda yalnızca ChromeOS'te kullanılabilir. Windows, macOS ve Linux desteği üzerinde çalışıyoruz.

Launch Handler API

Gelen bir gezinmenin kontrolü, 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 nasıl başlatılacağına karar vermesine olanak tanır. Declarative Link Capturing API'den Launch Handler API'ye geçmek için:

  1. Sitenizi Launch Handler deneme süresine kaydettirin ve deneme süresi anahtarını web uygulamanıza yerleştirin.

  2. Sitenizin manifestine "launch_handler" girişi ekleyin.

    • "capture_links": "new-client" özelliğini kullanmak için:"launch_handler": { "route_to": "new-client" } ekleyin.
    • "capture_links": "existing-client-navigate" özelliğini kullanmak için şunu ekleyin: "launch_handler": { "route_to": "existing-client-navigate" }.
    • "capture_links": "existing-client-event" (Bildirimsel Bağlantı Yakalama kaynaklı denemesinde hiçbir zaman uygulanmamıştır) kullanmak için şunu ekleyin: "launch_handler": { "route_to": "existing-client-retain" }. Bu seçenekle, bağlantı gezinme işlemi yakalandığında uygulamanızın kapsamındaki sayfalar artık otomatik olarak gezinmez. Gezinmeyi etkinleştirmek için window.launchQueue.setConsumer() işlevini çağırarak JavaScript'te LaunchParams işlevini işlemeniz gerekir.

capture_links alanı ve Declarative Link Capturing kaynak denemesi kaydı 30 Mart 2022'ye kadar geçerlidir. Bu sayede Chromium 97 ve önceki sürümlerindeki kullanıcılar, web uygulamasını yakalanan bir bağlantıda başlatmaya devam edebilir.

Daha fazla bilgi için Uygulamanızın nasıl başlatılacağını kontrol etme başlıklı makaleyi inceleyin.

Geri bildirim

Chromium ekibi, Bildirimli Bağlantı Yakalama ile ilgili deneyimlerinizi öğrenmek istiyor.

API tasarımı hakkında bilgi verin.

API'nin beklentilerinizi karşılamayan bir yönü var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun bildirme

Chromium'un uygulanmasıyla ilgili bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. UI>Browser>WebAppInstalls simgesini Bileşenler kutusuna girin.

API'ye desteğinizi gösterme

Bildirimli bağlantı yakalama özelliğini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

#DeclarativeLinkCapturing hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve nerede, nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

Bildirimli bağlantı yakalama, Alan Cutter ve Dominick Ng'nin katkılarıyla Matt Giuca tarafından belirlendi. API, Alan Cutter tarafından uygulandı. Bu makale Joe Medley, Matt Giuca, Alan Cutter ve Shunya Shishido tarafından incelenmiştir. Unsplash'te Zulmaury Saavedra tarafından çekilen hero resmi.