Обнаружение браузера Angular 6?

У меня есть приложение angular6, которое мы поддерживаем только с хромом, но я хотел бы, чтобы появилась страница / сообщение о попытках пользователя перейти к приложению в IE, в котором говорится, что оно не поддерживается, либо вставьте эту ссылку в Chrome, либо загрузите хром .

Нужен ли мне полифилл, чтобы приложение могло работать в IE, чтобы отображать это сообщение, или есть какое-то обнаружение браузера, которое я могу использовать, чтобы отображать только это всплывающее окно?

Я знаю, что вы можете выполнять обнаружение браузера в TS, который у меня есть, но это означает, что мне нужен полифилл IE, чтобы приложение загружалось даже для отображения страницы.

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Мысли? Спасибо!

попробуй это. github.com/DamonOehlman/detect-browser или github.com/lancedikson/bowser

— 09.12.2019 11:04

angular typescript browser angular6 browser-detection

05.09.2018 13:51

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

9 368

Ответы 3

В ngOninit в app.component.ts используйте блок if else. В приведенном ниже примере пользователь возвращается на предыдущую (не Angular) страницу после закрытия предупреждения, поэтому остальная часть angular не загружается.

if (isIE) {
    alert('Message for users about not using IE');
    window.history.go(-1);
} else {
    // the rest of ngOnInit
}

15.10.2018 21:11

Вы также можете добавить это в index.html:

  <script>
    var browserName = getBrowserName();
    if (browserName == 'ie') {
       alert("IE is not supported")
    }

    function getBrowserName() {
      const agent = window.navigator.userAgent.toLowerCase()
      switch (true) {
        case agent.indexOf('edge') > -1:
          return 'edge';
        case agent.indexOf('opr') > -1 && !!(window).opr:
          return 'opera';
        case agent.indexOf('chrome') > -1 && !!(window).chrome:
          return 'chrome';
        case agent.indexOf('trident') > -1:
          return 'ie';
        case agent.indexOf('firefox') > -1:
          return 'firefox';
        case agent.indexOf('safari') > -1:
          return 'safari';
        default:
          return 'other';
      }
    }
  </script>

09.12.2019 11:01

window.navigator.userAgent содержит пользовательский агент как string. Чтобы обнаружить браузер, нужно разобрать userAgent.

Для обнаружения Microsoft Internet Explorer и Microsoft Edge мы используем условие

window.navigator.userAgent.toLowerCase().indexOf('trident') > -1 || 
window.navigator.userAgent.toLowerCase().indexOf('edge') > -1

But its always better not to re-invent the wheel. Instead, use a package like bowsernpm install bowser

Теперь импортируйте и получите детали

import * as Bowser from "bowser";
// ......
userAgent = Bowser.parse(window.navigator.userAgent);
browser = Bowser.getParser(window.navigator.userAgent);

Пример: https://stackblitz.com/edit/angular-bowser

P.S: Также обратите внимание, что navigator.userAgent.toLowerCase().indexOf('edge') > -1 не работает для Microsoft Edge Beta (текущая версия = 79.0.309.43), поскольку userAgent является