আপনি কি জাভাস্ক্রিপ্ট ব্যবহার করে চেক করতে পারেন আপনার অ্যাপ ইন্টারনেটের সাথে কানেক্টেড কিনা?
এই আর্টিকেলে, আমি এই ইন্টারনেট কানেকশন ডিটেকশন প্রশ্নের একটি আপডেটেড উত্তর দেব। (উফ! দ্রুত পাঁচবার বলার চেষ্টা করুন!)
সমাধানটি জাভাস্ক্রিপ্টের Fetch API এবং Async & Await-এর সাথে অ্যাসিঙ্ক্রোনাস কোড ব্যবহার করবে। কিন্তু প্রথমে, একটি স্বীকৃত সমাধান দেখি এবং আলোচনা করি কেন এটি আপনার অ্যাপ্লিকেশনের জন্য সেরা পছন্দ নাও হতে পারে।
navigator.onLine
নেভিগেটর ইন্টারফেসের অনলাইন প্রপার্টি, navigator.onLine, ব্রাউজারের অনলাইন এবং অফলাইন স্ট্যাটাস ডিটেক্ট করার জন্য প্রায়শই ব্যবহৃত হয়।
অনলাইন এবং অফলাইন ইভেন্টের জন্য লিসেনারের সাথে জোড়া দিয়ে, এটি ডেভেলপারদের জন্য একটি সহজ সমাধান প্রদান করে কিনা সেটা দেখতে মনে হয় যা ইমপ্লিমেন্ট করা সহজ।
navigator.onLine ইমপ্লিমেন্টেশন দেখি
একটি লোড ইভেন্ট লিসেনার যোগ করুন। যখন লোড ইভেন্ট ফায়ার করবে, লিসেনার নেভিগেটর ইন্টারফেসের অনলাইন প্রপার্টি চেক করবে এবং তারপর অনলাইন স্ট্যাটাস ডিসপ্লে করবে।
নেভিগেটর-এর অনলাইন প্রপার্টি একটি বুলিয়ান (true বা false) রেসপন্স দেয়। লিসেনারের অ্যাকশন শেষ করার জন্য, আমরা একটি টার্নারি স্টেটমেন্ট ব্যবহার করব স্ট্যাটাস ডিসপ্লে ভ্যালু সেট করতে।
window.addEventListener("load", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline"; });নেভিগেটর শব্দটি কেন? খুব পুরনো, ৯০-এর দশকের নেটস্কেপ নেভিগেটর ব্রাউজারের রেফারেন্স।
আপনার HTML পেজে একটি h1 এলিমেন্ট সেন্টার করুন "status" আইডি দিয়ে। আপনি উপরের জাভাস্ক্রিপ্ট কোডটি আপনার পেজে অ্যাপ্লাই করলে, আপনাকে "Online" ডিসপ্লে দেখতে मिलবে।
কিন্তু এটি শুধু পেজ লোড হলে h1 এলিমেন্ট আপডেট করে। আসুন অফলাইন এবং অনলাইন ইভেন্ট লিসেনার যোগ করি যাতে যেকোনো সময় যেকোনো ইভেন্ট ফায়ার করলে স্ট্যাটাস ডিসপ্লে আপডেট হয়।
window.addEventListener("offline", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = "OFFline"; }); window.addEventListener("online", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = "Online"; });আমরা Chrome Dev Tools-এর Application ট্যাবে যেতে পারি এবং ServiceWorker-এ ক্লিক করে ব্রাউজারকে অফলাইন হিসেবে রেসপন্ড করতে বলতে পারি।
Offline চেকবক্স কয়েকবার চেক এবং আনচেক করুন। আপনার স্ট্যাটাস ডিসপ্লে অফলাইন এবং অনলাইন ইভেন্টে তাৎক্ষণিক রেসপন্ড করছে তা দেখতে পাবেন।
একটু গভীরে যাওয়া যাক
প্রথম впечатিতে, উপরের সমাধানটি ভালো লাগে যা খুব সহজ। দুর্ভাগ্য থেকে, আমরা নেভিগেটরের অনলাইন প্রপার্টি এবং অনলাইন ও অফলাইন ইভেন্ট সম্পর্কে আরও পড়লে, আমরা একটি সমস্যা খুঁজে পাই।
CanIUse.com-এ navigator.onLine সার্চ করলে প্রপার্টি যে প্রদান করে অনলাইন | অফলাইন স্ট্যাটাসের জন্য واسعة সমর্থন দেখাবে। কিন্তু সাপোর্ট টেবিলের নিচে থাকা নোটগুলো দেখলে, আমরা দেখি যে
"অনলাইন সবসময় ইন্টারনেটের সাথে কানেকশন বোঝায় না। এটা শুধু কোনো নেটওয়ার্কের সাথে কানেকশনও বোঝাতে পারে।"
হাম, এটা কিছুটা সমস্যা তৈরি করল।
তাই আপনি যদি वस्तুনিঃভাবে ব্রাউজারের অনলাইন স্ট্যাটাস নির্ধারণ করতে চান, তবে আপনাকে চেক করার জন্য অতিরিক্ত উপায় ডেভেলপ করতে হবে।
আসুন MDN ডকস রেফারেন্স navigator.onLine-রও দেখি। MDN ওয়েব ডকস CanIUse.com-এর তথ্যকে সমর্থন করে এবং অতিরিক্ত নোট যোগ করে।
"ব্রাউজারগুলো এই প্রপার্টি ভিন্নভাবে ইমপ্লিমেন্ট করে... আপনি ধরে নিতে পারবেন না যে true ভ্যালু আপনার ব্রাউজার ইন্টারনেট অ্যাক্সেস করতে পারে বলে। আপনি ফালস পজিটিভ পেতে পারেন..."
এবং এটা নেভিগেটরের অনলাইন প্রপার্টি ব্যবহার করে ইন্টারনেট কানেকশন ডিটেক্ট করার সমাধান হিসেবে আমাদের ভয় নিশ্চিত করল। এটি একটি সমাধান যা আমাদের অ্যাপ্লিকেশনে ਹাবুক মचा দিতে পারে যেগুলো বাহ্যিক ডেটা সোর্স উপলব্ধ কখন সেটা জানতে নির্ভরশীল।
একটি উদাহরণ হলো যখন আমরা চাই নির্ধারণ করা একটি প্রোগ্রেসিভ ওয়েব অ্যাপ অনলাইন কিনা। MDN এমনকি সুপারিশ করে,
"...যদি আপনি বস্তুনিঃভাবে ব্রাউজারের অনলাইন স্ট্যাটাস নির্ধারণ করতে চান, তবে আপনাকে চেক করার জন্য অতিরিক্ত উপায় ডেভেলপ করতে হবে।"
"navigator online not working" দ্রুত ওয়েব সার্চ করলে বিভিন্ন ফোরাম পোস্ট দেখাবে যারা এই প্রপার্টিতে নির্ভর করে সমস্যায় পড়েছে।
তো সমাধান কী?
আমাদের জানতে হবে আমাদের অ্যাপ্লিকেশন কখন আসলেই ইন্টারনেটের সাথে কানেক্টেড, শুধু একটি রাউটার বা লোকাল নেটওয়ার্কের সাথে নয়। আসুন আমাদের জাভাস্ক্রিপ্ট ফাইলে ফিরে যাই এবং নতুন করে শুরু করি।
আইডিয়া হলো একটি রিকোয়েস্ট করা এবং এটা ফেল করলে গ্রেসফুলি এরর ক্যাচিং দিয়ে হ্যান্ডেল করা। রিকোয়েস্ট সফল হলে, আমরা অনলাইন, এবং ফেল করলে, আমরা অনলাইন নই।
আমরা একটি ছোট ইমেজকে একটি ইন্টারভালে রিকোয়েস্ট করব অনলাইন স্ট্যাটাস নির্ধারণের জন্য। আধুনিক জাভাস্ক্রিপ্ট Fetch API এবং Async & Await-এর সাথে অ্যাসিঙ্ক্রোনাস কোড প্রদান করে। আমরা এই টুলগুলো ব্যবহার করে আমাদের লক্ষ্য অর্জন করব।
checkOnlineStatus()
একটি অ্যাসিন크 অ্যারো ফাংশন তৈরি করি checkOnlineStatus নামে। ফাংশনটি true বা false রিটার্ন করবে নেভিগেটরের অনলাইন প্রপার্টির মতো।
ফাংশনের ভিতরে, আমরা একটি ট্রাই ব্লক সেট আপ করব যেখানে আমরা একটি वन পিক্সেল ইমেজের জন্য await fetch রিকোয়েস্ট করব। নিশ্চিত করুন আপনার সার্ভিস ওয়ারকার এই ইমেজ ক্যাশ করছে না।
HTTP রেসপন্স কোড ২০০ এবং ২৯৯ এর মধ্যে সাকসেস বোঝায়, এবং আমরা স্ট্যাটাস কোড কমপারিজনের ফলাফল রিটার্ন করব। এটি true হবে যদি রেসপন্স স্ট্যাটাস ২০০ থেকে ২৯৯ থাকে এবং false অন্যথায়।
আমাদের একটি ক্যাচ ব্লকও দরকার যাতে রিকোয়েস্ট ফেল করলে এরর ক্যাচ কর सके। ক্যাচ ব্লকে false রিটার্ন করব নির্দিষ্টভাবে অফলাইন থাকলে।
const checkOnlineStatus = async () => { try { const online = await fetch("/1pixel.png"); return online.status >= 200 && online.status < 300; // either true or false } catch (err) { return false; // definitely offline } };পরবর্তী, আমরা setInterval মেথড ব্যবহার করব এবং একে একটি অ্যানোনিমাস অ্যাসিনক ফাংশন পাস করব। অ্যাসিনক ফাংশন আমাদের checkOnlineStatus ফাংশনের রেজাল্ট await করবে। তারপর আমরা রেজাল্টের সাথে একটি টার্নারি স্টেটমেন্ট ব্যবহার করব বর্তমান অনলাইন স্ট্যাটাস ডিসপ্লে করতে।
এই উদাহরণ টেস্ট করার জন্য, ইন্টারভাল ডিলে ৩ সেকেন্ড (৩০০০ মিলিসেকেন্ড) সেট করুন। এটি খুব কম সময়, তবে। প্রতি ৩০ সেকেন্ড (৩০০০০ মিলিসেকেন্ড) চেক করা আপনার প্রকৃত প্রয়োজনের জন্য যথেষ্ট হতে পারে।
setInterval(async () => { const result = await checkOnlineStatus(); const statusDisplay = document.getElementById("status"); statusDisplay.textContent = result ? "Online" : "OFFline"; }, 3000); // probably too often, try 30000 for every 30 secondsআমাদের নতুন কোড সেভ করে, আবার Chrome Dev Tools-এর Application ট্যাবে যাই অফলাইন রেসপন্স টেস্ট করতে।
আমি প্রায় ভুলে যাচ্ছিলাম লোড ইভেন্ট লিসেনার async ফাংশনালিটির সাথে! লোড ইভেন্ট ডিটেকশন সম্ভবত শুধু গুরুত্বপূর্ণ যদি আপনার একটি প্রোগ্রেসিভ ওয়েব অ্যাপ থাকে যা অফলাইন উপলব্ধতার জন্য সার্ভিস ওয়ারকার ব্যবহার করে। অন্যথায়, আপনার ওয়েব পেজ বা অ্যাপ সহজেই কানেকশন ছাড়া লোড হবে না।
নতুন লোড ইভেন্ট লিসেনারটি এখানে:
window.addEventListener("load", async (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = (await checkOnlineStatus()) ? "Online" : "OFFline"; });একটি চূড়ান্ত চিন্তা
উপরের ইন্টারভাল কোডটি আপনার অ্যাপে কানেকশন স্ট্যাটাস ডিসপ্লে করার জন্য ভালো।そう言うと, আমি সুপারিশ করব না ২০ বা ৩০ সেকেন্ড আগে চেক করা কানেকশন স্ট্যাটাসের ওপর নির্ভর করতে আপনার অ্যাপ্লিকেশনে একটি ক্রিটিক্যাল ডেটা রিকোয়েস্ট করার আগে।
তাই, আপনাকে checkOnlineStatus ফাংশনটি সরাসরি ডেটা রিকোয়েস্ট করার আগে কল করা উচিত এবং রেসপন্স ইভ্যালুয়েট করার পর ডেটা রিকোয়েস্ট করুন।
const yourDataRequestFunction = async () => { const online = await checkOnlineStatus(); if (online) { // make data request } }উপসংহার
navigator.onLine যদিও واسعةভাবে সমর্থিত, এটি আমাদের অ্যাপ্লিকেশনগুলো আসলেই ইন্টারনেটের সাথে কানেক্টেড কিনা নির্ধারণ করার ক্ষেত্রে অনবিশ্বস্ত ফলাফল দেয়। Fetch API এবং অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা দ্রুত একটি অধিক নির্ভরযোগ্য সমাধান কোড করতে পারি।
এখানে GitHub-এ কোড গিস্টের লিংক, এবং এখানে একটি ভিডিও টিউটোরিয়াল যা আমি বানিয়েছি:
