JavaScriptでネットワークの状態を確認する 📡

そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。

そんなときは、 Navigator.onLine を使うとブラウザのオンライン状態を取得することができます。

developer.mozilla.org

基本的には、window.navigator.onLineの値を確認するだけでOKで、オンラインであればtrue、オフラインであればfalseが返ってきます。

window.navigator.onLine; // true or false

window.navigator.onLineが切り替わった際にコールバックイベントを実行したい場合は、

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

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

window.onoffline = () => {
  console.log('offline');
});

window.ononline = () => {
  console.log('online');
});

という感じで設定できます。