Chrome 以及其他主要瀏覽器即將凍結(jié) User-Agent 字符串，這引發(fā)了廣泛關(guān)注。這意味著 User-Agent 字符串仍然存在（出現(xiàn)在請(qǐng)求頭中，并可在 JavaScript 中通過 navigator.userAgent 訪問），但其用于檢測(cè)瀏覽器/平臺(tái)/版本的功能將隨著時(shí)間的推移而降低。谷歌官方解釋此舉是為了保護(hù)用戶隱私，防止指紋識(shí)別。

前端開發(fā)領(lǐng)域一直建議：避免 User-Agent 探測(cè)。許多網(wǎng)站錯(cuò)誤地使用 User-Agent 探測(cè)，導(dǎo)致弊大于利。避免 User-Agent 探測(cè)的最佳方法是：基于實(shí)際需求進(jìn)行測(cè)試。

需要測(cè)試瀏覽器是否支持特定功能？直接測(cè)試該功能，而不是依賴于假設(shè)該瀏覽器應(yīng)該支持該功能的抽象概念。

在 JavaScript 中，許多功能的測(cè)試非常簡(jiǎn)單，只需檢測(cè)其 API 是否存在：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  console.warn("Geolocation not supported");
}

在 CSS 中，可以使用 @supports 原生機(jī)制：

@supports (display: grid) {
  .main {
    display: grid;
  }
}

這可以通過返回布爾值的 JavaScript API 來檢測(cè)：

CSS.supports("display: flex");

并非所有 Web 平臺(tái)功能都如此易于測(cè)試，但通常無需 User-Agent 探測(cè)即可完成測(cè)試。如果遇到困難，可以查看 Modernizr 是否提供相應(yīng)的測(cè)試，Modernizr 是功能測(cè)試的黃金標(biāo)準(zhǔn)，因?yàn)樗?jīng)過了充分的測(cè)試，并處理了您可能無法預(yù)見的邊緣情況。使用 Modernizr 庫可以獲得清晰的邏輯分支：

if (Modernizr.requestanimationframe) {
  // 支持
} else {
  // 不支持
}

如果確實(shí)需要知道瀏覽器類型、平臺(tái)和版本，可以使用 User-Agent Client Hints (UA-CH)。

例如，要獲取平臺(tái)信息，可以在請(qǐng)求中設(shè)置 Sec-CH-Platform 頭，理論上，可以在響應(yīng)中獲取該信息。這需要主動(dòng)請(qǐng)求信息，從而避免了有問題的隱私指紋識(shí)別問題。類似地，還有 Sec-CH-Mobile 頭用于檢測(cè)移動(dòng)設(shè)備，但這引發(fā)了一些疑問：誰來決定什么是“移動(dòng)”設(shè)備？我們應(yīng)該如何根據(jù)此信息做出決策？

在服務(wù)器端了解瀏覽器、平臺(tái)和版本信息通常也是可取的（在不同情況下發(fā)送不同的代碼），這與客戶端一樣重要，但服務(wù)器端無法進(jìn)行測(cè)試。凍結(jié)的 User-Agent 字符串應(yīng)該能夠維持足夠長(zhǎng)的時(shí)間，以便服務(wù)器端能夠遷移到使用 UA-CH。

Jon Arne S?ter?s 對(duì)此表示擔(dān)憂：

我在移動(dòng) Web 領(lǐng)域工作了 15 多年，我知道許多大大小小的網(wǎng)站都依賴于基于 User-Agent 頭的設(shè)備檢測(cè)。從 Google 的角度來看，切換到 UA-CH 似乎很容易，但這正是推動(dòng)這一變化的團(tuán)隊(duì)沒有理解其影響的地方：

基于設(shè)備檢測(cè)的功能至關(guān)重要，應(yīng)用廣泛，不僅存在于前端代碼中。大型軟件系統(tǒng)及其后端代碼依賴于設(shè)備檢測(cè)，整個(gè)基礎(chǔ)設(shè)施堆棧也是如此。

在我的主要代碼庫中，我們進(jìn)行少量服務(wù)器端 UA 檢測(cè)。我們使用一個(gè)名為 Browser 的 Rails gem，它以友好的 API 方式公開 UA 派生的信息。我可以這樣寫：

if browser.safari?
  # Safari 代碼
end

我們還在客戶端公開該 gem 中的信息，以便在客戶端使用。前端和后端只有少數(shù)幾個(gè)使用實(shí)例，這些實(shí)例似乎都可以通過其他方式輕松處理。

過去，將前端信息以在第一頁加載時(shí)有用的方式傳遞回服務(wù)器有點(diǎn)棘手（因?yàn)?UA 不知道視口大小等信息）。我記得我做過一些非常巧妙的操作，加載一個(gè)骨架頁面，執(zhí)行一小段 JavaScript 代碼來測(cè)量視口寬度和屏幕大小，然后設(shè)置一個(gè) cookie 并強(qiáng)制刷新頁面。如果存在 cookie，服務(wù)器將擁有所需的信息，并且在這些請(qǐng)求中根本不會(huì)加載骨架頁面。

這很復(fù)雜，但服務(wù)器可以獲取服務(wù)器端的視口寬度信息，這對(duì)于發(fā)送小屏幕資源（例如不同的 HTML）等操作非常有用，否則這是不可能的。

我之所以提到這一點(diǎn)，是因?yàn)?UA-CH 不應(yīng)與普通的客戶端提示混淆。我們應(yīng)該能夠配置服務(wù)器發(fā)送 Accept-CH 頭，然后讓客戶端代碼將要發(fā)送回的信息列入白名單，例如：

<meta content="DPR, Viewport-Width" http-equiv="Accept-CH">

這意味著服務(wù)器可以在后續(xù)頁面加載中獲取客戶端的這些信息。這是一個(gè)不錯(cuò)的 API，但 Firefox 和 Safari 不支持它。如果這兩個(gè)瀏覽器都因?yàn)閮鼋Y(jié)的 UA 字符串而對(duì) UA-CH 表示興趣，我想知道它是否會(huì)得到提升。

以上是凍結(jié)用戶代理字符串的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！