Zenn
🌐

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

2021/08/23に公開
Vue.js
Vue 3
tech

JavaScript のオンライン判定のおさらい

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,
      () => {
        if(isOnline.value) {
          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,
      () => {
        if(isOnline.value) {
          console.log('オンラインです！')
	} else {
          console.log('オフラインです……')
        }
      },
      { immediate: true }
    )
  }
})

注意

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

参考

Discussion