ブラウザからインターネット接続状態を取得する

Navigator#onLineプロパティを使うことで、ブラウザからインターネット接続の状態を取得できる。

if (navigator.onLine === true) {
  console.log('ONLINE')
} else {
  console.log('OFFLINE')
}

また、online/offlineイベントをリスンすることで、インターネット接続の状態が変化したときに処理を実行できる。

window.addEventListener('online', () => {
  console.log('ONLINE')
})

window.addEventListener('offline', () => {
  console.log('OFFLINE')
})

用途としては、エディターを持つサービス（ブログやSNSなど）で、オンラインならchangeイベントでPUTリクエストをし自動保存。オフラインならLocalStorageやIndexedDBなどに保存して、onlineイベントが発火されたときにPUTリクエストで保存するなどが考えられる。

const editor = document.querySelector('#editor')

// 入力内容が変更されたら保存
editor.addEventListener('change', () => {
  if (navigator.onLine === true) {
    // オンラインならPUTリクエスト
    fetch('/api/posts', {
      method: 'PUT',
      body: editor.value
    })
  } else {
    // オフラインならLocalStorageに保存
    localStorage.setItem('draft', editor.value)
  }
})

window.addEventListener('online', () => {
  // オンラインになったらLocalStorageの内容をPUTリクエスト
  const draft = localStorage.getItem('draft')
  if (draft) {
    fetch('/api/posts', {
      method: 'PUT',
      body: draft
    })
    localStorage.removeItem('draft')
  }
})