자바스크립트로 배터리 상태를 확인하는 방법(간단한 2단계)

이 튜토리얼에서는 javascript 배터리 API를 사용하여 시스템의 배터리 상태를 얼마나 쉽게 확인할 수 있는지 보여드리겠습니다.

배터리 API를 사용하면 시스템 배터리에 대한 다양한 정보를 추출할 수 있어 사용자가 급히 충전해야 하는 경우에도 사용자 경험을 높일 수 있습니다.

배터리 정보 얻기

배터리 API는 모든 브라우저에서 작동하지 않으므로 먼저 배터리 상태를 확인하기 전에 브라우저가 배터리 API를 지원하는지 여부를 확인해야 합니다.

브라우저에서 작동하는 API 확인

이제 브라우저에서 API의 작동을 확인하려면 아래 예와 같이 네비게이터 API에서 getBattery 메서드를 사용해야 합니다.

if(navigator.getBattery){
    // if battery API is working
}
else{
    // if battery API is not working
}

배터리 상태 확인

배터리 API가 작동하는 경우 getBattery() API를 사용하여 배터리 비율을 확인할 수 있으며 이 API는 promise 을 반환합니다.

navigator.getBattery()
    .then(function(battery) {

        // Get current battery level .
        var batteryLevel = battery.level * 100;
        console.log(batteryLevel);
    })
    .catch(function(e) {
        console.error(e);
    });

battery 개체에는 시스템 배터리에 대한 추가 정보를 추출하는 데 사용할 수 있는 다음과 같은 속성이 있습니다.

battery.level : 배터리 잔량 확인용

battery.charging : 배터리가 현재 충전 중인지 확인(참/거짓)

battery.chargingTime : 배터리를 완전히 충전할 때까지 남은 시간을 확인하기 위해

battery.dischargingTime : 배터리가 방전된 상태에서 남은 시간을 확인합니다.

이제 이러한 모든 속성의 변경 사항을 실시간으로 감지하기 위해 javascript는 아래와 같이 몇 가지 이벤트 리스너를 제공합니다.

battery.onlevelchange : 배터리 수준의 변화를 감지하기 위해

battery.onchargingchange : 배터리의 전원 플러그 인/아웃 변경 감지

battery.onchargingtimechange : 배터리 수준의 변화를 감지하기 위해

battery.onlevelchange : 배터리 수준의 변화를 감지하기 위해

아래 예에서 배터리 수준이 15% 미만으로 내려가는 즉시 시스템을 충전기에 연결하라는 경고 팝업이 나타납니다.

여기에서 전체 기사 읽기 👉 https://bepractical.tech/how-to-check-battery-status-with-javascript-2-simple-steps/