LWS এর হাতেকলমে প্রজেক্ট
lws-project-4-Weather-dashboard
How Navigator Browser API Works

খুব সুন্দর প্রশ্ন! এই প্রশ্নটা একদম “ভিতর থেকে জানার” প্রশ্ন — এবং এইটা জাভাস্ক্রিপ্ট শেখার পাকা ধরন।

চলো সহজভাবে, ভাইয়ের মতো করে বুঝিয়ে দিই:


🧠 navigator কোথা থেকে আসলো?

navigator হলো ব্রাউজার-এর ভিতরে থাকা একটি বিল্ট-ইন অবজেক্ট — যেটা window অবজেক্টের একটি প্রপার্টি

তুমি যদি ব্রাউজারে এইটা চালাও:

console.log(window.navigator);

তাহলে ঠিক একই জিনিস পাবে যেটা console.log(navigator) দিলে পাচ্ছো।

কারণ 👉 navigator আসলে window.navigator এর শর্টফর্ম।

যখন আমরা ব্রাউজারে কোড চালাই, তখন JavaScript এর Global Scope-এ থাকা সব window এর ভেতরেই থাকে।


🧭 navigator আমাদের কী দেয়?

navigator ব্রাউজার সম্পর্কিত অনেক তথ্য দেয় — যেমন:

কাজProperty/Methodব্যাখ্যা
লোকেশন বের করাnavigator.geolocationইউজারের অবস্থান (latitude/longitude) পাওয়া যায়
ব্রাউজার অনলাইন নাকি অফলাইনnavigator.onLinetrue/false রিটার্ন করে
ইউজারের ডিভাইসের ভাষাnavigator.languageযেমন: 'en-US', 'bn-BD'
ইউজারের ব্রাউজার সম্পর্কে তথ্যnavigator.userAgentযেমন: 'Mozilla/5.0 ... Chrome/114...'
ইউজার কোন প্ল্যাটফর্মে আছেnavigator.platformযেমন: 'Win32', 'Linux', 'Android'
ইউজার যদি পিডব্লিউএ (PWA) অ্যাপে থাকেnavigator.standalonetrue/false

✅ ভবিষ্যতে navigator কবে লাগবে?

তুমি যদি ব্রাউজার ভিত্তিক ইউজার অভিজ্ঞতা তৈরি করো, তাহলে navigator অনেক কাজে আসবে।

উদাহরণ:

  1. লোকেশন দিয়ে Weather App বানানোnavigator.geolocation দিয়ে ইউজারের লোকেশন জেনে API কল করো

  2. অনলাইন/অফলাইন চেক করা → যদি navigator.onLine === false হয়, তুমি ইউজারকে বলে দিতে পারো:

"তুমি এখন অফলাইনে, ডেটা লোড হবে না!"

  1. ভাষা অনুযায়ী কনটেন্ট দেখানো → ধরো ইউজার যদি navigator.language === 'bn-BD' হয়, তুমি বাংলা ভাষায় দেখাতে পারো।

  2. UserAgent দেখে মোবাইল নাকি ডেস্কটপ চেক → তোমার UI মোবাইল হলে ভিন্নভাবে দেখাতে পারো


🔍 Debug করে দেখো (প্র্যাকটিস)

ব্রাউজারে Developer Console খুলে এইগুলো চালাও:

console.log(navigator);
console.log(navigator.geolocation);
console.log(navigator.onLine);
console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.platform);

🎁 Bonus: navigator দিয়ে ইউজারকে ডাউনলোড করাও (advanced)

const isMobile = /Mobi/.test(navigator.userAgent);
if (isMobile) {
  alert("তুমি মোবাইল দিয়ে ব্রাউজ করছো");
}

🔚 সংক্ষেপে মনে রাখো:

  • navigator হলো window.navigator এর শর্টফর্ম
  • এটা ব্রাউজারের দেয়া অনেক তথ্য রাখে
  • লোকেশন, অনলাইন স্টেটাস, ইউজার ভাষা — এসব পাওয়া যায়
  • Weather App, Language-based App, Offline Mode এসব করতে কাজে লাগে

অবশ্যই ভাই! নিচে আমি সংক্ষেপে, ঝরঝরে ভাবে navigator API-এর সবগুলো দরকারি ফিচার একসাথে টেবিল আকারে দিয়ে দিলাম — দেখে-দেখে তুমি দ্রুত বুঝতে ও ব্যবহার করতে পারবে।


navigator চিটশীট (সংক্ষিপ্ত টেবিল)

কাজের ধরন 🔧navigator প্রপার্টি 🧩উদাহরণ 🧪ফলাফল 🎯
ইউজারের লোকেশন জানাnavigator.geolocation.getCurrentPosition(...)ল্যাটিচিউড, লংগিচিউড
ইউজার অনলাইনে কিনাnavigator.onLinenavigator.onLinetrue / false
ইউজারের ভাষা জানার জন্যnavigator.languagenavigator.language'en-US', 'bn-BD' ইত্যাদি
প্ল্যাটফর্ম (OS) জানাnavigator.platformnavigator.platform'Win32', 'Android' ইত্যাদি
মোবাইল/ডেস্কটপ চেকnavigator.userAgent/Mobi/.test(navigator.userAgent)মোবাইল হলে true
কুকি চালু আছে কিনাnavigator.cookieEnablednavigator.cookieEnabledtrue / false
ব্রাউজার সম্পর্কে জানার জন্যnavigator.userAgentnavigator.userAgentChrome/Firefox/OS version info
ব্রাউজার স্ট্যান্ডঅলোন মোডে কিনা (PWA)navigator.standalonenavigator.standalonetrue / false (iOS only)

⚡ উদাহরণ (মাত্র ৫ সেকেন্ডে চেক!)

console.log(navigator.geolocation); // লোকেশন API
console.log(navigator.onLine); // true/false
console.log(navigator.language); // ইউজারের ভাষা
console.log(navigator.platform); // OS info
console.log(navigator.userAgent); // ব্রাউজার info
console.log(navigator.cookieEnabled); // কুকি চালু কিনা