آموزش HTML5 Network Information API

Network Information API چیست؟

HTML5 Network Information API اطلاعاتی درباره نوع اتصال شبکه کاربر مانند سرعت اتصال، نوع (WiFi، ۴G، ۳G) و ذخیره داده (data saver) را در اختیار JavaScript می‌گذارد. با این اطلاعات می‌توانید تجربه کاربری را بر اساس وضعیت شبکه بهینه کنید؛ مثلاً در اتصال کند تصاویر کم‌کیفیت‌تر بارگذاری کنید یا ویدیوهای HD را غیرفعال کنید.

دسترسی به اطلاعات شبکه

const connection = navigator.connection ||
                  navigator.mozConnection ||
                  navigator.webkitConnection;

if (connection) {
    console.log("نوع:", connection.type);
    // "wifi", "cellular", "ethernet", "bluetooth", "wimax", "other", "none", "unknown"
    
    console.log("نوع مؤثر:", connection.effectiveType);
    // "slow-2g", "2g", "3g", "4g"
    
    console.log("سرعت دانلود:", connection.downlink, "Mbps");
    console.log("حداکثر دانلود:", connection.downlinkMax, "Mbps");
    
    console.log("RTT:", connection.rtt, "ms");
    // Round-Trip Time - تاخیر شبکه
    
    console.log("ذخیره داده:", connection.saveData);
    // true اگر کاربر حالت صرفه‌جویی داده فعال کرده باشد
} else {
    console.log("Network Information API پشتیبانی نمی‌شود");
}

تشخیص تغییر شبکه

if (navigator.connection) {
    navigator.connection.addEventListener("change", () => {
        const conn = navigator.connection;
        console.log("شبکه تغییر کرد!");
        console.log("نوع جدید:", conn.effectiveType);
        console.log("سرعت جدید:", conn.downlink, "Mbps");
        
        adaptToNetwork(conn);
    });
    
    adaptToNetwork(navigator.connection);
}

function adaptToNetwork(conn) {
    if (conn.saveData || conn.effectiveType === "slow-2g" || conn.effectiveType === "2g") {
        // حالت صرفه‌جویی
        loadLowQualityImages();
        disableAutoplay();
        reduceAnimations();
        showDataSaverNotice();
    } else if (conn.effectiveType === "3g") {
        // اتصال متوسط
        loadMediumQualityImages();
    } else {
        // اتصال خوب (4G, WiFi)
        loadHighQualityImages();
        enableHDVideo();
    }
}

محصول اورجینال INZIP

قالب وردپرس باریستا مخصوص کافه تم نسکافه ای روشن (دو زبانه)

دانلود پوسته وردپرس باریستا؛ قالب کافیشاپ، رُستری قهوه و فروشگاه قهوه دوزبانه با منوی رومیزی، رزرو آنلاین میز با کد پیامکی و ووکامرس. طراحی اختصاصی inzip.ir

تحویل آنی آپدیت رایگان بدون قفل لایسنس پشتیبانی واقعی

۳,۹۹۰,۰۰۰ تومان ۲,۹۶۰,۰۰۰ تومان

بازدید و دانلود آنی

٪۲۶

تخفیف ویژه

سود شما

۱,۰۳۰,۰۰۰ تومان

تصاویر سازگار با شبکه

function getImageUrl(baseUrl, conn) {
    if (!conn) return `${baseUrl}/hd.jpg`;
    
    if (conn.saveData) return `${baseUrl}/thumb.webp`;
    
    switch (conn.effectiveType) {
        case "slow-2g":
        case "2g":
            return `${baseUrl}/low.jpg`;
        case "3g":
            return `${baseUrl}/medium.jpg`;
        case "4g":
        default:
            return `${baseUrl}/hd.jpg`;
    }
}

const conn = navigator.connection;
const imgUrl = getImageUrl("/images/hero", conn);
document.getElementById("hero").src = imgUrl;

ویدیو سازگار با شبکه

const videoSources = {
    "low": "video-360p.mp4",
    "medium": "video-720p.mp4",
    "high": "video-1080p.mp4"
};

function getVideoQuality() {
    const conn = navigator.connection;
    if (!conn) return "high";
    if (conn.saveData || conn.effectiveType === "2g") return "low";
    if (conn.effectiveType === "3g") return "medium";
    return "high";
}

const video = document.getElementById("myVideo");
video.src = videoSources[getVideoQuality()];

// تنظیم مجدد هنگام تغییر شبکه
navigator.connection?.addEventListener("change", () => {
    const currentTime = video.currentTime;
    video.src = videoSources[getVideoQuality()];
    video.currentTime = currentTime;
    video.play();
});

آنلاین / آفلاین

window.addEventListener("online", () => {
    document.getElementById("status").textContent = "🟢 متصل";
    syncOfflineData();
});

window.addEventListener("offline", () => {
    document.getElementById("status").textContent = "🔴 آفلاین";
    enableOfflineMode();
});

// بررسی اولیه
if (!navigator.onLine) {
    enableOfflineMode();
}

فونت سازگار با شبکه

function loadFonts() {
    const conn = navigator.connection;
    
    if (conn && (conn.saveData || conn.effectiveType === "2g")) {
        // استفاده از فونت سیستم
        document.documentElement.style.setProperty("--font-family", "system-ui, sans-serif");
    } else {
        // بارگذاری فونت سفارشی
        const link = document.createElement("link");
        link.href = "https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap";
        link.rel = "stylesheet";
        document.head.appendChild(link);
    }
}

loadFonts();

جمع‌بندی

Network Information API ابزاری مفید برای ارائه تجربه بهتر به کاربران با اتصال کند است. با تطبیق کیفیت رسانه، غیرفعال کردن ویژگی‌های سنگین و رعایت حالت صرفه‌جویی داده، می‌توانید سایت را برای همه کاربران بهینه کنید.