Navigator.userAgent

Window. navigator returns a reference to a Navigator object that requests information about the application running the current code.

The Navigator object contains some information about the browser. For details, refer to MDN.

This section describes userAgent properties

The read-only property navigator. userAgent returns the User Agent of the current browser, which is used to specify the request header User-agent property of the HTTP request.

UserAgent generally consists of the following structures:

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version

The following method of viewing the userAgent is a property under the window.navigator object, using my browser as an example (you can print it out on the console for yourself):

const ua = navigator.userAgent;
/ / Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
Copy the code

Modify the userAgent

Note that userAgent can be modified, so be careful when using it.

Note: The specification asks browsers to provide as little information via this field as possible. Never assume that the value of this property will stay the same in future versions of the same browser. Try not to use it at all, or only for current and past versions of a browser. New browsers may start using the same UA, or part of it, as an older browser: you really have no guarantee that the browser agent is indeed the one advertised by this property.

Also keep in mind that users of a browser can change the value of this field if they want (UA spoofing).

Using Chrome as an example, let’s try to modify userAgent:

  1. Start by opening the developer tools (F12)
  2. Click on more options to the left of the on/off arrow and selectMore toolsAnd then selectNetwork conditions
  3. There will be an extra one under the developer toolsNetwork conditionsMenu bar, here it isUser agentDeselect configurationUse browser default“And then select some other options or enter some content yourself.

The userAgent is done here. You can look at the window.navigator in the console and see that it has changed, and then you can see that the User Agent in the request header has changed as well.

Use the sample

The following examples may not be accurate, so please complete the branches if you actually encounter them in your project. In fact, they have the same idea. They both obtain the user’s browser information through navigator.userAgent for judgment.

Detects the browser and returns the browser name

const getCurrentBrower = () = > {
  const ua = navigator.userAgent;
  let browser;

  if (ua.indexOf("Firefox") > -1) {
    browser = "Mozilla Firefox";
  } else if (ua.indexOf("Opera") > -1 || ua.indexOf("OPR") > -1) {
    browser = "Opera";
  } else if (ua.indexOf("Trident") > -1) {
    browser = "Microsoft Internet Explorer";
  } else if (ua.indexOf("Edge") > -1) {
    browser = "Microsoft Edge";
  } else if (ua.indexOf("Chrome") > -1) {
    browser = "Google Chrome or Chromium";
  } else if (ua.indexOf("Safari") > -1) {
    browser = "Apple Safari";
  } else {
    browser = "unknown";
  }

  return browser;
};
Copy the code

Check whether the current device is a mobile device

const mobileFlags = [
  /AppleWebKit.*Mobile.*/.// Mobile terminal
  /\(i[^;] +; ( U;) ? CPU.+Mac OS X/./ / ios terminal
  /Android/.// Android terminal
  /iPhone/.// iPhone
  /iPad/.// iPad
];

const isMobile = () = > {
  const ua = navigator.userAgent;

  for (let flag of mobileFlags) {
    if (flag.test(ua)) {
      return true; }}return false;
};
Copy the code

reference

MDN – Navigator