Angular를 사용하여 브라우저를 탐지하는 방법은 무엇입니까?

Angular를 사용하여 브라우저를 탐지하는 방법은 무엇입니까?

브라우저가 IE인지 Edge with Angular(TypeScript)인지 탐지해야 합니다.가능합니까?만약 그렇다면, 어떻게?

저는 이것을 전에 사용한 적이 있고 잘 작동했습니다.

const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)

다음 코드를 사용하십시오.

// 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;
    // If isChrome is undefined, then use:
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    // 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;

여전히 이 스레드를 찾는 사용자:

Angular 10 또는 그 이상의 사람이라면, 저는 그것을 사용하는 것을 제안합니다.PlatformModule이것은 버전 10에서 Angular Material CDK에 추가되었습니다.

https://material.angular.io/cdk/platform/api

이것은 저에게 효과가 있었습니다.

  public getBrowserName() {
    const agent = window.navigator.userAgent.toLowerCase()
    switch (true) {
      case agent.indexOf('edge') > -1:
        return 'edge';
      case agent.indexOf('opr') > -1 && !!(<any>window).opr:
        return 'opera';
      case agent.indexOf('chrome') > -1 && !!(<any>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';
    }
}

당신이 전화한 후에getBrowserName()반환 값을 비교할 수 있습니다.==='edge'Edge 브라우저에서 작업 중인지 확인합니다.

각진 사용자의 경우 이 모듈을 사용할 수 있습니다. npm install ngx-device-detector --save

위의 대답은 나에게 통하지 않습니다.

브라우저 userAgent는 시간이 지남에 따라 다르게 발전하는 경향이 있습니다.userAgent를 수동으로 구문 분석하는 대신 향후 지원을 보장하는 잘 유지 관리된 라이브러리를 사용하는 것이 좋습니다.가장 일반적인 옵션은 다음과 같습니다.

UAParser.js

이 우수한 라이브러리는 설치 공간이 상대적으로 적은 사용자 에이전트 데이터에서 클라이언트 브라우저, 엔진, OS, CPU 및 장치 유형/모델을 분석합니다.유지보수가 잘 되고 인기가 아주 많습니다(주간 730만 다운로드 ATOW).사용이 간편합니다.

import { UAParser } from 'ua-parser-js'; 

const parser = new UAParser();
const result = parser.getResult();

const isEdge = result.browser == 'Edge';

각진 재료

"플랫폼" 감지 모듈은 Angular Material V6.4.7에 도입되었습니다.

Platform: userAgent 문자열을 비교하고 브라우저별 글로벌 속성을 확인하여 현재 플랫폼을 탐지하는 서비스입니다.

EDGE 감지에 대한 중요한 참고 사항:EDGE 버전 79에서는 Blink 브라우저 엔진을 사용하므로 이 옵션은 이전 EDGE 버전에서만 작동합니다.

가져오기 Platform직접 서비스 및 확인 EDGE(또는 다른 브라우저/OS):

import { Platform } from '@angular/cdk/platform';

@Injectable()
export class AppService {
    
    isEdge: boolean;

    constructor(private platform: Platform) {
        this.isEdge = this.platform.EDGE; // or IOS, SAFARI, ANDROID, etc.
    }
}

외부 모듈을 사용하는 것이 만족스러운 경우 ngx-device-device를 사용할 수 있습니다.

$ npm install ngx-device-detector --save

용도:

  import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

장치 서비스를 사용할 구성 요소

 import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
      this.epicFunction();
    }
    ...
    epicFunction() {
      console.log('hello `Home` component');
      this.deviceInfo = this.deviceService.getDeviceInfo();
      const isMobile = this.deviceService.isMobile();
      const isTablet = this.deviceService.isTablet();
      const isDesktopDevice = this.deviceService.isDesktop();
      console.log(this.deviceInfo);
      console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(isTablet);  // returns if the device us a tablet (iPad etc)
      console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
    }
    ...
  }

장치 서비스 다음 속성을 보유합니다.

1. 브라우저
2. os
3. 장치
4. 사용자 에이전트
5. os_version

도우미 방법

isMobile() : 장치가 모바일 장치(Android / iPhone / windows-phone 등)인지 여부를 반환합니다.

isTablet() : 단말기가 태블릿(iPad 등)을 사용하는 경우 반환합니다.

isDesktop() : 앱이 데스크톱 브라우저에서 실행 중인지 여부를 반환합니다.

Documents 링크는 다음과 같습니다. https://koderlabs.github.io/ngx-device-detector/index.html

IE를 탐지하기 위해 정규식을 사용자 에이전트와 함께 사용할 수 있습니다.

 private isIE() {
    const match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
    let isIE = false;

    if (match !== -1) {
        isIE = true;
    }

    return isIE;
}

그러나 브라우저 탐지 대신 기능 탐지를 사용하는 것이 좋습니다.해당 https://modernizr.com 에 대해 modernizr 라이브러리를 사용할 수 있습니다.

다음 코드를 사용하여 브라우저 이름을 가져올 수 있습니다.

let match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
let isIE = false;

if (match !== -1) {
    isIE = true;
}
console.log(isIE,'isIE');

브라우저가 Cromium을 기반으로 하는지 여부를 탐지하려면 다음 코드를 사용합니다.

const isChromiumBased =
  !!window["chrome"] &&
  (!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]);

브라우저가 IE(5,6,7,8)를 감지할 때 메시지를 표시하려면 코드 라인을 사용할 수 있습니다.

먼저 이 코드는 컴파일러가 이 파일을 처음 읽었기 때문에 index.html 파일에서만 사용되었습니다.

<body>
<p id="NRL" style="background-color: aquamarine;text-align: center"></p>
<app-root></app-root>

<script>

  let isIE1 =/^.*MSIE [5-9]/i.test(window.navigator.userAgent);
    if(isIE1){
      alert('you are using older version of IE .........')

      document.getElementById("NRL").innerHTML = "you are using older version of IE .........";
    }
  </script>
</body>

언급URL : https://stackoverflow.com/questions/48182912/how-to-detect-browser-with-angular