/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

5 votes121 views3 answers
Angular formarray remove all
Javascript AngularJS
1 vote148 views4 answers
Angular 8 features
Javascript AngularJS
0 vote125 views1 answer
Localhost:3000 ad is not working with outlook angular 8
Javascript AngularJS
0 vote109 views1 answer
Angular ngmodel checkbox
Javascript AngularJS
0 vote120 views2 answers
Set @Output through modalref angular
Javascript AngularJS
0 vote112 views1 answer
Toast duplicate angular
Javascript AngularJS
0 vote113 views2 answers
Angular 9 radio button checked
Javascript AngularJS
1 vote103 views1 answer
How to use edit button in angular
Javascript AngularJS
1 vote113 views1 answer
How to use lodash in Angular
Javascript AngularJS
0 vote120 views1 answer
Npm font awesome 5 angular 7
Javascript AngularJS