He creado una función que comprueba si la aplicación está en línea o no. Sin embargo, según la documentación de MDN, navigator.onLine está dando falsos positivos en Chrome y Safari que estoy experimentando en este momento. ¿Hay alguna otra manera de resolver este problema actual?
useOnlineStatus.ts:
import { useEffect, useState } from 'react' const getOnlineStatus = (): boolean => { return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true } const useOnlineStatus = (): boolean => { const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus()) const goOnline = () => setOnlineStatus(true) const goOffline = () => setOnlineStatus(false) useEffect(() => { window.addEventListener('online', goOnline) window.addEventListener('offline', goOffline) return () => { window.removeEventListener('online', goOnline) window.removeEventListener('offline', goOffline) } }, []) return onlineStatus } export default useOnlineStatusUna forma que podría intentar es enviar una solicitud a su propio origen para verificar si su solicitud está en línea o no.
Los parámetros de consulta (q) se aleatorizan para evitar respuestas almacenadas en caché.
const isAppOnline = async() => { if (!window.navigator.onLine) return false const url = new URL(window.location.origin) url.searchParams.set('q', new Date().toString()) try { const response = await fetch( url.toString(), { method: 'HEAD' }, ) return response.ok } catch { return false } }