Perlu disebut supaya tidak dipercaya berlebihan: navigator.onLine cuma tahu ada tidaknya sambungan jaringan, bukan ada tidaknya internet. Wi-Fi yang tersambung ke router mati tetap dilaporkan true. Untuk keperluan yang sungguh-sungguh, satu permintaan kecil ke server sendiri lebih bisa dipercaya daripada nilai ini.
Bernilai true saat dirender di server: menganggap orang tersambung sampai terbukti sebaliknya lebih baik daripada mengedipkan pesan "Anda offline" pada setiap pemuatan halaman pertama.
Installation
pnpm dlx kliping@latest add use-is-onlineIkut terpasang sendiri: is-browser, try-on-mounted, use-event-listener.
Salin dulu is-browser, try-on-mounted, target, use-event-listener — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { readonly, ref } from 'vue'
import { isBrowser } from '@/lib/is-browser'
import { tryOnMounted } from '@/lib/try-on-mounted'
import { useEventListener } from '@/composables/use-event-listener'
export function useIsOnline() {
const isOnline = ref(true)
const update = () => {
if (isBrowser) isOnline.value = navigator.onLine
}
tryOnMounted(update)
useEventListener(['online', 'offline'], update)
return readonly(isOnline)
}Requirements
| Requirement | Value |
|---|---|
| Project | Vue 3.5+, alias @ — disiapkan kliping init |
| Kliping items | is-browser, try-on-mounted, use-event-listener |
| Files | composables/use-is-online.ts |
API Reference
export function useIsOnline()Parameters
Tanpa parameter.
Returns
Readonly<Ref<boolean, boolean>> — Whether the browser is online. Reactive, read-only.
Credits
Berasal dari shadcn-hooks (MIT, Copyright (c) 2025 Brendan Dash). Rantai lengkapnya di Credits.