احسب مستوى البطارية وحالة الشحن باستخدام HTML5

عندما يزور شخص ما موقع الويب الخاص بك، يمكنك بسهولة استرداد معلومات حول مستوى شحن بطارية هاتفه المحمول أو الكمبيوتر المحمول من خلال HTML5 Battery API. وهذا مدعوم حاليًا على Google Chrome وOpera وFirefox على سطح المكتب وعلى Chrome لنظام Android.

تنظر شركات مثل Uber إلى حالة بطارية الهاتف المحمول الخاص بعملائها وقد تطبق زيادة في الأسعار إذا كانت البطارية منخفضة بسبب إلحاح العميل.

يمكن تنفيذ واجهة برمجة تطبيقات البطارية باستخدام بضعة أسطر من كود JavaScript وتكشف جميع التفاصيل المطلوبة حول مستوى شحن بطارية الجهاز. ستتعرف على:

1. ما إذا كانت البطارية قيد الشحن حاليًا أم لا.
2. كم يتم شحن البطارية؟
3. في حالة الشحن، كم ثانية حتى يتم شحن البطارية بالكامل.
4. الوقت المتبقي بالثواني حتى يتم تفريغ البطارية بالكامل.

عرض توضيحي لحالة البطارية

يمكنك إرفاق مستمعي الأحداث بحيث يتم تحديث بيانات البطارية بمجرد تغيير مستوى شحن بطارية الجهاز بينما لا يزال الزائر على صفحتك. يمكنك المضي قدمًا خطوة أخرى وحتى دمج ذلك مع Google Analytics وتخزين مستوى شحن البطارية لأجهزة الزائر باستخدام الأحداث في 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>

فيما يلي قائمة كاملة بالمتصفحات التي تدعم حاليًا Batter Status API كما هو موجود على caniuse.com. لمعرفة المزيد، راجع الوثائق الموجودة على Mozilla وW3.