🌐

[Vue3]オンラインか否かを判定・監視する

2 min read

navigator.online

navigator.onlineで、現在オンラインか否かを判定できます。
オンライン状態ならtrue、オフライン状態ならfalseになります。

console.log(navigator.online)

onlineイベント / offlineイベント

navigator.onlineは、あくまで現在のオンライン状態を取得するにすぎません。なので、「オンラインになったら何かをする」といった監視の処理はできません。

オンライン状態を監視するには、onlineイベントとofflineイベントを使用します。
オンラインになったらonlineイベントが発火され、オフラインになったらofflineイベントが発火します。

window.addEventListener('online', () => {
  console.log('オンラインになりました')
})
window.addEventListener('offline', () => {
  console.log('オフラインになりました')
})

Vue3でリアクティブに判定・監視する

Vue 3でリアクティブにオンライン状態を判定・監視できるようにします。
navigator.onlineを初期値として使い、onlineイベントとofflineイベントでオンライン状態を監視して切り替えます。

import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  setup(){
    const isOnline = ref(navigator.onLine)
    
    window.addEventListener('online', () => {
      isOnline.value = true
    })
    
    window.addEventListener('offline', () => {
      isOnline.value = false
    })
    
    watch(
      isOnline,
      isOnline => {
        if(isOnline) {
          console.log('オンラインです!')
	} else {
          console.log('オフラインです……')
        }
      },
      { immediate: true }
    )
  }
})

composableにする

汎用的に使えるように機能を切り出します。

useOnline.ts
import { ref } from 'vue'

export default function useOnline() {
  const isOnline = ref(navigator.onLine)

  window.addEventListener('online', () => {
    isOnline.value = true
  })
  window.addEventListener('offline', () => {
    isOnline.value = false
  })

  return { isOnline }
}

これを好きなタイミングで呼び出すことで、オンラインか否かの判定と監視を用意におこなえます。

import { defineComponent, watch } from 'vue'
import useOnline from './useOnline'

export default defineComponent({
  setup(){
    const { isOnline } = useOnline()
    
    watch(
      isOnline,
      isOnline => {
        if(isOnline) {
          console.log('オンラインです!')
	} else {
          console.log('オフラインです……')
        }
      },
      { immediate: true }
    )
  }
})

注意

navigator.onlineonline/offlineイベントは、ブラウザによって判定条件が異なったりなど、全面的に信頼できない部分もあります。詳細は参考リンクなどをご覧の上、各自で十分にテストをおこなった上で使用するようにしてください。

参考

Discussion

ログインするとコメントできます