WorkerNavigator: свойство onLine

Возвращает состояние подключения браузера к сети. Свойство возвращает булево значение, где true означает подключение, а false — отключение. Свойство отправляет обновления всякий раз, когда изменяется способность браузера подключаться к сети. Обновление происходит, когда пользователь переходит по ссылкам или когда скрипт запрашивает удалённую страницу.

Например, свойство должно возвращать false когда пользователи нажимают ссылки вскоре после потери интернет-соединения.

Браузеры реализуют это свойство по-разному.

В Chrome и Safari, если браузер не может подключиться к локальной сети (LAN) или маршрутизатору, он считается отключённым; все остальные условия возвращают true. Таким образом, хотя вы можете предположить, что браузер отключён, когда он возвращает значение false, вы не можете предположить, что значение true обязательно означает, что браузер имеет доступ к интернету. Вы можете получить ложные срабатывания, например, в случаях, когда на компьютере работает программное обеспечение виртуализации с виртуальными сетевыми адаптерами, которые всегда «подключены». Поэтому, если вы действительно хотите определить состояние подключения браузера, вы должны разработать дополнительные средства для проверки. Чтобы узнать больше, ознакомьтесь со статьёй 2011 года Работа вне сети.

В Firefox, переключение браузера в автономный режим отправляет значение false.

online — это булевое true или false.

Чтобы проверить, подключены ли вы к интернету в рабочем процессе, запросите navigator.onLine, как показано в примере ниже:

if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}

Если браузер не поддерживает navigator.onLine , приведенный выше пример всегда будет возвращать false/undefined.

Чтобы отследить изменения в состоянии сети, используйте addEventListener, чтобы прослушать события на online и offline, как показано в примере ниже:

addEventListener("offline", (e) => {
  console.log("offline");
});

addEventListener("online", (e) => {
  console.log("online");
});