如何检测浏览器是否能够运行 Angular 16 应用程序

问：

我想将一个成熟的 Angular 应用程序（生产 10+ 年;目前在 Angular 10 中）更新到 Angular 16。我们拥有全球用户群，包括各种浏览器/设备。我们知道我们的许多用户使用的是与 Angular 16 不兼容的旧浏览器。我们也从经验中知道，这些用户根本不会听从我们的“请升级您的浏览器”警告，直到他们被迫这样做。

我正在研究一种方法，以迫使这批传统浏览器用户进行升级，同时最大限度地减少对已经合规的用户的干扰。

这是我所知道的：

当不兼容的浏览器尝试加载和执行 Angular 16 构建过程注入页面的脚本标记时，会发生 JavaScript 错误，并且 JS 引擎崩溃。这会阻止任何其他 JavaScript 代码运行，因此也会阻止 JavaScript 浏览器版本测试。最新 Chrome 中的初步测试表明，可以通过从索引页中删除静态标记来避免这些错误。对于快乐路径，这些标签可以通过编程方式注入到 DOM 中，并且现代浏览器仍然能够运行该应用程序。悲伤的路径是通过 JavaScript 重定向到静态页面来处理的，该页面带有最终的“拒绝升级不再是一种选择”消息。错误被阻止，用户知道他们需要做什么。

我的挑战是在进行重定向之前提出一种可靠的方法来确定浏览器是否与 Angular 16 不兼容。

我考虑过查询字符串以检查 Edge 85、Safari 14、Chrome 85、Firefox 90 或更高版本（通过 SauceLabs 上的手动测试确定），但 MDN 文档建议不要这样做：userAgent

使用用户代理来检测浏览器看起来很简单，但实际上，做好它是一个非常困难的问题。

关于浏览器支持的官方 Angular 文档指出，他们在主要浏览器的两个最新版本上测试每个拉取请求，但我们知道应用程序将不仅适用于一小部分浏览器，因此“最近的两个版本”对我来说有点太严格了。

该 MDN 页面推荐使用“浏览器功能检测”方法作为用户代理检测的替代方案。问题是我不知道浏览器需要什么样的功能组合才能完全支持 Angular 16 应用程序。是否有我们可以检查的功能列表，以合理地确信浏览器与 Angular 16 兼容？

提前感谢您的建议。

编辑：如果其他人面临同样的问题，这就是我现在确定的：

/**
 * determines if an Angular app should work in this browser
 * @returns boolean
 */
function angularIsNotSupportedInThisBrowser() {
  return (
    typeof Promise === "undefined" ||
    typeof Map === "undefined" ||
    typeof Set === "undefined" ||
    typeof Object.assign === "undefined" ||
    typeof Symbol === "undefined" ||
    typeof JSON === "undefined"
  );
}

我的实验仍然是一个移动的目标，但你可以在这里和这里查看它们