getBattery
내 기기 상태 대시보드
해결하는 문제
웹페이지가 내 기기에 대해 무엇을 알 수 있는지 알고 싶다.
웹페이지가 알 수 있는 기기 정보를 모아 보여 주고, 충전기나 와이파이 상태가 바뀌면 즉시 반영합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것브라우저가 알려 주는 기기 정보
브라우저가 하는 일변화 이벤트를 받아 갱신
나오는 것대시보드 타일
쓰는 브라우저 기술
Battery Status APINetwork Information APInavigator.onLinehardwareConcurrencymatchMedia
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- levelchange·online·offline 이벤트
- 개인정보 보호로 일부 값은 대략치
자주 막히는 곳
- 개인정보 보호로 메모리 값 등은 대략치만 준다
- 배터리 정보는 크롬 계열에서만 나온다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 이 PC에서 브라우저 AI가 돌아갈지 진단
- 교육 전 PC 사전 점검 보고서
웹 서비스
- 원격 지원 진단 페이지
- 설문 응답 환경 수집
피지컬 AI
- 배터리 부족 시 보조 장치 알림
- IoT 중계기 상태 모니터
넓히는 방법
- 배터리가 적으면 저전력 모드로 자동 전환
- 기기 성능에 맞춰 AI 모델 크기 고르기
- 교육장 PC 사양 점검표
지원 브라우저
PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
배터리, 인터넷 연결, 화면, CPU, 메모리처럼 웹페이지가 알 수 있는 기기 정보를 실시간 대시보드로 보여주는 웹페이지를 만들어줘.
같은 분류의 능력
12 보안·개인정보·권한에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md