Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Battery Status API lets you check the device's battery level and charging status. You can optimize your app based on battery life!
See how the API works (deprecated - may not function)
<div style="max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #d97706; margin-bottom: 20px;">🔋 Battery Status Demo</h2>
<div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 3px solid #f59e0b;">
<button id="checkBtn" style="padding: 12px 24px; background: #d97706; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 16px; width: 100%; margin-bottom: 15px;">
🔋 Check Battery Status
</button>
<div id="status" style="padding: 15px; background: white; border-radius: 6px; display: none;"></div>
</div>
<div style="background: #fee2e2; padding: 15px; border-radius: 6px; border-left: 4px solid #ef4444;">
<strong style="color: #991b1b;">⚠️ Note:</strong>
<span style="color: #7f1d1d;"> This API is deprecated and removed from most browsers for privacy reasons. Demo may not work.</span>
</div>
</div>Loading preview...
// Get battery status (if supported)
async function checkBattery() {
if ('getBattery' in navigator) {
try {
const battery = await navigator.getBattery();
// Battery level (0 to 1)
const level = Math.floor(battery.level * 100);
console.log('Battery Level:', level + '%');
// Charging status
console.log('Charging:', battery.charging);
// Time until fully charged (seconds)
console.log('Charging Time:', battery.chargingTime);
// Time until battery empty (seconds)
console.log('Discharge Time:', battery.dischargingTime);
} catch (error) {
console.error('Battery API error:', error);
}
} else {
console.log('Battery API not supported');
}
}
checkBattery();
// 🎯 Note: Removed from Chrome/Edge for privacy reasons// Monitor battery changes
async function monitorBattery() {
if ('getBattery' in navigator) {
const battery = await navigator.getBattery();
// Listen for level changes
battery.addEventListener('levelchange', () => {
const level = Math.floor(battery.level * 100);
console.log('Battery level changed:', level + '%');
// Show warning if low
if (level < 20 && !battery.charging) {
alert('Low battery! Consider saving your work.');
}
});
// Listen for charging status
battery.addEventListener('chargingchange', () => {
if (battery.charging) {
console.log('Device is charging');
} else {
console.log('Device is not charging');
}
});
// Charging time changed
battery.addEventListener('chargingtimechange', () => {
console.log('Charging time:', battery.chargingTime);
});
// Discharge time changed
battery.addEventListener('dischargingtimechange', () => {
console.log('Discharge time:', battery.dischargingTime);
});
}
}
monitorBattery();
// 🎯 Could adjust app features based on batteryReduce quality/features when battery low
Adjust graphics quality for battery life
Optimize behavior on low battery
Warn user to save when battery low
const battery = await navigator.getBattery();
console.log(battery.level); // 0 to 1
console.log(battery.charging); // true/falsebattery.addEventListener('levelchange', () => {
console.log('Battery:', battery.level * 100 + '%');
});⚠️ Deprecated: Removed from most browsers for privacy
Battery percentage
Value: 0 to 1
Charging status
Boolean value
Removed from browsers
Privacy concerns
Mainly for mobile
Desktop always "charging"
prefers-reduced-motion instead for battery-conscious UX.