ارسال داده‌های beacon در Chrome 39

Ewa Gasperowicz

گاهی اوقات ارسال برخی از داده ها از یک صفحه وب به یک وب سرور بدون نیاز به منتظر ماندن برای پاسخ مفید است. به عنوان مثال، ممکن است بخواهیم قبل از خروج کاربر از یک صفحه، تجزیه و تحلیل یا داده های تشخیصی را ارسال کنیم.

به طور معمول، ارسال داده‌ها قبل از خروج شامل گوش دادن به رویداد unload ، زیرا ارسال درخواست هر زمان زودتر منجر به داده‌های ناقص می‌شود - به عنوان مثال ممکن است کلیکی را که درست قبل از خروج اتفاق افتاده از دست داده باشیم. اخطار این بود که درخواست‌های ارسال شده در unload handler باید همزمان باشند، زیرا اغلب مرورگرها معمولاً درخواست‌های XMLHttp ناهمزمان ایجاد شده در یک unload handler را نادیده می‌گیرند. این رویکرد سرعت ناوبری را کند می کند، زیرا کاربر باید قبل از ارائه صفحه جدید منتظر بازگشت درخواست باشد.

Beacon API این مشکل را با امکان ارسال ناهمزمان درخواست‌های HTTP با داده‌های کوچک از یک مرورگر به سرور وب، بدون تأخیر سایر کدها در رویداد تخلیه صفحه یا تأثیری بر عملکرد ناوبری صفحه بعدی، حل می‌کند.

متد navigator.sendBeacon() داده ها را در صف قرار می دهد تا در اسرع وقت توسط مرورگر منتقل شوند، اما سرعت ناوبری را کاهش نمی دهد. اگر مرورگر بتواند داده ها را برای انتقال با موفقیت در صف قرار دهد، مقدار true را برمی گرداند. در غیر این صورت false را برمی گرداند.

فرض کنید یک نقطه پایانی سرور برای دریافت داده‌های beacon از صفحه خود در این آدرس در دسترس داریم:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

اگر یک متد sendBeacon() را در کنترل کننده رویداد pagehide اضافه کنیم، زمانی که کاربر از صفحه دور می‌شود، نقطه پایانی داده‌ها را دریافت می‌کند:

اگر برگه شبکه را در Chrome DevTools با علامت زدن چک باکس حفظ گزارش‌ها بررسی کنید، وقتی از صفحه خارج می‌شوید، یک درخواست HTTP POST به نقطه پایانی بالا ارسال می‌شود.

همچنین، می‌توانید از صفحه بازرسی PutsReq دیدن کنید تا ببینید آیا داده‌های beacon دریافت شده‌اند یا خیر.

همچنین یک عنصر سفارشی Polymer وجود دارد که به شما امکان می دهد داده های beacon ارسال کنید - <beacon-send> . آن را در ebidel.github.io/beacon-send بررسی کنید.