/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 votes279 views2 answers
Angular window object
Javascript AngularJS
18 votes294 views10 answers
Angular ngif
Javascript AngularJS
1 vote241 views1 answer
Your global Angular CLI version is greater than your local version
Javascript AngularJS
0 vote270 views1 answer
Plyr.js example in angular 10
Javascript AngularJS
1 vote250 views1 answer
Angular run multiple projects
Javascript AngularJS
-1 vote259 views1 answer
How to disable previous date in datepicker using angular 6
Javascript AngularJS
0 vote257 views1 answer
Angular2-tree-diagram
Javascript AngularJS
4 votes399 views2 answers
Placeholder in angular 9 select with working required
Javascript AngularJS
1 vote276 views1 answer
How to concurrently run angular and node
Javascript AngularJS
0 vote248 views1 answer
Navigate to route and refresh angular 6
Javascript AngularJS