フロントエンドがバッテリー情報を取得する方法について話しましょう

今日のポジティブなエネルギー: 奇妙な要求が増えているときは、あなたの視野も広くなっている証拠です。

プロダクト マネージャー: 要望を追加したいのですが、ユーザーのコンピューター機器の電源が切れそうになっている場合は、電源を差し込んでくださいと温かく伝えたいと思います。

フロントエンド包囲ライオン:。 。 。彼のコンピュータは彼に思い出させないだろうか？

プロダクトマネージャー: やってみますか?

フロントエンド包囲ライオン: やってみよう!

まえがき

テクノロジーの発展が進むにつれて、Web フロントエンド テクノロジーは私たちが想像しているよりもはるかに強力になっています。このブラウザを使用すると、Web サイトは、バッテリーの割合、残量、充電状態など、ユーザーのデバイスのバッテリー状態情報を取得できます。この情報を使用して、ユーザーのデバイスのバッテリーレベルに基づいてアプリの動作を調整できます。この記事では、Battery Status API を使用して、フロントエンドでバッテリー情報を取得する方法を説明します。

バッテリー ステータス API の使用法

バッテリー ステータス API は、Web アプリケーションがユーザー デバイスのバッテリー ステータス情報にアクセスできるようにする Web API です。この API を使用すると、アプリケーションをインストールせずに、Web ブラウザからデバイスのバッテリー情報を直接読み取ることができます。

デバイスのバッテリー情報を取得する主な手順は次のとおりです。

// 请求电池信息
navigator.getBattery().then(function (battery) {
  // 后续代码
})

は Promise オブジェクトを返します。これは BatteryManager オブジェクトに解決され、これを使用してバッテリーのプロパティを読み取ることができます。デバイス。

navigator.getBattery().then(function (battery) {
  // 获取设备电量剩余百分比
  var level = battery.level //最大值为1,对应电量100%
  console.log('Level: ' + level * 100 + '%')

  // 获取设备充电状态
  var charging = battery.charging
  console.log('充电状态: ' + charging)

  // 获取设备完全充电需要的时间
  var chargingTime = battery.chargingTime
  console.log('完全充电需要的时间: ' + chargingTime)

  // 获取设备完全放电需要的时间
  var dischargingTime = battery.dischargingTime
  console.log('完全放电需要的时间: ' + dischargingTime)
})

バッテリー状態の変化を聞く

ユーザー デバイスのバッテリー状態をより適切に反映するために、フロントエンドにイベントを追加してバッテリー状態の変化を監視できます。たとえば、デバイスのバッテリー レベルが変化するとイベントがトリガーされます。

navigator.getBattery().then(function (battery) {
  // 添加事件，当设备电量改变时触发
  battery.addEventListener('levelchange', function () {
    console.log('电量改变: ' + battery.level)
  })

  // 添加事件，当设备充电状态改变时触发
  battery.addEventListener('chargingchange', function () {
    console.log('充电状态改变: ' + battery.charging)
  })

  // 添加事件，当设备完全充电需要时间改变时触发
  battery.addEventListener('chargingtimechange', function () {
    console.log('完全充电需要时间: ' + battery.chargingTime)
  })

  // 添加事件，当设备完全放电需要时间改变时触发
  battery.addEventListener('dischargingtimechange', function () {
    console.log('完全放电需要时间: ' + battery.dischargingTime)
  })
})

互換性

互換性の点では、Battery Status API はすべてのデバイスとオペレーティング システムに適用できるわけではありません。開発者は互換性を処理する必要があります。私たちのアプリケーションがすべてのデバイスで実行できること。この API に対応する互換性ビューは次のとおりです。

Battery Status API を介してデバイスのバッテリー情報を取得することは、デバイスのバッテリーのステータスに基づいてアプリケーションを最適化できる非常に強力な方法です。の振る舞い。この API はすべてのデバイスやオペレーティング システムで機能するわけではなく、一部のデバイス メーカーではバッテリー情報の共有を許可していない場合があることに注意することが重要です。

以上がフロントエンドがバッテリー情報を取得する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。