Support Client Hints

[daybrush]

Prepare for Client Hints!

Chrome is currently planning to freeze user agents to improve user privacy.

Not only Chrome, but other browsers will come someday.

It is still an experimental feature until Chrome(Chromium) 86.

If you want to test, enable the flag below.

chrome://flags/#enable-experimental-web-platform-features

chrome://flags/#freeze-user-agent

In Chrome (Chrome 87, Mac, Freeze User-Agent)

• Before

  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4243.0 Safari/537.36

• After

  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.0.0 Safari/537.36

  In the future

  1. the following attribute values will not appear correctly.
     • navigator.userAgent
     • navigator.appVersion
     • navigator.platform
     • navigator.productSub
     • navigator.vendor
  2. You should use navigator.userAgentData instead of navigator.userAgent.
     • Browser version only shows major.
     • OS name, OS version, Browser full version should be fetched asynchronously.
     • The only OS name that you can check synchronously are iOS and Android.

Possible (You can know exactly)

• Check browser name, major version
• Check mobile
• Check iOS, Android
• Check Webkit, Chromium
• Check old OS, OS Version (Chrome 84 support range or less)
  • < Android 5.0
  • < Mac OS X 10.10
  • < Windows 7
  • < iOS Unknown

import getAgent from "@egjs/agent";

const agent = getAgent();

// Check iOS
agent.os.name === "ios"
agent.os.majorVersion === 9
// Check Android
agent.os.name === "android"
agent.os.majorVersion === 4
parseFloat(agent.os.version) <= 4.4
// Check browser name
agent.browser.name === "safari"
// Check webkit
agent.browser.webkit
// Check chromium
agent.browser.chromium

Not Possible (If synchronous)

• Check OS (Mac with browsers except Safari, Windows, Linux), OS version
• Check Browser full version.

import getAgent from "@egjs/agent";
const agent = getAgent();

// If the full version is 10.5, it is displayed as 10.
agent.browser.version
// "unknown"
agent.os.name
// -1
agent.os.majorVersion

Possible (If asynchronous)

• You can get accurate agent information.
• Check OS(Mac, Windows, Linux), OS version
• Check Browser full version.

  
  import { getAccurateAgent } from "@egjs/agent";

// Use Promise getAccurateAgent().then(agent => { // Check OS, OS version agent.os.name agent.os.version

// Check Browser full verion
agent.browser.version

});

// Use Callback getAccurateAgent(agent => {});

### If you dare to use synchrous, you have to choose.
* You cannot get the OS name and version other than iOS, Android.
* You can only get the major version of the browser. However, unless there is a serious bug, you will mainly check the major version.
* Instead, infer to browser, Webkit, or Chromium.