Поскольку мобильные устройства становятся все более популярными, веб-разработчикам крайне важно оптимизировать свои приложения для различных условий сети. Одним из важнейших аспектов является определение того, обращается ли пользователь к веб-сайту или приложению через сотовую сеть. В этой статье мы рассмотрим несколько методов достижения этой цели на примерах кода JavaScript. Внедрив эти методы, вы сможете улучшить взаимодействие с пользователем и доставлять оптимизированный контент с учетом условий сети.

Метод 1. Использование API navigator.connection

if (navigator.connection) {
  if (navigator.connection.type === 'cellular') {
    // Code to execute when on a cellular network
  } else {
    // Code to execute when on a non-cellular network
  }
}

Метод 2. Проверка типа сети с помощью API сетевой информации

if (navigator.connection) {
  navigator.connection.addEventListener('change', () => {
    if (navigator.connection.effectiveType === 'cellular') {
      // Code to execute when on a cellular network
    } else {
      // Code to execute when on a non-cellular network
    }
  });
}

Метод 3. Анализ строки пользовательского агента

const userAgent = navigator.userAgent;
if (userAgent.includes('Mobi') && userAgent.includes('WWAN')) {
  // Code to execute when on a cellular network
} else {
  // Code to execute when on a non-cellular network
}

Метод 4. Тестирование производительности сети с помощью Network Information API

if (navigator.connection) {
  navigator.connection.addEventListener('change', () => {
    const speed = navigator.connection.downlink;
    if (speed < 0.5) {
      // Code to execute when on a slow cellular network
    } else {
      // Code to execute when on a fast cellular network
    }
  });
}

Метод 5. Использование онлайн- и офлайн-событий

window.addEventListener('online', () => {
  // Code to execute when the device is online (cellular or non-cellular network)
});
window.addEventListener('offline', () => {
  // Code to execute when the device is offline (no network connection)
});

Метод 6: использование свойства NetworkInformation.downlinkMax

if (navigator.connection) {
  const maxDownlink = navigator.connection.downlinkMax;
  if (maxDownlink <= 0.5) {
    // Code to execute when on a slow cellular network
  } else {
    // Code to execute when on a fast cellular network
  }
}

Метод 7. Использование свойства effectType API NetworkInformation

if (navigator.connection) {
  const effectiveType = navigator.connection.effectiveType;
  if (effectiveType === 'slow-2g' || effectiveType === '2g' || effectiveType === '3g') {
    // Code to execute when on a slow cellular network
  } else {
    // Code to execute when on a fast cellular network
  }
}

Определение того, работает ли код JavaScript в сотовой сети, имеет решающее значение для оптимизации производительности веб-приложений. В этой статье мы рассмотрели семь эффективных методов с соответствующими примерами кода. Реализуя эти методы, вы можете адаптировать поведение вашего приложения в зависимости от условий сети пользователя, что приведет к улучшению пользовательского опыта. Оставайтесь на связи и обеспечивайте оптимальную производительность в различных сетях!