احسب مستوى البطارية وحالة الشحن مع HTML5
عندما يزور شخص ما موقع الويب الخاص بك ، يمكنك بسهولة استرداد المعلومات حول مستوى شحن بطارية الهاتف المحمول أو الكمبيوتر المحمول من خلال واجهة برمجة تطبيقات HTML5. يتم دعم هذا حاليًا على Google Chrome و Opera & Firefox على سطح المكتب والكروم لنظام Android.
تنظر شركات مثل Uber إلى حالة بطارية الهاتف المحمول لعميلها وقد تطبق زيادة في الأسعار إذا كانت البطارية منخفضة بسبب إلحاح العميل.
يمكن تنفيذ واجهة برمجة تطبيقات البطارية مع خطوط قليلة من رمز JavaScript وتكشف جميع التفاصيل المطلوبة حول مستوى شحن البطارية للجهاز. ستعرف:
- سواء كانت البطارية يتم شحنها حاليًا أم لا.
- كم يتم شحن البطارية؟
- إذا كان الشحن ، كم ثوانٍ حتى يتم شحن البطارية بالكامل.
- الوقت المتبقي في ثوان حتى يتم تفريغ البطارية بالكامل.
تجريبي الوضع البطارية
يمكنك إرفاق مستمعي الأحداث بحيث يتم تحديث بيانات البطارية بمجرد تغيير مستوى شحن بطارية الأجهزة أثناء زائرك على صفحتك. يمكنك الذهاب خطوة واحدة إلى الأمام وحتى دمج هذا مع Google Analytics وتخزين مستوى شحن البطارية لأجهزة الزائر باستخدام الأحداث في التحليلات.
<script>
if (navigator.getBattery) {
navigator.getBattery().then(function (battery) {
display(battery);
});
} else if (navigator.battery) {
display(navigator.battery);
} else {
console.log('Sorry, Battery Status API is not supported');
}
function display(battery) {
console.log('Charge level? ' + battery.level);
console.log('Battery charging? ' + battery.charging);
console.log('Time to charge? ' + battery.chargingTime);
console.log('Time to discarge? ' + battery.dischargingTime);
}
</script>هذا يمكن أن يكون للعديد من حالات الاستخدام. على سبيل المثال ، عندما يعمل جهاز الزائر على البطارية ولم يتم توصيله ، يمكن لمطور الويب اختيار حفظ التغييرات تلقائيًا – مثل إدخالات النماذج – في LocalStorage قبل أن يتم تصريف البطارية تمامًا.
طباعة مستوى البطارية مع HTML5 API
<!-- The battery is not charging and the current level is 94% -->
<span id="batteryStatus"></span>
<script>
if ('getBattery' in navigator) {
navigator.getBattery().then((battery) => {
const { level, charging } = battery;
const status = charging ? 'charging' : 'not charging';
const percent = `${Math.round(level * 100)}%`;
const message = `The battery is ${status} and the current level is ${percent}`;
document.getElementById('batteryStatus').textContent = message;
});
}
</script>فيما يلي قائمة كاملة بالمتصفحات التي تدعم حاليًا واجهة برمجة تطبيقات حالة الخليط كما هو موجود على caniuse.com. لمعرفة المزيد ، راجع الوثائق على Mozilla و W3.
