Chrome 39 এ বীকন ডেটা পাঠান

Ewa Gasperowicz

কখনও কখনও কোনও উত্তরের জন্য অপেক্ষা না করে কোনও ওয়েব পৃষ্ঠা থেকে কোনও ওয়েব সার্ভারে কিছু ডেটা প্রেরণ করা সহজ। উদাহরণস্বরূপ, ব্যবহারকারী একটি পৃষ্ঠা থেকে প্রস্থান করার আগে আমরা বিশ্লেষণ বা ডায়াগনস্টিক ডেটা জমা দিতে চাই।

সাধারণত, প্রস্থান করার আগে ডেটা পাঠানোর সাথে unload ইভেন্ট শোনা জড়িত, কারণ যেকোনও সময় আগে অনুরোধ পাঠানোর ফলে অসম্পূর্ণ ডেটা হবে - যেমন আমরা প্রস্থান করার ঠিক আগে ঘটে যাওয়া একটি ক্লিক মিস করতে পারি। সতর্কতাটি ছিল যে আনলোড হ্যান্ডলারে পাঠানো অনুরোধগুলি সিঙ্ক্রোনাস হওয়া দরকার, কারণ বেশিরভাগ ব্রাউজার সাধারণত আনলোড হ্যান্ডলারে করা অ্যাসিঙ্ক্রোনাস XMLHttpRequests উপেক্ষা করে। এই পদ্ধতিটি নেভিগেশনকে ধীর করে দেয়, কারণ একটি নতুন পৃষ্ঠা রেন্ডার করার আগে ব্যবহারকারীকে অনুরোধটি ফিরে আসার জন্য অপেক্ষা করতে হবে।

বীকন API আপনাকে পৃষ্ঠার আনলোড ইভেন্টে অন্য কোড বিলম্ব না করে বা পরবর্তী পৃষ্ঠা নেভিগেশনের কার্যকারিতাকে প্রভাবিত না করে একটি ব্রাউজার থেকে একটি ওয়েব সার্ভারে ছোট ডেটা পেলোড সহ HTTP অনুরোধগুলিকে অ্যাসিঙ্ক্রোনাসভাবে পাঠাতে দিয়ে এই সমস্যার সমাধান করে৷

navigator.sendBeacon() পদ্ধতি যত তাড়াতাড়ি সম্ভব ব্রাউজার দ্বারা প্রেরণ করা ডেটা সারিবদ্ধ করে, কিন্তু নেভিগেশন ধীর করে না। ব্রাউজার সফলভাবে স্থানান্তরের জন্য ডেটা সারিবদ্ধ করতে সক্ষম হলে এটি true হয়ে যায়। অন্যথায় এটি false ফেরত দেয়।

ধরা যাক এই ঠিকানায় আমাদের পৃষ্ঠা থেকে বীকন ডেটা পাওয়ার জন্য আমাদের কাছে একটি সার্ভার এন্ডপয়েন্ট উপলব্ধ রয়েছে:

https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop

যদি আমরা pagehide ইভেন্ট হ্যান্ডলারে একটি sendBeacon() পদ্ধতি যোগ করি, ব্যবহারকারী যখন পৃষ্ঠা থেকে দূরে নেভিগেট করবে তখন এন্ডপয়েন্ট ডেটা পাবে:

আপনি যদি সংরক্ষণ লগ চেকবক্সে টিক দিয়ে Chrome DevTools-এ নেটওয়ার্ক ট্যাব পরিদর্শন করেন, আপনি পৃষ্ঠা থেকে দূরে নেভিগেট করার সময় উপরের শেষ পয়েন্টে একটি HTTP POST অনুরোধ পাঠানো হবে।

বিকল্পভাবে, বীকন ডেটা প্রাপ্ত হয়েছে কিনা তা দেখতে আপনি PutsReq পরিদর্শন পৃষ্ঠাতে যেতে পারেন।

এছাড়াও একটি পলিমার কাস্টম উপাদান রয়েছে যা আপনাকে বীকন ডেটা পাঠাতে দেয় - <beacon-send>ebidel.github.io/beacon-send এ এটি পরীক্ষা করে দেখুন।