CODEWITHSUNDEEP
angularjhipster
Broshet
Broshet

Reputation: 289

Jhipster Angular Application and Browserslist

In our app we want to block the user using an old browser. We looked at the browserslist npm package.

Our app is on JHipster with Angular TS.

We add "browserslist" in dependencies and a section in package.json:

"list of browsers": [
  "1 latest version of firefox"
]

For the test, we are using an old portable firefox version 59 but when we open the application, the browserslist does not work and the home page is displayed.

Can we use browserslist with jhipster and angular TS

Upvotes: 0

Views: 690

Answers (1)

danday74
danday74

Reputation: 56936

I don't think browserlist in and of itself is intended to block access to unsupported browsers. Rather it provides a configuration for other tools to use to determine what browsers need to be supported, allowing those tools to use appropriate polyfills, etc. Examples include Autoprefixer and Babel which use browserlist config.

Angular itself has a .browserlistrc file wherein it states:

This file is used by the build system to adjust CSS and JS output to support the specified browsers below.

What you are planning to do actually needs an additional npm package called

browserslist-useragent

This package allows you to detect whether the current browser useragent satisfies your browserlist config. However, it does not seem to work client side. You could send an HTTP request to your server in an APP_INITIALIZER ... passing the UA string to check whether the client is supported. However, this all seems far too painful. I would stick with simpler npm packages for your purposes.

Good browser detection packages includes:

https://www.npmjs.com/package/ua-parser-js

https://www.npmjs.com/package/bowser

You can use these to redirect unsupported browsers / show an unsupported page, etc. Ive tried bowser before and its pretty easy to use. All the best.

Here's an exmaple of how you might use bowser:

import * as Bowser from "bowser";

isValidBrowser = false

ngOnInit(): void {

  const browser = Bowser.getParser(window.navigator.userAgent);
  this.isValidBrowser = browser.satisfies({
    // declare browsers per OS
    windows: {
      "internet explorer": ">10",
    },
    macos: {
      safari: ">10.1"
    },
    // per platform (mobile, desktop or tablet)
    mobile: {
      safari: '>=9',
      'android browser': '>3.10'
    }, 
    // or in general
    chrome: "~20.1.1432",
    firefox: ">31",
    opera: ">=22",

    // also supports equality operator
    chrome: "=20.1.1432", // will match particular build only

    // and loose-equality operator
    chrome: "~20",        // will match any 20.* sub-version
    chrome: "~20.1"       // will match any 20.1.* sub-version (20.1.19 as well as 20.1.12.42-alpha.1)
  });
}

html:

<ng-container *ngIf="isValidBrowser">
  <router-outlet></router-outlet>
</ng-container>
<ng-container *ngIf="!isValidBrowser">
  This browser is too rubbish!
</ng-container>

Of course, most people would point out that you should not really be blocking based on browsers but rather based on feature detection. A lot of people use Modernizr for this.

Upvotes: 1

Related Questions