show a message to everyone who is not using chrome with Angular 2

Question

I have a situation where I need to display a warning message to everyone who is not using chrome. I tried this with vanilla JS but ran into issues and wondered if in fact I could achieve this with Angular 2 and just set it on my root component.

score 3 · Answer 1 · edited May 23 '17 at 12:32

You can check if the browser is chrome in the onInit() method of your root component and show toaster using primeNG.

  export class AppComponent implements OnInit {
  title:string;
  message:string;
  msgs: Message[] = [];
  constructor(private _window:WindowRef) {}

  ngOnInit(){
    this.title = 'Check browser example'
    let isChrome = !!this._window.nativeWindow.chrome && !!this._window.nativeWindow.chrome.webstore;
    if(!isChrome){
      this.message = "You are not using Chrome";
      this.msgs.push({severity:'warn', summary:'Warning Message', detail:'Your are not using Chrome'});
      alert("Not using chrome");
    }else{
      this.msgs.push({severity:'success', summary:'Success Message', detail:'Your are using Chrome'});
      this.message = "You are using Chrome";
    }
  }
}

To get the reference to the window object create a service:

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

function _window(): any {
    // return the native window obj
    return window;
}

@Injectable()
export class WindowRef {

    get nativeWindow(): any {
        return _window();
    }

}

**Edit: ** Replaced plunkr with primeNG Example and created service to get reference of window object.

Example: https://plnkr.co/edit/pTgV3p7MpKfDb5irlaQn?p=preview

Reference: How to detect Safari, Chrome, IE, Firefox and Opera browser?

I get the following error: ```Property 'chrome' does not exist on type 'Window'.``` — Daimz, Jan 17 '17 at 11:16
```let isChrome = !!window.chrome && !!window.chrome.webstore; if(!isChrome){ this.unsafeBrowser = true; }else{ this.unsafeBrowser = false; }``` — Daimz, Jan 17 '17 at 11:16
I have updated my answer. It runs just fine on chrome for me. I'm on windows machine so can't give support on safari. — JSNinja, Jan 17 '17 at 11:49

score 2 · Accepted Answer · answered Jan 17 '17 at 08:44

2

Check ng2-responsive.

You can show/hide component (for eg. your message component) based on browser type, device type, viewport size and orientation.

Hope that helps.

answered Jan 17 '17 at 08:44

Santanu Biswas

4,699
2
22
21

This worked perfectly for me with the added benefit it's easy to allow access to other browsers as we update for them. – Daimz Jan 19 '17 at 03:34

score 1 · Answer 3 · edited May 23 '17 at 12:09

If you would like to detect browser in your Angular2 app, you can use only javascript in this way:

var isChromeBrowser = !!window.chrome && !!window.chrome.webstore;

but I think that you would like detect Blink engine, not Chrome browser. Every detection code by javascript you can find here

You can use just window variable in TypeScript file, but if you are going create unit test, you should create some service to getting window object, for example:

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

@Injectable()
export class WindowService {
  public window = window;
}

and use it in this way:

@Component({
     templateUrl:"someComponent.html"
})
export class SomeComponent {

  public isChromeBrowser: boolean;

  constructor(private windowService: WindowService) {
!!window.chrome && !!window.chrome.webstore;
    this.isChromeBrowser = windowService.window.chrome && !!windowService.window.chrome.webstore;
  }
}

score 0 · Answer 4 · answered Jan 30 '19 at 14:55

The following statement:

const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

throws an error:

Property 'chrome' does not exist on type 'Window'

The fix is:

const isChrome = !!window['chrome'] && (!!window['chrome'].webstore || !!window['chrome'].runtime);

I have been testing it, and works fine:

ngOnInit() {
    const isChrome = !!window['chrome'] && (!!window['chrome'].webstore || !!window['chrome'].runtime);
    console.log( 'isChrome: ' + isChrome );
}

show a message to everyone who is not using chrome with Angular 2

4 Answers4