گاهی اوقات ارسال برخی از داده ها از یک صفحه وب به یک وب سرور بدون نیاز به منتظر ماندن برای پاسخ مفید است. به عنوان مثال، ممکن است بخواهیم قبل از خروج کاربر از یک صفحه، تجزیه و تحلیل یا داده های تشخیصی را ارسال کنیم.
به طور معمول، ارسال دادهها قبل از خروج شامل گوش دادن به رویداد 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 بررسی کنید.