- 배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다.
- 배터리량과 남은 배터리 사용 시간을 조회할 수 있다.
브라우저 지원 범위
- Chrome / Edge / Opera / Android 에서 지원한다.
- Browser compatibility
코드 예제
- 6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다.
- 데모보기
<!DOCTYPE html>
<html class="w-full h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>React</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body class="w-full h-full">
<div id="root" class="w-full h-full"></div>
<script type="text/babel">
const MyApp = () => {
const [batteryStatus, setBatteryStatus] = React.useState({
charging: false,
level: 0,
chargingTime: 0,
dischargingTime: 0
});
const batteryManagerRef = React.useRef(null);
const EVENT_LIST = React.useRef([
"chargingchange",
"levelchange",
"chargingtimechange",
"dischargingtimechange",
]);
const onChangeBattery = React.useCallback(() => {
if (batteryManagerRef.current === null) return;
const {
charging,
level,
chargingTime,
dischargingTime,
} = batteryManagerRef.current;
setBatteryStatus({
charging,
level,
chargingTime,
dischargingTime,
})
}, []);
const addEventListener = React.useCallback(() => {
if (batteryManagerRef.current === null) return;
EVENT_LIST.current.forEach(eventName => {
batteryManagerRef
.current
.addEventListener(eventName, onChangeBattery);
});
}, []);
const removeEventListener = React.useCallback(() => {
if (batteryManagerRef.current === null) return;
EVENT_LIST.current.forEach(eventName => {
batteryManagerRef
.current
.removeEventListener(eventName, onChangeBattery);
});
}, []);
React.useEffect(() => {
navigator.getBattery()
.then((battery) => {
batteryManagerRef.current = battery;
onChangeBattery();
addEventListener();
});
return removeEventListener;
}, [])
return <div className="h-full w-full text-xl text-center flex flex-col gap-y-5 pt-5">
<span>충전중 상태: <strong>{batteryStatus.charging ? "Yes" : "No"}</strong></span>
<span>베터리량: <strong>{batteryStatus.level * 100}%</strong></span>
<span>100% 충전까지 남은 시간: <strong>{batteryStatus.chargingTime} seconds</strong></span>
<span>남은 베터리 사용 시간: <strong>{batteryStatus.dischargingTime} seconds</strong></span>
</div>;
}
ReactDOM
.createRoot(document.querySelector('#root'))
.render(<MyApp />);
</script>
</body>
</html>공식 사이트 링크
자바스크립트로 배터리 상태 조회하기
배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다. 배터리량과 남은 배터리 사용 시간을 조회...
blog.naver.com
728x90
'선행개발' 카테고리의 다른 글
| 메인 스레드 최적화를 위한 Scheduling API (0) | 2023.08.08 |
|---|---|
| 자바스크립트로 공유 기능 커스텀하기 (0) | 2023.07.13 |
| 자바스크립트로 인터넷 속도 측정하기 (0) | 2023.07.13 |
| 자바스크립트로 기기의 진동 컨트롤하기 (0) | 2023.07.07 |
| 선행개발 소개 (0) | 2023.07.06 |