Використовуємо Network Information API

Всі веб-сайти, які ми створюємо, повинні враховувати не тільки швидкість браузера, а і стан мережі.

Браузерна підтримка

Як правило, ми не можемо розраховувати на підтримку експериментальних API. Зараз підтримка відбувається Firefox і Chrome. В обох випадках вам потрібен браузерний префікс.

Як використовувати Network Information API

Як правило, перше, що потрібно зробити, це перевірити наявність підтримки в браузері користувача, наприклад так:

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

Після цього потрібно протестувати з'єднання:

if(connection) {
 // Supported
}

Тепер, ми створимо switch, щоб визначити, якщо користувач використовує підключення з високою пропускною здатністю, наприклад Wi-Fi, або з низькою - такі як 3G.

Ми будемо використовувати перемикач, щоб запам'ятати дві змінні, які ми будемо використовувати пізніше, щоб змінити наш контент:

  switch(connection.type) {
        case connection.CELL_3G:
            connectionBand = 'Medium Bandwidth';
            bodyClass = 'medium-bandwidth';
        break;
        case connection.CELL_2G:
            connectionBand = 'Low Bandwidth';
            bodyClass = 'low-bandwidth';
        break;
        default:
            connectionBand = 'High Bandwidth';
            bodyClass = 'high-bandwidth';
    }

Як ви бачите, ми "пробігаємося" через можливі типи підключення і становлюємо читабельну назву і ім'я класу. Також задаємо одне значення за замовчуванням, яке буде використовуватися, коли користувач користується Ethernet, Wi-Fi або невідомою мережою.
Тепер ми можемо робити зі змінними, що хочемо. Додамо клас до тіла:

$('body').addClass(bodyClass);

Хотілося, щоб користувач бачив тип підключення:

$('.band').append('Bandwidth: ' + connectionBand);

Інше важливе значення - реальна швидкість з'єднання з Інтернет, використаймо для цього connection.bandwidth:

$('.speed').append('Speed: ' + connection.bandwidth);

Якщо користувача немає в мережі, то повернеться значення 0, Якщо API не може повернути число, повернеться нескінченність, але якщо є можливість повернення значення - воно буде повернено в мегабітах на секунду.

Тепер, маючи всю потрібну нам інформацію, ми можемо підстроювати наш сайт до швидкості підключення користувача: оптимізувати CSS, стиснути зображення і тд.