Chrome 39'da işaretçi verileri gönderme

Ewa Gasperowicz

Bazen yanıt beklemek zorunda kalmadan bir web sayfasından web sunucusuna veri göndermek yararlı olabilir. Örneğin, kullanıcı bir sayfadan çıkmadan önce analiz veya teşhis verilerini göndermek isteyebiliriz.

Genellikle, çıkıştan önce veri göndermek unload etkinliğini dinlemeyi gerektirir.Bunun nedeni, isteği daha önce göndermenin eksik verilerle sonuçlanmasıdır (ör. çıkıştan hemen önce gerçekleşen bir tıklamayı kaçırmış olabiliriz). Bununla birlikte, çoğu tarayıcı genellikle bir boşaltma işleyicisinde yapılan eşzamansız XMLHttpRequest'leri yoksadığı için, boşaltma işleyicisinde gönderilen isteklerin eşzamanlı olması gerekiyordu. Yeni bir sayfa oluşturulmadan önce kullanıcının isteğin geri gelmesini beklemesi gerektiğinden bu yaklaşım, gezinmeyi yavaşlatır.

Beacon API, sayfanın boşaltma etkinliğindeki diğer kodu geciktirmeden veya sonraki sayfa gezinmesinin performansını etkilemeden, tarayıcıdan web sunucusuna küçük veri yükü içeren HTTP isteklerini eşzamansız olarak göndermenize olanak tanıyarak bu sorunu çözer.

navigator.sendBeacon() yöntemi, tarayıcı tarafından en kısa sürede iletilecek verileri sıraya alır ancak gezinmeyi yavaşlatmaz. Tarayıcı, verileri aktarma için başarılı bir şekilde sıraya ekleyebiliyorsa true döndürür. Aksi takdirde false döndürülür.

Şu adresteki sayfamızdan işaretçi verileri almak için kullanabileceğimiz bir sunucu uç noktamız olduğunu varsayalım:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

pagehide etkinlik işleyicisine bir sendBeacon() yöntemi eklersek kullanıcı sayfadan ayrıldığında uç nokta verileri alır:

Chrome Geliştirici Araçları'ndaki ağ sekmesini günlükleri koru onay kutusunu işaretli olarak incelerseniz sayfadan ayrıldığınızda yukarıdaki uç noktaya bir HTTP POST isteği gönderildiğini görürsünüz.

Alternatif olarak, işaretçi verilerinin alınıp alınmadığını görmek için PutsReq inceleme sayfasını ziyaret edebilirsiniz.

Ayrıca, işaretçi verileri göndermenize olanak tanıyan bir Polymer özel öğesi de vardır: <beacon-send>. ebidel.github.io/beacon-send adresinden bu uygulamaya göz atabilirsiniz.