オンライン判定 — navigator.onLine
ブラウザには「今ネットに接続できているかどうか」を判定するためのプロパティがあります。それが navigator.onLine です。true なら「オンライン」、false なら「オフライン」と判定されます。
基本のコード例
<script>
if (navigator.onLine) {
console.log("オンラインです");
} else {
console.log("オフラインです");
}
</script>
- 戻り値: 真偽値（
true/false） - 注意: 「オンライン＝インターネットに必ずつながる」ではなく、「ブラウザがネットワークに接続可能と認識している」状態。
状態変化を検知する（イベント）
<script>
window.addEventListener("online", () => {
console.log("ネット接続が復帰しました");
});
window.addEventListener("offline", () => {
console.log("ネット接続が切れました");
});
</script>
onlineイベント: ネットワークが復帰したときに発火。offlineイベント: ネットワークが切れたときに発火。
よく使うテンプレート集
UIに接続状態を表示
<div id="status"></div>
<script>
const status = document.getElementById("status");
function updateStatus() {
status.textContent = navigator.onLine ? "オンライン" : "オフライン";
}
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
updateStatus(); // 初期表示
</script>
オフライン時に保存して、オンライン時に送信
let queue = [];
function sendData(data) {
if (navigator.onLine) {
// サーバーへ送信
fetch("/api", { method: "POST", body: JSON.stringify(data) });
} else {
// オフラインなら一時保存
queue.push(data);
}
}
window.addEventListener("online", () => {
// 復帰したらまとめて送信
queue.forEach(d => fetch("/api", { method: "POST", body: JSON.stringify(d) }));
queue = [];
});
例題: 簡易オフライン通知バー
<div id="banner" style="background:red;color:white;display:none;">
オフラインです。ネット接続を確認してください。
</div>
<script>
const banner = document.getElementById("banner");
function updateBanner() {
banner.style.display = navigator.onLine ? "none" : "block";
}
window.addEventListener("online", updateBanner);
window.addEventListener("offline", updateBanner);
updateBanner(); // 初期状態を反映
</script>
- 効果: ネットが切れると赤いバーが表示され、復帰すると消える。
実務でのコツ
- 判定は簡易的:
navigator.onLineは「ネットワーク接続があるかどうか」程度。実際にインターネットに到達できるかは保証しない。- 例: Wi-Fiにつながっていても、外部サイトにアクセスできない場合は
trueのまま。
- 例: Wi-Fiにつながっていても、外部サイトにアクセスできない場合は
- 確実に確認したい場合: 実際に
fetchでサーバーにアクセスしてみる。 - イベントを活用:
online/offlineイベントでUIを更新するとユーザーに優しい。 - オフライン対応: PWA（プログレッシブウェブアプリ）では Service Worker と組み合わせて「オフラインでも動く」仕組みを作る。
ありがちなハマりポイントと対策
- 「オンラインなのに通信できない」:
- 原因: DNSやサーバー障害。
- 対策: 実際に
fetchで確認する。
- イベントが発火しない:
- 原因: ネットワーク切断がブラウザに認識されない場合。
- 対策: 定期的にサーバーへアクセスして確認する。
練習問題（接続状態をリアルタイム表示）
<p>現在の状態: <span id="state"></span></p>
<script>
const state = document.getElementById("state");
function update() {
state.textContent = navigator.onLine ? "オンライン" : "オフライン";
}
window.addEventListener("online", update);
window.addEventListener("offline", update);
update(); // 初期表示
</script>
- 効果: ページ上に「オンライン／オフライン」が常に表示される。
直感的な指針
navigator.onLine= ネットワーク接続の有無をざっくり判定。- イベント
online/offlineで変化を検知。 - 本当に通信できるかは
fetchで確認する。 - UIに反映してユーザーに安心感を与えるのが基本的な使い方。