如何在React.js中查看在线状态

Question

我创建了一个函数，用于检查应用程序是否联机。然而，根据MDN文档，navigator.onLine在Chrome和Safari上给出了误报，我目前正在经历这种情况。有没有其他方法可以解决当前的问题？

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 useOnlineStatus

Answer 1

您可以尝试的一种方法是向自己的来源发送请求，以检查您的应用程序是否在线。

查询params(q(是随机的，以避免缓存响应。

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
}
}

Answer 2

您可以自定义类似的useEffect

const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

然后设置导航器内部功能"；useIsomorphicLayoutEffect"；像这个

useIsomorphicLayoutEffect(() => {
console.log(navigator.onLine ? "Online" : "OFFline");
});

希望这能帮助