Navigator.onLine: примеры (JAVASCRIPT)

Простые примеры использования

Проверка состояния при загрузке страницы:

if (navigator.onLine) {
    console.log('Браузер онлайн');
} else {
    console.log('Браузер офлайн');
}

// Результат при онлайн-статусе:
Браузер онлайн

// Результат при офлайн-статусе:
Браузер офлайн

Использование в условной операции:

const status = navigator.onLine ? 'онлайн' : 'офлайн';
console.log(`Текущий статус: ${status}`);

// Результат:
Текущий статус: онлайн

Прямое использование в логическом контексте:

if (!navigator.onLine) {
    alert('Требуется подключение к интернету');
}

// Результат: при офлайн-статусе появится диалоговое окно.

Похожие возможности в JavaScript

События online/offline: Объект window предоставляет события 'online' и 'offline'. Они позволяют реагировать на изменения состояния сети в реальном времени, что более эффективно, чем периодический опрос navigator.onLine.

window.addEventListener('online', () => {
    console.log('Сеть доступна');
});
window.addEventListener('offline', () => {
    console.log('Сеть недоступна');
});

Fetch API и обработка ошибок: При выполнении сетевых запросов можно перехватывать ошибки, что косвенно указывает на проблемы с сетью, но не является прямым аналогом.

fetch('https://api.example.com/data')
    .catch(error => {
        console.log('Ошибка сети или запроса');
    });

Service Worker и Cache API: Для создания офлайн-приложений используются Service Workers, которые могут перехватывать сетевые запросы и предоставлять кэшированные данные. Это комплексное решение для работы в офлайн-режиме, а не просто проверка состояния.

Когда что использовать: Свойство navigator.onLine подходит для быстрой проверки состояния при инициализации. События online/offline оптимальны для отслеживания динамических изменений. Для полноценной офлайн-работы приложения необходимы Service Workers и Cache API.

Распространенные ошибки

1. Доверие значению true как гарантии доступа в интернет: Свойство может возвращать true при подключении к локальной сети без выхода в интернет.

if (navigator.onLine) {
    // Это не гарантирует, что API-запрос будет успешным
    fetch('https://api.example.com/data').catch(() => {
        console.log('Запрос не удался, хотя onLine = true');
    });
}

// Возможный результат:
Запрос не удался, хотя onLine = true

2. Отсутствие обработки событий для динамических изменений: Использование только однократной проверки без отслеживания событий может привести к устаревшим данным.

// Неправильно: состояние проверяется только один раз при загрузке
console.log('Статус:', navigator.onLine ? 'онлайн' : 'офлайн');
// Если статус изменится позже, приложение не узнает об этом

3. Использование в Node.js: Свойство navigator.onLine доступно только в браузерной среде. В Node.js его нет, что вызовет ошибку.

// Код в Node.js
console.log(navigator.onLine); // Ошибка: navigator is not defined

// Результат:
ReferenceError: navigator is not defined

4. Проблемы совместимости в старых браузерах: В очень старых браузерах свойство может отсутствовать или работать некорректно.

// Лучше проверять поддержку
if (typeof navigator.onLine !== 'undefined') {
    // Использовать свойство
} else {
    console.log('Свойство не поддерживается');
}

Изменения в последних версиях

Спецификация свойства navigator.onLine стабильна и не претерпела значительных изменений в последних версиях стандартов. Однако, в контексте веб-платформы произошли сопутствующие улучшения:

• События online/offline: Поведение событий было уточнено в спецификациях HTML5 и теперь более последовательно реализовано в современных браузерах.
• Интеграция с Service Workers: Развитие возможностей для создания офлайн-приложений (PWA) косвенно повысило важность корректной работы navigator.onLine как части экосистемы.
• Поведение в мобильных браузерах: В современных мобильных браузерах и гибридных приложениях (например, с использованием Cordova) свойство может более точно отражать состояние сетевого подключения устройства благодаря улучшенной интеграции с операционной системой.

Рекомендуется всегда проверять актуальную информацию о поддержке на ресурсах вроде MDN или Can I use, хотя свойство имеет широкую и стабильную поддержку.

Расширенные примеры использования

1. Комбинирование с событиями для отслеживания состояния:

function updateOnlineStatus() {
    const statusElement = document.getElementById('status');
    statusElement.textContent = navigator.onLine ? 'Онлайн' : 'Офлайн';
    statusElement.className = navigator.onLine ? 'online' : 'offline';
}

// Установка статуса при загрузке и при изменениях
window.addEventListener('load', updateOnlineStatus);
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

// Результат: элемент с id='status' будет динамически менять текст и класс.

2. Отложенная отправка данных при восстановлении соединения:

let offlineData = [];

function sendData(data) {
    if (navigator.onLine) {
        // Отправка данных на сервер
        console.log('Данные отправлены:', data);
    } else {
        offlineData.push(data);
        console.log('Данные сохранены для отправки позже');
    }
}

window.addEventListener('online', () => {
    if (offlineData.length > 0) {
        console.log('Восстановлено соединение. Отправка накопленных данных:', offlineData);
        offlineData = [];
    }
});

// Тестирование
sendData({ user: 'Иван', action: 'click' });

// Результат при офлайн-статусе:
Данные сохранены для отправки позже
// При восстановлении соединения:
Восстановлено соединение. Отправка накопленных данных: [ { user: 'Иван', action: 'click' } ]

3. Интеграция с UI-фреймворком (на примере Vue.js):

new Vue({
    el: '#app',
    data: {
        isOnline: navigator.onLine
    },
    created() {
        window.addEventListener('online', () => { this.isOnline = true; });
        window.addEventListener('offline', () => { this.isOnline = false; });
    },
    template: `
        

            
Статус сети: {{ isOnline ? 'Онлайн' : 'Офлайн' }}
            Отправить (недоступно офлайн)
        
    `
});

// Результат: реактивный интерфейс, кнопка блокируется при потере сети.

4. Проверка с таймаутом и попыткой запроса: Более надежная проверка, которая пытается получить ресурс.

async function checkTrueOnline() {
    if (!navigator.onLine) return false;
    try {
        const response = await fetch('https://httpbin.org/status/200', {
            method: 'HEAD',
            cache: 'no-cache',
            timeout: 5000
        });
        return response.ok;
    } catch {
        return false;
    }
}

checkTrueOnline().then(isOnline => {
    console.log('Реальное подключение к интернету:', isOnline);
});

// Результат: возвращает false, если нет ответа от тестового сервера, даже если navigator.onLine = true.

Аналоги в других языках программирования

PHP: Прямого аналога нет, так как PHP выполняется на сервере. Для проверки доступности внешних ресурсов используют функции вроде fsockopen или cURL.

// Проверка доступности сайта
$connected = @fsockopen('example.com', 80);
if ($connected) {
    echo 'Сервер доступен';
    fclose($connected);
} else {
    echo 'Сервер недоступен';
}

// Результат:
Сервер доступен

Python: Можно использовать библиотеки для проверки сетевого подключения, например, socket или requests.

import socket
try:
    socket.create_connection(('google.com', 80), timeout=2)
    print('Интернет доступен')
except OSError:
    print('Нет подключения к интернету')

// Результат:
Интернет доступен

C (на уровне ОС): В системном программировании на C используют низкоуровневые системные вызовы, например, проверку сетевых интерфейсов через ioctl или анализ маршрутизации. Это сложнее и зависит от операционной системы.

MySQL: Не имеет встроенных средств для проверки подключения к интернету, так как является системой управления базами данных. Внешнее подключение можно проверить через системные команды или в прикладном коде, который использует СУБД.

Ключевое отличие: В отличие от клиентского JavaScript, большинство серверных языков не имеют встроенного свойства для определения онлайн-статуса, так как они работают в иной среде, где сетевая доступность проверяется через подключение к конкретным хостам.