WEB API

Beacon API

Tarayıcı ile sunucu arasındaki iletişim yöntemlerinden en çok kullanılanı ve bilineni Http/s ’dir. İstek/Cevap (Request/Response) temeli üzerine kurulan bu protokol, bazı durumlarda cevabı beklemeden işletilir. Sunucu ile XHR, Fetch, Axios haberleşirken neden Beacon API ihtiyaç duyalım ?

Onur Dayıbaşı

Published in

Frontend Development With JS

2 min readAug 15, 2020

Bu yazı daha önceden başlamış olduğum Web API yazı serisinin devamı niteliğindedir. JS kodları ile işletim sistemi veya tarayıcının native kısımlarına erişmek için sağlanan API’ler olduğundan bahsetmiştim. Beacon API’de HTTP POST üzerinden veri göndermeyi sağlar ama bunu yaparken response beklemez. Tarayıcıya veriyi göndermesi için emir verir. Tarayıcı bunu kuyruğa sokar ve işleteceğini söylerse result değeri true , bu kısımda bir sorun olursa false değeri döner.

let result = navigator.sendBeacon(url, data);
//Data Types : ArrayBufferView, Blob, DOMString, or FormData

Peki bu tip bir kullanıma neden ihtiyaç duyarız. Google Tag Manager, FullStory vb monitoring ve analytic araçları arka planda async küçük miktarda veriyi aktarmak için kullanır.

Sayfa istatistikleri, sayfa içerisindeki bileşenler ile olarak etkileşim istatistikleri ve sıraları.
Debugging ve logging için kullanılabilir. Sayfadaki bileşenlerdeki bazı olaylar için log ve kaydetme noktaları oluşturup bu bilgileri Beacon API ile iletebilirsiniz.

Teknik

Aslında XHTTPRequest üzerinden gerçekleşen bu işlem için neden mevcut XHR veya Fetch kullanmadığımızı neden Beacon API kullandığımızı daha iyi anlatabilmek için konuyu biraz daha inceleyelim.

Beacon API üzerinden bir istekte bulunduğumuzda veri o anda gönderilmez CPU’nun az kullanıldığı, Network boşta olduğu zaman gerçekleştirilir. Kullanıcıya sadece bu komutu işleteceğine dair kuyruğa aldığına dair bilgilendirmede bulunur. Bu durum özellikle sayfanın unload edildiği sayfada bir linke tıklanıp başla bir sayfaya gitmek istediğinde büyük bir performan avantajı sağlar. Bu sırada extradan XHR Request maliyetinden ve yeni sayfaya yönlenmeyi geciktirmekten kurtarır. Bundan dolayı Beacon API günümüzde önemli bir iletişim avantajı sağlar.

Destek

Tarayıcının Beacon API destekleyip desteklemediğini aşağıdaki ile öğrenebilirsiniz.

if (navigator.sendBeacon) {
  // Beacon exist
} else {
  // No Beacon. 
}

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.