/Javascript/AngularJS/Angular browser detector

Angular browser detector

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BrowserDetectorService {

  private browser: string;
  private version: number | string;
  private os: any;
  private versionSearchString: any;


  private dataBrowser = [
    {
      string: navigator.userAgent,
      subString: 'Edg',
      versionSearch: 'Edg',
      identity: 'Microsoft Edge'
    },
    {
      string: navigator.userAgent,
      subString: 'OPR',
      versionSearch: 'OPR',
      identity: 'Opera'
    },
    {
      string: navigator.userAgent,
      subString: 'Chrome',
      identity: 'Chrome'
    },
    {
      string: navigator.userAgent,
      subString: 'OmniWeb',
      versionSearch: 'OmniWeb/',
      identity: 'OmniWeb'
    },
    {
      string: navigator.vendor,
      subString: 'Apple',
      identity: 'Safari',
      versionSearch: 'Version'
    },
    {
      prop: (window as any).opera,
      identity: 'Opera'
    },
    {
      string: navigator.vendor,
      subString: 'iCab',
      identity: 'iCab'
    },
    {
      string: navigator.vendor,
      subString: 'KDE',
      identity: 'Konqueror'
    },
    {
      string: navigator.userAgent,
      subString: 'Firefox',
      identity: 'Firefox'
    },
    {
      string: navigator.vendor,
      subString: 'Camino',
      identity: 'Camino'
    },
    {
      // for newer Netscapes (6+)
      string: navigator.userAgent,
      subString: 'Netscape',
      identity: 'Netscape'
    },
    {
      string: navigator.userAgent,
      subString: 'MSIE',
      identity: 'Explorer',
      versionSearch: 'MSIE'
    },
    {
      string: navigator.userAgent,
      subString: 'Gecko',
      identity: 'Mozilla',
      versionSearch: 'rv'
    },
    {
      // for older Netscapes (4-)
      string: navigator.userAgent,
      subString: 'Mozilla',
      identity: 'Netscape',
      versionSearch: 'Mozilla'
    }
  ];

  private dataOS = [
    {
      string: navigator.platform,
      subString: 'Win',
      identity: 'Windows'
    },
    {
      string: navigator.platform,
      subString: 'Mac',
      identity: 'Mac'
    },
    {
      string: navigator.userAgent,
      subString: 'iPhone',
      identity: 'iPhone/iPod'
    },
    {
      string: navigator.userAgent,
      subString: 'iPad',
      identity: 'iPad'
    },

    {
      string: navigator.platform,
      subString: 'Linux',
      identity: 'Linux'
    }
  ];

  constructor() {
  }

  onGetBrowserInfo(): void {
    this.browser = this.searchString(this.dataBrowser) || 'An unknown browser';

    this.version =
      this.searchVersion(navigator.userAgent) ||
      this.searchVersion(navigator.appVersion) ||
      'an unknown version';

    this.os = this.searchString(this.dataOS) || 'an unknown OS';

    const lBrowserInfo = {
      BROWSER: this.browser,
      VERSION: this.version,
      OS: this.os
    };

    console.table(lBrowserInfo);
  }


  private searchString(iData: any): string {

    for (const data in iData) {

      if (iData) {
        const lDataString = iData[data].string;
        const lDataProp = iData[data].prop;

        this.versionSearchString = iData[data].versionSearch || iData[data].identity;

        if (lDataString) {
          if (lDataString.indexOf(iData[data].subString) !== -1) {
            return iData[data].identity;
          }
        } else if (lDataProp) {
          return iData[data].identity;
        }
      }

    }
  }


  private searchVersion(dataString: string): number {
    const lIndex = dataString.indexOf(this.versionSearchString);

    if (lIndex === -1) {
      return;
    }
    return parseFloat(
      dataString.substring(lIndex + this.versionSearchString.length + 1)
    );
  }
}

Source: stackoverflow.com

Similar codes

2 votes171 views5 answers
Ng class in angular
Javascript AngularJS
4 votes175 views3 answers
Reload sub component angular
Javascript AngularJS
0 vote164 views1 answer
Angular router navigate inside setTimeout
Javascript AngularJS
1 vote144 views1 answer
Angular passing data to child component
Javascript AngularJS
0 vote176 views1 answer
Angular scroll event on div chang width
Javascript AngularJS
0 vote153 views2 answers
Http get in angularjs
Javascript AngularJS
0 vote155 views1 answer
Angular tab change smooth transition
Javascript AngularJS
0 vote147 views2 answers
Veu js vs angular vs react features
Javascript AngularJS
0 vote201 views3 answers
Angular stepper change wait before changing
Javascript AngularJS
0 vote245 views1 answer
Angular return observable with error
Javascript AngularJS