JavaScriptでネットワークのオンライン・オフライン監視する関数を作った

JSで端末のネットワークを監視して、オフラインの時はアラートを出す実装をしてた際のメモです。

ネットワークの監視は以下のように書いても良いんですが、

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

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

もうちょっとわかりやすく出来ればと思って、以下のように関数化してみました。

const watchOnline = function(callback) {
    window.addEventListener('online', () => callback(true))
    window.addEventListener('offline', () => callback(false))
    callback(navigator.onLine)
}

watchOnline((online) => {
    if (online) {
        console.log('online')
    } else {
        console.log('offline')
    }
})

これだと、ページ表示の際に実行されるのも良いです。

サンプルです。

See the Pen watch online/offline by daichi (@kandai) on CodePen.

参考
https://developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine