Jhipster Angular 应用程序和浏览器列表

Question

在我们的应用中，我们想阻止使用旧浏览器的用户。我们查看了 browserslist npm 包。

我们的应用程序在 JHipster 上 Angular TS。

我们在依赖项中添加“浏览器列表”，并在 package.json 中添加一个部分：

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

为了测试，我们使用的是旧的便携式 firefox 59 版，但是当我们打开应用程序时，浏览器列表不起作用并显示主页。

我们可以将 browserslist 与 jhipster 和 angular TS

一起使用吗

Answer 1

我不认为浏览器列表本身旨在阻止对不受支持的浏览器的访问。相反，它为其他工具提供配置，用于确定需要支持哪些浏览器，允许这些工具使用适当的 polyfill 等。示例包括使用浏览器列表配置的 Autoprefixer 和 Babel。

Angular 本身有一个 .browserlistrc 文件，其中声明：

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

你打算做的实际上需要一个额外的 npm 包，叫做

browserslist-useragent

此包允许您检测当前浏览器用户代理是否满足您的浏览器列表配置。但是，它似乎不适用于客户端。您可以在 APP_INITIALIZER 中向您的服务器发送 HTTP 请求...传递 UA 字符串以检查客户端是否受支持。然而，这一切似乎太痛苦了。为了您的目的，我会坚持使用更简单的 npm 包。

好的浏览器检测包包括：

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

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

您可以使用它们来重定向不受支持的浏览器/显示不受支持的页面等。我以前尝试过 bowser，它非常容易使用。祝一切顺利。

以下是您如何使用 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>

当然，大多数人会指出，您不应该真正根据浏览器进行阻止，而应该根据功能检测进行阻止。很多人为此使用 Modernizr。

Jhipster Angular 应用程序和浏览器列表

Jhipster Angular Application and Browserslist

jhipster

angular