JavascriptからWebAPIを呼び出す前にオフラインの判定をする

オフライン判定の重要性

Webアプリケーションを開発するうえで、JavascriptからWebAPIを呼び出してデータを取得することはよくあります。最近であればaxiosのようなhttpクライアントのライブラリが人気で、簡単に実装することができるようになりました。HTTPリクエストを扱うにあたって、返却されたレスポンスのステータスコードなどを見てフロントエンドでエラーメッセージを表示する、ということはよくやっているかと思いますが、オフラインの場合は503のようなエラーコードが取得できません。オフライン時に適切なメッセージを表示することでユーザに気づかせることができます。

Javascriptでオフラインの判定をする

長々と前フリをかきましたが、実装方法は至ってシンプルです。

request.js

if (!navigator.onLine) {
  alert('オフラインになっています。電波状況が良い場所で再度お試しください。');
} else {
  // HTTPリクエストを投げる処理
}

ブラウザ実装状況

https://developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine
こちらを見ると、「？」が多いですが、私の手元で下記確認してます。

• Mobile Safari 10/11
• Mobile Chrome

おしまい。