Rychlý tip:Práce s rozhraním JavaScript Battery API

V tomto tutoriálu vám ukážeme, jak používat JavaScript Battery API ke zlepšení uživatelského zážitku pro lidi, kteří zoufale potřebují nabíječku. Podíváme se na samotné Battery API a také na některé techniky, jak z každé kapky toho nejcennějšího zdroje vytěžit maximum!

Monitorování životnosti baterie

JavaScript Battery Status API mluví s hardwarem zařízení a poskytuje nám přesná data o stavu nabíjení systému. Lze k ní přistupovat přes rozhraní navigator.getBattery() založené na slibech nebo přímo přes objekt navigtator.battery, ačkoli druhá možnost je nyní zastaralá a celkově se nedoporučuje.

Některé prohlížeče postrádají podporu pro Battery API (uhodli jste, jsou to Safari a IE), takže rychlá kontrola podpory může z hlediska ladění znamenat dlouhou cestu:

if(navigator.getBattery){
    // Battery API available.
    // Rest of code goes here.
}
else{
    // No battery API support.
    // Handle error accordingly.
}

Jakmile jsme si jisti, že váš uživatel má přístup k API, je získání potřebných informací opravdu snadné:

navigator.getBattery()
    .then(function(batteryManager) {

        // Get current charge in percentages.
        var level = batteryManager.level * 100;

    })
    .catch(function(e) {
        console.error(e);
    });

getBattery() metoda vrátí příslib a vyřeší pomocí BatteryManager objekt obsahující různé informace o aktuálním stavu hardwaru:

  • batteryManager.level - Aktuální nabití vrací float mezi 0 a 1.
  • batteryManager.charging - Je zařízení napájeno nebo ne, vrátí hodnotu true/false.
  • batteryManager.chargingTime - Zbývající čas v sekundách do úplného nabití.
  • batteryManager.dischargingTime - Zbývající čas do vybití baterie.

Poskytuje také události, které lze použít ke sledování změn v kterékoli z výše uvedených vlastností.

  • BatteryManager.onlevelchange
  • BatteryManager.onchargingchange
  • BatteryManager.onchargingtimechange
  • BatteryManager.ondischargingtimechange

Kombinací nezpracovaných dat s posluchači událostí můžeme snadno nastavit hlídač nízké úrovně baterie:

navigator.getBattery()
    .then(function(battery) {    
        battery.onlevelchange = function() {

            if(battery.level<0.3 && !battery.charging) {
                powerSavingMode = true;
            }

        }
    });

Jakmile víme, kolik šťávy v zařízení zbývá, můžeme aplikaci přizpůsobit a v případě potřeby zapnout úsporný režim.

Úspora energie

Největším žroutem baterie ze všech komponent je obrazovka. To platí zejména pro chytré telefony a tablety, kde procesory často šetří energii, zatímco obrazovky mají super-ultra-full-QHD rozlišení s jasem dvou sluncí.

První a nejdůležitější věcí, kterou můžeme udělat pro vyřešení tohoto problému, je omezit množství světla, které obrazovka vyzařuje. JavaScript nemá oprávnění přímo ovládat jas, ale můžeme to udělat změnou barevné palety na tmavší motiv.

Další věc, kterou můžeme udělat, je omezit množství a velikost požadavků na externí zdroje. Největším problémem jsou obrázky ve vysokém rozlišení, reklamy a velké knihovny JavaScriptu, protože ke stažení potřebují velkou šířku pásma.

Zde máme dvě možnosti – načíst alternativní, optimalizovanější zdroj s menším půdorysem, nebo zcela odstranit obrázek/reklamu, pokud nezobrazuje žádné podstatné informace. Všechny obrázky na pozadí, videa nebo animace by měly být odstraněny.

Posledním odkapávačem baterie, o kterém budeme mluvit, je JavaScript. Již jsme zmínili, že stahování velkých knihoven a rámců je dost špatné, ale skutečná analýza a provádění bloku JS může také vést ke zbytečným výdajům.

Animace JavaScriptu, které způsobují neustálé překreslování prvků na obrazovce, naslouchání oznámením ze serveru a vícenásobné požadavky AJAX, to vše může trochu vybít baterii, ale rychle se sčítá. Podle této studie spotřebovává kód JavaScript ~7 % celkové vykreslovací energie Yahoo, ~17 % na Amazonu a více než 20 % na YouTube.

Aplikace s režimem úspory energie

Některé z výše uvedených konceptů jsme předvedli v jednoduché ukázkové aplikaci. Skládá se ze statické webové stránky, která reaguje na zbývající kapacitu baterie. Když klesne pod 30 %, aplikace přejde do úsporného režimu a ztmavne, zastaví všechny animace a odstraní všechny reklamy.

Pro demonstrační účely naše aplikace funguje s virtuální baterií umožňující rychlé přepínání mezi plně nabitým a téměř mrtvým. není obsahují mnoho kódu pro práci se samotným Battery API.

Úplný kód pro demo můžete získat z Stáhnout tlačítko v horní části článku. Je napsán ve Vue.js pro snadnější sledování dat a má spoustu komentářů, které vás provedou vším, co se děje.

Další čtení

Pokud se chcete dozvědět více o Battery Status API nebo o tom, jak se vaše drahocenná baterie vybíjí, podívejte se na tyto skvělé zdroje:

Battery Status API na MDN - zde
Rozhraní BatteryManager na MDN - zde
5 způsobů, jak zlepšit výdrž baterie ve vaší aplikaci – zde
Kdo mi zabil baterii:Analýza spotřeby energie mobilního prohlížeče – zde