Introduction à une API pour afficher l'état de la batterie dans les compétences du didacticiel HTML5_html5

La part des appareils mobiles dans le trafic réseau augmente considérablement et le trafic réseau qu'ils contribuent est si énorme que nous avons créé certaines API et concepts de conception séparément pour les appareils mobiles. Un exemple très typique est l’API Battery Status du W3C, qui permet à une application d’obtenir les informations sur l’état de la batterie de l’appareil. Cet article explore cette nouvelle API et vous montre comment l'intégrer dans vos applications existantes.
Vérifiez si l'appareil prend en charge

À l'heure actuelle, l'API de la batterie ne bénéficie toujours pas d'un support général. Par conséquent, avant d'utiliser cette API, vous devez confirmer si l'appareil actuel prend en charge cette API. La fonction présentée ci-dessous renvoie une valeur Boone (Vrai/Faux) indiquant si le navigateur actuel prend en charge l'API d'état de la batterie.

Cette fonction détecte d'abord si l'objet navigator.battery existe. S'il n'est pas présent, continuez à détecter spécifique à Mozilla

Si navigator.mozBattery existe. J'ai vu du code qui détecte également l'objet webkitBattery, mais je ne peux pas confirmer qu'il existe dans Chrome.

Documentation de référence : https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery

Code XML/HTMLCopier le contenu dans le presse-papiers

1. functionisBatteryStatusSupported() {
2. retour !!(navigator.battery || navigator.mozBattery);
3. }

Vérifiez la batterie

Si l'objet batterie existe, il contiendra les quatre propriétés suivantes en lecture seule.

• Chargement - (valeur Boone) Indique si la batterie du système est actuellement en charge.

S'il n'y a pas de batterie dans le système ou s'il est impossible de déterminer si la batterie est en charge, la valeur de retour est True

• ChargingTime - (valeur numérique) Le temps nécessaire pour que la batterie soit complètement chargée (unité : secondes)

Lorsque la batterie est complètement chargée ou qu'il n'y a pas de batterie dans le système, cette valeur est 0.

Si le système ne se charge pas ou si le temps nécessaire pour charger complètement ne peut pas être déterminé, cette valeur est ∞ (infini).

• dischingTime - similaire à ChargingTime, (valeur numérique) le temps restant (unité : secondes) jusqu'à ce que la batterie soit complètement déchargée et que le système se mette en veille (unité : secondes)

Si le temps de décharge ne peut pas être déterminé, ou si le système n'a pas de batterie ou si le système est en charge, cette valeur est ∞ (infini)

• niveau —— (valeur numérique) Le niveau de puissance actuel de l'appareil. La valeur est comprise entre (0 et 1,0), correspondant au pourcentage de puissance restante.

1.0 signifie que la batterie est complètement chargée, ou qu'il n'y a pas de batterie, ou que la valeur ne peut pas être déterminée.

Détecter les événements de batterie

Toutes les propriétés ci-dessus sont liées à un événement de batterie. Ces événements sont utilisés pour indiquer des changements dans l'état de la batterie. Par exemple, le branchement d’une source d’alimentation modifie la propriété de charge de faux à vrai. Les quatre événements de batterie sont répertoriés ci-dessous :

• chargechange - Ce type d'événement sera déclenché lorsque l'attribut de charge change. Cet événement peut être capturé et géré par le gestionnaire d'événements onchargechange().
  Chargingtimechange - Ce type d'événement sera déclenché lorsque l'attribut Chargingtime change. Cet événement peut être capturé et géré par le gestionnaire d'événements onchargertimechange().
  dischingtimechange - Ce type d'événement sera déclenché lorsque la propriété dissolvingTime change. Cet événement peut être capturé et géré par le gestionnaire d'événements ondischargetimechange().
  Levelchange - Ce type d'événement sera déclenché lorsque l'attribut de niveau change. Cet événement peut être capturé et géré par le gestionnaire d'événements onlevelchange().

Exemple de page

Le code suivant montre comment utiliser les propriétés et les événements de l'API Battery Status.

La page d'exemple affiche les différentes valeurs de propriété de l'API et met à jour leurs valeurs lorsque l'événement est déclenché.

Cliquez ici pour accéder à des exemples en ligne.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >  
2. <htmllanghtmllang="fr" >  
3. <tête>  
4.   <title>L'API d'état de la batterie - Exempletitre>  
5.   <metacharsetmetacharset="UTF-8"/>  
6.   <script>  
7.     window.addEventListener("load", function() {   
8.       var batterie = navigateur.battery || navigateur.mozBattery ;   
9.       fonction displayBatteryStats() {   
10.         document.getElementById("chargement").textContent = (batterie.chargement) ? « en chargement » : « pas en chargement » ;   
11.         document.getElementById("chargementtime").textContent = batterie.chargementTime;   
12.         document.getElementById("dissolvingtime").textContent = batterie.dissolvingTime;   
13.         document.getElementById("level").textContent = batterie.level * 100 ;   
14.       }   
15.       si (batterie) {   
16.         displayBatteryStats();   
17.         battery.addEventListener("chargementchange", displayBatteryStats, false);   
18.         battery.addEventListener("chargertimechange", displayBatteryStats, false);   
19.         battery.addEventListener("dischargetimechange", displayBatteryStats, false);   
20.         battery.addEventListener("levelchange", displayBatteryStats, false);   
21.       } autre {   
22.         document.getElementById("stats").textContent = "Désolé, votre navigateur ne ne prend pas en charge l'API Battery Status ";   
23.       }   
24.     }, FAUX);   
25.   script>  
26. tête>  
27. <corps>  
28.   <divisedivise="statistiques" >  
29.     Votre batterie est actuellement <spanidspanid="en charge">span>.<br/>  
30.     Votre batterie sera chargée en <espagnolespagnol="temps de charge" >span> secondes.<br/>  
31.     Votre batterie sera déchargée en <spanidspanid="temps de décharge" >span> secondes.<br/>  
32.     Votre niveau de batterie est <spanidspanid="niveau">span>%.   
33.   div>  
34. corps>  
35. html>  

结论

L'API d'état de la batterie est également disponible. 。考虑到移动互联网的激增，开发者应该尽快将电池信息纳入设计范畴内。