بررسی سرعت اینترنت کاربر در React ! ( تشخیص کانکشن ضعیف )

5 مرداد 1404
ارسال شده توسط
ری اکت
سرعت اینترنت کاربر در ری اکت - سرعت اینترنت کاربر در React - تست سرعت اینترنت کاربر در ری اکت - بررسی سرعت اینترنت کاربر در React - ریکت

تصور کن یه کاربر با اینترنت خیلی ضعیف میخواد وارد اپلیکیشنمون بشه. اگه حجم تصاویر زیاد باشه یا داده ها سنگین لود بشن، ممکنه تجربه اش افتضاح باشه!

اینجاست که دونستن سرعت اینترنت کاربر میتونه یه برگ برنده باشه!

چرا دونستن سرعت اینترنت کاربر یه برگ برندس ؟!

همه ی ما تلاش میکنیم اپلیکیشن هامون سریع، سبک و کاربرپسند باشن. اما یه چیزی همیشه از دست ما خارجه:
وضعیت اینترنت کاربر!
یه نفر ممکنه با وای فای پرسرعت وصل شه، یکی دیگه با اینترنت ضعیف گوشی تو جاده! اگه این تفاوت رو تشخیص بدیم، میتونیم تجربه هر کاربر رو هوشمندانه تر شخصی سازی کنیم:
از لود کردن نسخه سبک تر تصاویر گرفته تا نمایش پیام های آگاه سازی وقتی اینترنت کند باشه.
دقیقاً همینجاست که یه API ساده جاوااسکریپتی، میتونه تبدیل بشه به یه ابزار طلایی توی UX و رضایت کاربر 🙂

معرفی navigator.connection یا Network Information API

این API اطلاعات شبکه ی فعلی کاربر رو برمیگردونه:
مثلاً نوع اتصال (3g, 4g, …) و سرعت تقریبی (مثلاً 1.2 Mbps) :

				
					const connection = navigator.connection;

console.log(connection.effectiveType); // مثلاً '4g'
console.log(connection.downlink);      // مثلاً 2.4 (Mbps)

ساخت یک Hook در ری اکت برای تست سرعت اینترنت کاربر!

 

بیاید یه هوک بسازیم که این اطلاعاتو بهمون بده و در صورت تغییر، خودش آپدیت شه:

 

				
					import { useState, useEffect } from "react";

export const useNetworkSpeed = () => {
  const [networkInfo, setNetworkInfo] = useState({
    downlink: null,
    effectiveType: null,
  });

  useEffect(() => {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

    const updateInfo = () => {
      if (connection) {
        setNetworkInfo({
          downlink: connection.downlink,
          effectiveType: connection.effectiveType,
        });
      }
    };

    updateInfo();
    connection?.addEventListener("change", updateInfo);

    return () => connection?.removeEventListener("change", updateInfo);
  }, []);

  return networkInfo;
};

 استفاده از Hook بالا در کامپوننت های خودمون

 

حالا توی یه کامپوننت ساده، سرعت کاربر رو نشون می‌دیم:

				
					import React from "react";
import { useNetworkSpeed } from "./useNetworkSpeed";

const NetworkStatus = () => {
  const { downlink, effectiveType } = useNetworkSpeed();

  return (
    <div>
      {effectiveType ? (
        <p>نوع اتصال شما: {effectiveType} ({downlink} Mbps)</p>
      ) : (
        <p>در حال بررسی اتصال اینترنت...</p>
      )}
    </div>
  );
};

export default NetworkStatus;

حالا با این اطلاعات چیکار میتونیم بکنیم؟

۱. نسخه کم حجم تصاویر رو برای اینترنت ضعیف لود کنیم:

				
					if (effectiveType === "2g" || effectiveType === "slow-2g") {
  loadLowQualityImages();
}

۲. منابع غیرضروری رو دیرتر لود کنیم:

				
					if (effectiveType !== "4g") {
  // لود ویدیو یا فونت‌های خاص رو عقب بنداز
}

۳. پیام هشدار نمایش بدیم:

				
					{effectiveType === "2g" && (
  <div style={{ color: "red" }}>
    اینترنت شما ضعیف است. لطفاً کمی صبور باشید 🙏
  </div>
)}

جمع بندی


با استفاده از navigator.connection میتونیم یه درک نسبی از سرعت اینترنت کاربر داشته باشیم و بر اساس اون، تجربه کاربری بهتری براش بسازیم 🙂

چه برای اپ موبایل باشه، چه وب اپلیکیشن دسکتاپ، این یه ابزار ساده ولی مؤثره برای حرفه‌ ای تر کردن UX.

درباره احمد احمدنژاد

من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️

پست های مرتبط

دیدگاهتان را بنویسید