useBattery
Keadaan baterai perangkat.
Peramban ini tidak menyediakan Battery Status API. Firefox dan Safari sudah mencabutnya.
Dukungan peramban untuk API ini menyusut, bukan bertambah — Firefox dan Safari sudah mencabutnya karena bisa dipakai menyidik perangkat. Karena itu isSupported harus benar-benar diperiksa di tempat pemakaian, dan tampilannya harus tetap masuk akal saat nilainya tidak pernah datang.
Nilai bawaannya sengaja optimistis — terisi penuh, tidak sedang mengisi — supaya tampilan yang memakainya tidak mengedipkan peringatan "baterai lemah" di peramban yang memang tidak akan pernah menjawab.
Pemasangan
npx shadcn-vue@latest add @kliping/use-battery Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: saat-terpasang.
Salin dulu is-browser, saat-terpasang — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { getCurrentScope, onScopeDispose, ref } from 'vue'
import { saatTerpasang } from '@/lib/saat-terpasang'
const PERISTIWA = [
'chargingchange',
'chargingtimechange',
'dischargingtimechange',
'levelchange',
] as const
interface ManajerBaterai extends EventTarget {
charging: boolean
chargingTime: number
dischargingTime: number
level: number
}
interface NavigatorDenganBaterai extends Navigator {
getBattery?: () => Promise<ManajerBaterai>
}
export function useBattery() {
const isSupported = ref(false)
const charging = ref(false)
const chargingTime = ref(0)
const dischargingTime = ref(0)
const level = ref(1)
let baterai: ManajerBaterai | null = null
let dibuang = false
const perbarui = () => {
if (!baterai || dibuang)
return
charging.value = baterai.charging
chargingTime.value = baterai.chargingTime
dischargingTime.value = baterai.dischargingTime
level.value = baterai.level
}
saatTerpasang(() => {
const nav = navigator as NavigatorDenganBaterai
if (typeof nav.getBattery !== 'function')
return
isSupported.value = true
nav.getBattery()
.then((manajer) => {
// Scope-nya bisa saja sudah mati saat promise ini sampai. Tanpa
// penjagaan ini, pendengarnya terpasang ke objek yang tidak akan pernah
// dilepas lagi oleh siapa pun.
if (dibuang)
return
baterai = manajer
perbarui()
for (const nama of PERISTIWA)
manajer.addEventListener(nama, perbarui)
})
.catch(() => {
// Sebagian peramban punya metodenya tapi menolak menjalankannya.
// Nilai bawaannya dipertahankan.
})
})
if (getCurrentScope()) {
onScopeDispose(() => {
dibuang = true
if (!baterai)
return
for (const nama of PERISTIWA)
baterai.removeEventListener(nama, perbarui)
})
}
return { isSupported, charging, chargingTime, dischargingTime, level }
}API
export function useBattery()