Как сказать пользователю об ошибке несовместимости приложения с браузером

Ответ

Для проверки совместимости можно использовать navigator.userAgent или feature detection. Лучше использовать второй подход, так как он точнее определяет поддержку конкретных функций.

Пример кода:

if (!('fetch' in window)) {
  const errorElement = document.createElement('div');
  errorElement.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: #ff4444;
    color: white;
    text-align: center;
    z-index: 9999;
  `;
  errorElement.textContent = 'Ваш браузер устарел. Пожалуйста, обновите его или используйте современный браузер (Chrome, Firefox, Edge, Safari)';
  document.body.prepend(errorElement);
}

Лучшие практики:

  • Проверяйте конкретные фичи, а не браузеры
  • Предлагайте альтернативные решения (обновить браузер, скачать другой)
  • Сообщение должно быть заметным, но не блокирующим
  • Можно добавить ссылки на современные браузеры

Ответ 18+ 🔞

Ага, слушай, вот эта вся история с проверкой браузера — это ж классика, как Герасим с Муму, блядь! Все норовят по userAgent определить, а там одни сплошные пиздёжки, потому что эту строку подделать — раз плюнуть.

Вот смотри, как правильно, чтобы не выглядеть конченым идиотом. Вместо того чтобы гадать по userAgent, будем как умные люди — проверять наличие самой функции, ёпта! Это называется feature detection. Если в window нет свойства fetch — всё, пиши пропало, браузер твой — древний, как говно мамонта.

Вот, держи рабочий кусок кода, он как раз этим и занимается. Блок кода не трогаю, как велено, он и так огонь.

if (!('fetch' in window)) {
  const errorElement = document.createElement('div');
  errorElement.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: #ff4444;
    color: white;
    text-align: center;
    z-index: 9999;
  `;
  errorElement.textContent = 'Ваш браузер устарел. Пожалуйста, обновите его или используйте современный браузер (Chrome, Firefox, Edge, Safari)';
  document.body.prepend(errorElement);
}

А теперь, сука, главные правила, чтобы не облажаться:

  • Не гадай на кофейной гуще. Не проверяй названия браузеров, а ищи конкретные фичи, которые тебе нужны. Нет fetch — значит, нет, и хуй с ним.
  • Не будь мудаком. Не просто ругайся в консоли, а покажи юзеру внятное, заметное сообщение. Но так, чтобы оно не перекрывало всё, как говно в унитазе. Пусть видит ошибку, но может её закрыть или проигнорировать.
  • Предложи выход, ебанашка. Человек-то может и не знать, что его браузер — хуйня. Напиши, что делать: обновить или скачать нормальный. Можно даже ссылочки вставить, но это уже на твое усмотрение.
  • Делай красиво. Сообщение должно быть видно сразу, но не должно выглядеть как вирус из 2005 года. Красненькое, сверху, с нормальным текстом — и все в ажуре.

Вот и вся философия. Проверяй возможности, а не названия, и будет тебе счастье, а не пиздец.