useNetwork
Keadaan jaringan, selengkap yang mau diberitahu peramban.
Tersambung: true
Jenis efektif: —
Kecepatan turun: — Mb/s
Hemat data: —
Tanda “—” berarti peramban ini tidak menyediakan navigator.connection.
Lebih rinci dari useIsOnline: selain tersambung atau tidak, di peramban berbasis Chromium ada juga perkiraan jenis sambungan, kecepatan turun, dan waktu tempuh. Semuanya opsional — Safari dan Firefox tidak menyediakan navigator.connection sama sekali, dan di sana isian itu tetap undefined.
Yang paling berguna dari semuanya justru saveData: kalau bernilai true, orangnya secara sadar meminta hemat data, dan gambar besar atau pemuatan awal yang boros sebaiknya ditahan.
Pemasangan
npx shadcn-vue@latest add @kliping/use-network Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: saat-terpasang, use-event-listener.
Salin dulu is-browser, saat-terpasang, target, use-event-listener — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { readonly, ref } from 'vue'
import { saatTerpasang } from '@/lib/saat-terpasang'
import { useEventListener } from '@/composables/use-event-listener'
export interface KeadaanJaringan {
online: boolean
since?: Date
rtt?: number
type?: string
downlink?: number
downlinkMax?: number
saveData?: boolean
effectiveType?: string
}
function ambilSambungan(): any {
if (typeof navigator !== 'object')
return null
const nav = navigator as any
return nav.connection ?? nav.mozConnection ?? nav.webkitConnection ?? null
}
function bacaSambungan(): Partial<KeadaanJaringan> {
const c = ambilSambungan()
if (!c)
return {}
return {
rtt: c.rtt,
type: c.type,
saveData: c.saveData,
downlink: c.downlink,
downlinkMax: c.downlinkMax,
effectiveType: c.effectiveType,
}
}
export function useNetwork() {
const keadaan = ref<KeadaanJaringan>({ online: true })
const perbarui = (tersambung?: boolean) => {
keadaan.value = {
...keadaan.value,
...(tersambung === undefined ? {} : { online: tersambung, since: new Date() }),
...bacaSambungan(),
}
}
saatTerpasang(() => {
keadaan.value = { online: navigator.onLine, ...bacaSambungan() }
})
useEventListener('online', () => perbarui(true))
useEventListener('offline', () => perbarui(false))
// `navigator.connection` adalah EventTarget tersendiri, bukan bagian dari
// window — jadi pendengarnya dipasang ke sana, dan dilepas bersama scope
// lewat useEventListener yang sama.
useEventListener('change', () => perbarui(), {
target: () => ambilSambungan(),
})
return readonly(keadaan)
}API
export interface KeadaanJaringan {
online: boolean
since?: Date
rtt?: number
type?: string
downlink?: number
downlinkMax?: number
saveData?: boolean
effectiveType?: string
}
export function useNetwork()