/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

0 vote178 views2 answers
Split string in angular 8
Javascript AngularJS
1 vote186 views1 answer
Uppercase angular pipe
Javascript AngularJS
1 vote179 views1 answer
Angular schematics datatable
Javascript AngularJS
0 vote221 views1 answer
How to apply border to table in angular
Javascript AngularJS
10 votes322 views3 answers
Services in angular
Javascript AngularJS
29 votes235 views2 answers
ERESOLVE unable to resolve dependency tree npm ERR npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/core
Javascript AngularJS
0 vote212 views1 answer
Angular get element by classname
Javascript AngularJS
0 vote193 views1 answer
Angular http loader
Javascript AngularJS
0 vote192 views1 answer
New date in interpolation angular
Javascript AngularJS
0 vote202 views1 answer
Angular property value does not exist on type Event
Javascript AngularJS