JavaScript >> Javascript 文檔 >  >> Tags >> API

快速提示:使用 JavaScript Battery API

在本教程中,我們將向您展示如何使用 JavaScript Battery API 來改善急需充電器的用戶的用戶體驗。我們將了解 Battery API 本身,以及一些技術,以充分利用每一滴最寶貴的資源!

監控電池壽命

JavaScript 電池狀態 API 與設備的硬件對話,並為我們提供有關係統充電狀態的準確數據。它可以通過基於 promise 的 navigator.getBattery() 接口訪問,也可以直接通過 navigator.battery 對象訪問,儘管第二個選項現在已棄用且總體上不推薦使用。

一些瀏覽器缺乏對 Battery API 的支持(你猜對了,它們是 Safari 和 IE),所以快速的支持檢查可以在調試方面大有幫助:

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

一旦我們確定您的用戶可以訪問 API,獲取所需信息就非常容易:

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

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

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

getBattery() 方法返回一個承諾並使用 BatteryManager 解決 包含有關硬件當前狀態的各種信息的對象:

  • batteryManager.level - 當前充電,返回一個介於 0 和 1 之間的浮點數。
  • batteryManager.charging - 設備是否通電,返回真/假。
  • batteryManager.chargingTime - 以秒為單位的剩餘時間,直到完全充電。
  • batteryManager.dischargingTime - 電池沒電前的剩餘時間。

它還提供了可用於監視上述任何屬性的變化的事件。

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

結合原始數據和事件監聽器,我們可以很容易地設置一個低電量的監聽器:

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

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

        }
    });

一旦我們知道設備中還剩多少電量,我們就可以調整應用程序並在需要時打開省電模式。

保存能量

所有組件中最大的電池消耗者是屏幕。在智能手機和平板電腦上尤其如此,它們的 CPU 通常是節能的,而屏幕具有超超全 QHD 分辨率和兩個太陽的亮度。

為了解決這個問題,我們可以做的第一件事就是限制屏幕發出的光量。 JavaScript 無權直接控制亮度,但我們可以通過將調色板更改為較暗的主題來實現。

接下來我們可以做的是限制對外部資源的請求的數量和大小。這裡最大的消耗者是高分辨率圖像、廣告和大型 JavaScript 庫,因為它們需要大量帶寬才能下載。

在這裡,我們有兩個選項 - 加載一個替代的、更優化的資源,佔用空間更小,或者,如果圖像/廣告沒有描繪任何重要信息,則完全刪除它。應刪除所有背景圖像、視頻或動畫。

我們要討論的最後一個耗電者是 JavaScript。我們已經提到,下載大的庫和框架已經夠糟糕了,但是實際解析和執行 JS 塊也會導致不必要的開銷。

JavaScript 動畫會導致屏幕上的元素不斷重繪、偵聽來自服務器的通知以及多個 AJAX 請求,這些都會稍微消耗電池電量,但很快就會增加。根據這項研究,JavaScript 代碼消耗了雅虎總渲染能量的約 7%,亞馬遜上約 17%,YouTube 上超過 20%。

具有省電模式的應用程序

我們在一個簡單的演示應用程序中展示了上述一些概念。它由一個靜態網站組成,該網站會對剩餘的電池電量做出反應。當它低於 30% 時,應用會進入省電模式並變暗,停止所有動畫並移除所有廣告。

出於演示目的,我們的應用使用虛擬電池 可以在充滿電和幾乎沒電之間快速切換。它沒有 包含大量用於使用 Battery API 本身的代碼。

您可以從 下載 獲取演示的完整代碼 文章頂部附近的按鈕。它是用 Vue.js 編寫的,可以更輕鬆地監控數據,並且有很多評論可以指導您完成所有正在發生的事情。

進一步閱讀

如果您想了解更多關於電池狀態 API 或您寶貴的電池耗盡方式的信息,請查看以下優秀資源:

MDN 上的電池狀態 API - 此處
MDN 上的 BatteryManager 界面 - 這裡
提高應用程序電池壽命的 5 種方法 - 此處
誰殺死了我的電池:分析移動瀏覽器的能耗 - 此處


Tutorial JavaScript 教程
  1. 將對象推送到mongodb nodejs中的數組[關閉]

  2. 0.6 - NextJS 與 Guillermo Rauch

  3. 在運行時驗證 javascript 數據類型?是的,你好類型。

  4. 使用單 SPA

  5. 如何將 Chart.js 與 Node.js 一起使用並將其保存為圖像

  6. 使用 firebase 身份驗證和 firestore 添加用戶

  7. tsParticles v1.13.1 發布

  1. VueJS InertiaJS Uncaught (in promise) TypeError:Cannot read property ‘search’ of undefined

  2. 如何使用 javascript 在以下場景中替換 Unicode 字符?

  3. 在 JavaScript 中錯誤地添加兩個數字

  4. Next.js:頁面渲染的終極備忘單

  5. mousemove 上圖像之間的平滑混合/過渡

  6. 製作我自己的 ForEach() javascript – 未定義元素

  7. 初級開發者故事

  1. 面向 Web 開發人員的 vscode 擴展

  2. Neat-RTC:React 和 Vue 的 WebRTC 包裝器

  3. 在 iOS 上使用 react-native-maps 製作顯示用戶位置和方向的自定義標記

  4. 僅用幾行代碼和 Gmail 發送電子郵件的 3 種方法 - Javascript - 第 1 部分