useBattery

カテゴリ

エクスポートサイズ

743 B

最終更新日

先週

リアクティブなBattery Status API（バッテリーAPIと呼ばれることが多い）は、システムのバッテリ充電レベルに関する情報を提供し、バッテリレベルまたは充電状態が変化したときに送信されるイベントによって通知を受け取ることができます。これは、バッテリー残量が少なくなったときにアプリのリソース使用量を調整してバッテリー消費を削減したり、データ損失を防ぐためにバッテリーが切れる前に変更を保存したりするために使用できます。

デモ

ソースコード

isSupported: false
charging: false
chargingTime: 0
dischargingTime: 0
level: 1

使用方法

JavaScript

import { useBattery } from '@vueuse/core'

const { charging, chargingTime, dischargingTime, level } = useBattery()

状態	型	説明
charging	`ブール値`	デバイスが現在充電中かどうか。
chargingTime	`数値`	デバイスが完全に充電されるまでの秒数。
dischargingTime	`数値`	デバイスが完全に放電されるまでの秒数。
level	`数値`	現在の充電レベルを表す0～1の数値。

ユースケース

通常、私たちのアプリケーションはバッテリーレベルに配慮していません。バッテリー残量が少なくなっているユーザーに優しいアプリケーションにするために、いくつかの調整を行うことができます。

特別な「ダークモード」のバッテリセーバーテーマ設定をトリガーします。
ニュースフィードでの動画の自動再生を停止します。
重要ではないバックグラウンドワーカーを無効にします。
ネットワーク呼び出しを制限し、CPU/メモリ消費を削減します。

コンポーネントの使用例

この関数は、`@vueuse/components`パッケージを介して、レンダーレスコンポーネントバージョンも提供しています。使用方法の詳細はこちら。

Vue

<template>
  <UseBattery v-slot="{ charging }">
    Is Charging: {{ charging }}
  </UseBattery>
</template>

型定義

TypeScript

export interface BatteryManager extends EventTarget {
  charging: boolean
  chargingTime: number
  dischargingTime: number
  level: number
}
/**
 * Reactive Battery Status API.
 *
 * @see https://vueuse.dokyumento.jp/useBattery
 */
export declare function useBattery(options?: ConfigurableNavigator): {
  isSupported: ComputedRef<boolean>
  charging: Ref<boolean, boolean>
  chargingTime: Ref<number, number>
  dischargingTime: Ref<number, number>
  level: Ref<number, number>
}
export type UseBatteryReturn = ReturnType<typeof useBattery>