از sendBeacon جاوااسکریپت چی می‌دونید؟

فرض کنید می‌خوایم تعداد دقایقی که کاربر توی صفحهٔ مد نظر ما گذرونده رو به سرور بفرستیم. برای این کار، اطلاعات رو باید درست لحظه‌ای که کاربر به صفحه دیگه هدایت میشه و یا تب رو می‌بنده انجام بدیم. مشکل استفاده از ajax اینه که بعد از بسته شدن صفحه، مرورگر ممکنه عملیات ای‌جکس رو اجرا نکنه و بنابراین اطلاعاتی به سرور ارسال نمیشه.

راه حلی که قبل از معرفی sendBeacon وجود داشت، ارسال اطلاعات بصورت Synchronous (همگام) درست قبل از ترک کردن کاربر بود که باعث میشد صفحه برای لحظاتی قفل (بلاک) بشه که در نتیجه باعث آسیب تجربهٔ کاربر میشد. همین دلایل بود که توسعه‌دهنده‌ها رو به فکر یک API قابل اطمینان‌تر انداخت

‏sendBeacon چیه؟ 😄

‏sendBeacon متدیه که از آبجکت سراسری navigator که یک Web API هست، قابل دسترسه و هدف از معرفی اون، ارسال اطلاعات آماری (Analytics) و کم‌حجم به سرور هست. نحوهٔ استفاده از اون به صورت زیر هست:

navigator.sendBeacon(url); 
navigator.sendBeacon(url, data); 

این متد، اطلاعات رو همیشه با متد POST و بصورت Asynchronous (غیر همگام) به سرور می‌فرسته. نکتهٔ مهم اینه که این متد اطلاعاتی از سرور برنمی‌گردونه. خروجی اون یک Boolean هست و در صورتی true برمی‌گردونه که مرورگر بتونه اطلاعات رو بفرسته. در غیر این صورت false. پس زمانی که به اطلاعات بازگشتی از سرور احتیاج داریم، sendBeacon گزینه مناسبی نیست.

چطوری از sendBeacon استفاده کنیم؟ 🦦

فرض کنید می‌خوایم درست قبل از ترک کردن صفحه توسط کاربر، اطلاعاتی رو به سرور بفرستیم. برای این کار ابتدا باید به رویداد visibilitychange گوش بدیم:

document.addEventListener('visibilitychange', () => { 
 
}); 

این رویداد زمانی اجرا میشه که صفحه قابل مشاهده باشه (visible) یا نباشه (hidden). حالا باید تصمیم بگیریم که اگه وضعیت صفحه hidden بود، بیایم و اطلاعات مد نظر رو به سرور پاس بدیم:

document.addEventListener('visibilitychange', () => { 
  if (document.visibilityState === 'hidden') { 
    const data = JSON.stringify({ spent: 3600 }); 
    navigator.sendBeacon('/log', data); 
  } 
}); 

به طور کلی این API کمک می‌کنه تا اطلاعات رو به صورت غیر همگام به سرور ارسال کنیم. از برتری‌های مهم sendBeacon نسبت به ajax اینه که اگه قصد دارید از اون برای ارسال اطلاعاتمون به سرور، درست قبل از ترک شدن صفحه توسط کاربر استفاده کنیم، مرورگر به ما این اطمینان رو میده که حتماً اون رو اجرا کنه. در صورتی که همونطور که برای ajax گفتیم، مرورگر ممکنه قبل از ترک شدن صفحه، تصمیم بگیره که عملیات ajax رو اجرا نکنه.

#sendBeacon
@CodeModule