Blog

JavaScript navigator.connection – বাংলা টিউটোরিয়াল

navigator.connection হল Network Information API-এর একটি অংশ, যা ব্রাউজারে ব্যবহারকারীর ইন্টারনেট সংযোগ সংক্রান্ত তথ্য দেয়। যেমন: নেটওয়ার্ক টাইপ (WiFi, 4G), ডাউনলোড স্পিড, ল্যাটেন্সি ইত্যাদি। এটি ব্যবহার করে আমরা নেটওয়ার্কের গতি অনুযায়ী ওয়েব অ্যাপের আচরণ পরিবর্তন করতে পারি।

Basic Example: নেটওয়ার্ক টাইপ দেখানো

<button onclick="checkConnection()" style="padding:10px 20px;">নেটওয়ার্ক চেক করুন</button>
<p id="connectionInfo" style="margin-top:10px;"></p>

<script>
function checkConnection() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (connection) {
    document.getElementById("connectionInfo").innerText =
      "নেটওয়ার্ক টাইপ: " + connection.effectiveType;
  } else {
    document.getElementById("connectionInfo").innerText = "আপনার ব্রাউজার এটি সাপোর্ট করে না।";
  }
}
</script>

ব্যাখ্যা: এখানে navigator.connection.effectiveType ব্যবহার করে নেটওয়ার্ক টাইপ (যেমন: 4g, 3g, slow-2g ইত্যাদি) বের করা হয়েছে। এটি মূলত ডিভাইসের ইন্টারনেট গতি বুঝিয়ে দেয়।
Note: এই ফিচার সব ব্রাউজারে কাজ করে না (Chrome, Android WebView, ইত্যাদি সাপোর্ট করে)।

Advanced Example: Bandwidth ও Change Event

<div id="status"></div>

<script>
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateStatus() {
  let msg = "নেটওয়ার্ক টাইপ: " + connection.effectiveType + "\n";
  msg += "ডাউনলিঙ্ক (Mbps): " + connection.downlink + "\n";
  msg += "রাউন্ড ট্রিপ টাইম (RTT): " + connection.rtt + "ms";
  document.getElementById("status").innerText = msg;
}

if (connection) {
  updateStatus();
  connection.addEventListener('change', updateStatus);
}
</script>

ব্যাখ্যা: এই কোডে connection.downlink দিয়ে ডাউনলোড স্পিড, connection.rtt দিয়ে রাউন্ড ট্রিপ টাইম (Latency) দেখানো হয়েছে। connection.addEventListener('change', ...) ব্যবহার করে নেটওয়ার্ক পরিবর্তন হলে স্বয়ংক্রিয়ভাবে তথ্য আপডেট হয়।

Network Info Table

⚠️ সীমাবদ্ধতা

• ❗ সব ব্রাউজারে এই API কাজ করে না। মূলত Chrome, Edge, Opera, Android WebView এ ভালোভাবে সাপোর্ট করে।
• ❗ Safari ও Firefox এই API সম্পূর্ণ সাপোর্ট করে না বা বন্ধ করে রেখেছে প্রাইভেসির কারণে।
• ❗ ইউজার নেটওয়ার্ক পরিবর্তন করলে change ইভেন্ট ট্রিগার হয়।

✅ কোথায় ব্যবহার করবেন?

• ভিডিও স্ট্রিমিং অ্যাপে ব্যান্ডউইথ অনুযায়ী ভিডিও কোয়ালিটি ঠিক করতে।
• বড় ফাইল ডাউনলোড করার সময় ডেটা সেভিং মোডে অ্যালার্ট দেখাতে।
• মোবাইল নেটওয়ার্কে থাকলে কম রিসোর্স ব্যবহার করা পেজ লোড করা।