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

Question

我创建了一个 function 来检查应用程序是否在线。 但是，根据 MDN 文档， navigator.onLine对我目前正在经历的 Chrome 和 Safari 给出了误报。 有没有其他方法可以解决这个当前的问题？

使用在线状态.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

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

查询参数 (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
  }
}