vanilla javascript navigator로 사용자 언어, 배터리 상태, 위치, 기타 정보 가져오기

 

웹 브라우저 Navigator 객체

navigator 객체는 JavaScript에서 웹 브라우저와 상호작용할 수 있는 속성과 메서드들을 제공하는 객체입니다. 이 객체는 사용자의 브라우저 정보, 장치 정보, 네트워크 상태 등을 포함한 여러 가지 유용한 정보를 제공하여, 웹 애플리케이션이 사용자 환경에 맞춰 동작할 수 있도록 도와줍니다.

Navigator 객체의 주요 속성과 메서드

1. 사용자의 기본 언어 정보 확인

navigator.language 속성을 통해 사용자가 브라우저에서 설정한 기본 언어를 확인할 수 있습니다. 이를 통해 웹 애플리케이션은 사용자의 언어에 맞는 콘텐츠를 제공할 수 있습니다.

document.querySelector('.msg_language').innerText = navigator.language;

result :

2. 사용자의 언어 목록 확인

navigator.languages 속성을 통해 사용자가 설정한 언어 목록을 확인할 수 있습니다.

document.querySelector('.msg_languages').innerText = navigator.languages.join(', ');

result :

3. 사용자 에이전트 정보 확인

navigator.userAgent 속성을 통해 사용 중인 브라우저와 운영체제 정보를 확인할 수 있습니다. 이 정보를 바탕으로 특정 브라우저에서만 발생하는 버그를 해결하거나, 맞춤형 사용자 경험을 제공할 수 있습니다.

document.querySelector('.msg_userAgent').innerText = navigator.userAgent;

result :

4. 인터넷 연결 상태 확인

navigator.onLine 속성을 통해 사용자의 인터넷 연결 상태를 확인할 수 있습니다. 이 속성을 활용하여 사용자가 오프라인 상태일 때 대체 콘텐츠를 제공하거나, 데이터를 미리 캐싱하는 전략을 사용할 수 있습니다. true (온라인 상태) 또는 false (오프라인 상태)

document.querySelector('.msg_onLine').innerText = navigator.onLine;

result :

5. 배터리 상태 확인

navigator.getBattery() 메서드는 사용자의 장치가 배터리로 작동 중일 때, 배터리의 충전 상태와 남은 배터리 수명 등을 알려줍니다. 이를 활용하여 배터리가 부족할 때 에너지 효율적인 모드로 전환하는 등의 기능을 구현할 수 있습니다.

if (navigator.getBattery) {
    navigator.getBattery().then(function(battery) {
        document.querySelector('.msg_getBattery').innerText = (battery.level * 100) + '%';
    }).catch(function() {
        document.querySelector('.msg_getBattery').innerText = '배터리 정보를 가져올 수 없습니다.';
    });
} else {
    document.querySelector('.msg_getBattery').innerText = '배터리 API를 지원하지 않습니다.';
}
    

result :

6. 사용자의 위치 정보 확인

navigator.geolocation 객체를 통해 사용자의 위치 정보를 얻을 수 있습니다. 이를 활용하면 위치 기반 서비스를 제공하거나, 지도 서비스 등에서 사용자의 현재 위치를 표시할 수 있습니다.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        document.querySelector('.msg_geolocation_latitude').innerText = position.coords.latitude;
        document.querySelector('.msg_geolocation_longitude').innerText = position.coords.longitude;
    }, function() {
        document.querySelector('.msg_geolocation_latitude').innerText = '위치를 가져올 수 없습니다.';
        document.querySelector('.msg_geolocation_longitude').innerText = '위치를 가져올 수 없습니다.';
    });
} else {
    document.querySelector('.msg_geolocation_latitude').innerText = 'Geolocation API를 지원하지 않습니다.';
    document.querySelector('.msg_geolocation_longitude').innerText = 'Geolocation API를 지원하지 않습니다.';
}
    

위도 :

경도 :

7. 플랫폼 정보 확인

navigator.platform 속성을 통해 사용자의 운영체제 플랫폼 정보를 확인할 수 있습니다.

document.querySelector('.msg_platform').innerText = navigator.platform;

result :

8. 쿠키 사용 가능 여부 확인

navigator.cookieEnabled 속성을 통해 사용자의 브라우저에서 쿠키 사용이 가능한지 확인할 수 있습니다.

document.querySelector('.msg_cookieEnabled').innerText = navigator.cookieEnabled;

result :

9. 하드웨어 동시 처리 수 확인

navigator.hardwareConcurrency 속성을 통해 사용자의 장치가 지원하는 논리 프로세서의 수를 확인할 수 있습니다.

document.querySelector('.msg_hardwareConcurrency').innerText = navigator.hardwareConcurrency || '정보를 가져올 수 없습니다.';

result :

10. 장치 메모리 확인

navigator.deviceMemory 속성을 통해 사용자의 장치 메모리 크기를 확인할 수 있습니다. (단위: GB)

document.querySelector('.msg_deviceMemory').innerText = navigator.deviceMemory || '정보를 가져올 수 없습니다.';

result :

11. 현재 권한 상태 확인

navigator.permissions 객체를 통해 특정 권한의 상태를 확인할 수 있습니다.

if (navigator.permissions) {
    navigator.permissions.query({ name: 'geolocation' }).then(function(permissionStatus) {
        document.querySelector('.msg_permissions_geolocation').innerText = permissionStatus.state;
    }).catch(function() {
        document.querySelector('.msg_permissions_geolocation').innerText = '권한 상태를 가져올 수 없습니다.';
    });
} else {
    document.querySelector('.msg_permissions_geolocation').innerText = 'Permissions API를 지원하지 않습니다.';
}
    

Geolocation 권한 상태 :

12. 미디어 디바이스 정보 확인

navigator.mediaDevices 객체를 통해 사용자의 카메라, 마이크 등의 미디어 디바이스 정보를 확인할 수 있습니다.

if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
    navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
            const deviceList = devices.map(device => device.kind + ': ' + device.label || 'Unnamed Device').join('
');
            document.querySelector('.msg_mediaDevices').innerHTML = deviceList;
        })
        .catch(function() {
            document.querySelector('.msg_mediaDevices').innerText = '디바이스 정보를 가져올 수 없습니다.';
        });
} else {
    document.querySelector('.msg_mediaDevices').innerText = 'Media Devices API를 지원하지 않습니다.';
}
    

미디어 디바이스 목록 :

13. 클립보드 접근 확인

navigator.clipboard 객체를 통해 사용자의 클립보드에 접근할 수 있습니다. (HTTPS 환경에서만 작동)

if (navigator.clipboard) {
    navigator.clipboard.readText().then(function(text) {
        document.querySelector('.msg_clipboard').innerText = text || '클립보드에 텍스트가 없습니다.';
    }).catch(function() {
        document.querySelector('.msg_clipboard').innerText = '클립보드에 접근할 수 없습니다.';
    });
} else {
    document.querySelector('.msg_clipboard').innerText = 'Clipboard API를 지원하지 않습니다.';
}
    

클립보드 내용 :

14. 네트워크 정보 확인

navigator.connection 객체를 통해 사용자의 네트워크 연결 상태를 확인할 수 있습니다.

if (navigator.connection) {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    document.querySelector('.msg_networkType').innerText = connection.effectiveType || '알 수 없음';
} else {
    document.querySelector('.msg_networkType').innerText = 'Network Information API를 지원하지 않습니다.';
}
    

네트워크 유형 :

15. Java 활성화 여부 확인

navigator.javaEnabled() 메서드를 통해 사용자의 브라우저에서 Java가 활성화되어 있는지 확인할 수 있습니다.

document.querySelector('.msg_javaEnabled').innerText = navigator.javaEnabled() ? '활성화됨' : '비활성화됨';

Java 활성화 여부 :

16. 최대 터치 포인트 수 확인

navigator.maxTouchPoints 속성을 통해 사용자의 장치가 지원하는 최대 터치 포인트 수를 확인할 수 있습니다.

document.querySelector('.msg_maxTouchPoints').innerText = navigator.maxTouchPoints || '정보를 가져올 수 없습니다.';

최대 터치 포인트 수 :

17. 온라인/오프라인 이벤트 감지

인터넷 연결 상태가 변경될 때 이를 감지하여 실시간으로 업데이트할 수 있습니다.

window.addEventListener('online', function() {
    document.querySelector('.msg_onLine').innerText = '온라인';
});
window.addEventListener('offline', function() {
    document.querySelector('.msg_onLine').innerText = '오프라인';
});
    

현재 인터넷 상태 :