browser-device-info-web/index.js

Fetch device and browser details with battery, network, and dark mode support

// browser-device-info: A simple utility to fetch browser & device details

async function getDeviceInfo() {
    const ua = navigator.userAgent;
    const device = /Mobi|Android/i.test(ua) ? "Mobile" : "Desktop";
    const os = navigator.platform || "Unknown";
    const browser = getBrowserName();
    const screenSize = `${window.screen.width}x${window.screen.height}`;
    const touchSupport = 'ontouchstart' in window;
    const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const batteryInfo = await getBatteryStatus();
    const networkSpeed = await getNetworkSpeed();

    return {
        device,
        os,
        browser,
        screenSize,
        touchSupport,
        darkMode,
        batteryLevel: batteryInfo.level,
        charging: batteryInfo.charging,
        networkSpeed
    };
}

function getBrowserName() {
    if (navigator.userAgent.includes("Chrome")) return "Chrome";
    if (navigator.userAgent.includes("Firefox")) return "Firefox";
    if (navigator.userAgent.includes("Safari")) return "Safari";
    if (navigator.userAgent.includes("Edge")) return "Edge";
    return "Unknown";
}

async function getBatteryStatus() {
    if (navigator.getBattery) {
        try {
            const battery = await navigator.getBattery();
            return { level: Math.round(battery.level * 100) + "%", charging: battery.charging };
        } catch (error) {
            return { level: "Not available on iOS", charging: false };
        }
    }
    return { level: "Not available on iOS", charging: false };
}

async function getNetworkSpeed() {
    if (navigator.connection && navigator.connection.effectiveType) {
        return navigator.connection.effectiveType.toUpperCase();
    }

    // iOS fallback: Approximate network speed using a small ping test
    try {
        const startTime = performance.now();
        await fetch("https://www.google.com/favicon.ico", { mode: "no-cors" });
        const endTime = performance.now();
        const duration = endTime - startTime;

        if (duration < 100) return "FAST";
        if (duration < 300) return "MODERATE";
        return "SLOW";
    } catch (error) {
        return "Unknown";
    }
}

export default getDeviceInfo;