浏览器兼容

为了使我们的 Web 应用可以在不同的浏览器上正常运行，显示效果尽量保持一致，我们需要做好浏览器兼容。

解决方案#

在实际项目中，出于成本的考虑，一般没必要兼容全部浏览器。我们通常对主流浏览器进行兼容处理；不兼容的浏览器，给予用户提示和引导。

下列浏览器占据国内浏览器主要市场份额，满足大多数 Web 应用使用场景，所以我们针对这些主流浏览器做好兼容。

浏览器	版本
Chrome	最新版
360 安全浏览器	最新版（不支持兼容模式）
Firefox	最新版
QQ 浏览器	最新版（不支持兼容模式）
Microsoft Edge	最近的两个主版本
搜狗浏览器	最新版（不支持兼容模式）
IE11及以下、微信浏览器	不支持

2020 国内浏览器市场份额#

Angular 项目中的实现#

Angular 项目中，包含两部分内容：兼容处理，不兼容时的用户提示。

兼容处理#

采用 Angular 官方解决方案腻子脚本 (polyfill)

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

在polyfill.ts中引用需要的腻子脚本，常用的腻子脚本配置如下：

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

import "core-js/es/array";
import "core-js/es/object";

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import "web-animations-js"; // Run `npm install --save web-animations-js`.

上述代码包括：

数组、对象语法支持。例如在旧浏览器中支持Object.assign()、Object.values()、Array.includes()等语法。
在使用 Angular CLI 8.0 以上创建工程时，core-js已经作为默认依赖包，不需要手动添加。
CSS 动画支持web-animations-js，需要手动安装依赖包：

npm install --save web-animations-js

不兼容处理#

增加画面，提示用户：
- 下载 Chrome 浏览器
- 切换浏览器的极速模式
应用启动入口处，判断浏览器是否可以启动

以 IE11 为例#

index.html

<body>
  <div id="no-support-browser" class="no-support-browser">
    <img src="/assets/images/check-1.png" class="error-img" />
    <div class="error-title">浏览器不支持使用！</div>
    <div class="error-des">
      方法一：下载Chrome浏览器并进行访问
      <a href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">
        <img src="/assets/images/check-2.png" class="error-btn_img" />
      </a>
    </div>
    <div class="error-des error-des-two">
      方法二：点击浏览器右侧，切换成极速模式进行访问
    </div>
    <img src="/assets/images/check-3.png" class="error-browser-img" />
  </div>
  <script>
    (function () {
      // Internet Explorer/Edge 6-10
      var isIE = document.all && document.compatMode;

      // Internet Explorer/Edge ≥ 10
      var isIE10gt = document.body.style.msTouchAction !== undefined;

      // Weixin Browser
      const agent = navigator.userAgent.toLowerCase();
      const isWeixinBrowser = (agent.match(/MicroMessenger/i) && agent.match(/MicroMessenger/i)[0] === "micromessenger");

      if (isIE || isIE10gt || isWeixinBrowser) {
        document.getElementById("no-support-browser").classList.add("visible");
      }
    })();
  </script>
</body>

main.ts

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";

if (environment.production) {
  enableProdMode();
}

// Internet Explorer/Edge 6-10
const isIE = document.all && document.compatMode;

// Internet Explorer/Edge ≥ 10
const isIE10gt = (document.body.style as any).msTouchAction !== undefined;

// Weixin Browser
const agent = navigator.userAgent.toLowerCase();
const isWeixinBrowser = (agent.match(/MicroMessenger/i) && agent.match(/MicroMessenger/i)[0] === "micromessenger");

if (!isIE && !isIE10gt && !isWeixinBrowser) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
} else {
  document.getElementById("no-support-browser").classList.add("visible");
}

效果如下：