feat: support the User Agent Client Hints API

.github/workflows/pull_request.yml

@@ -11,10 +11,10 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10, 12, 14]
+        node-version: [18]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - run: yarn install

.github/workflows/release.yml

@@ -9,10 +9,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: 18
           registry-url: "https://registry.npmjs.org"
       - run: yarn install
       - run: yarn build

package.json

@@ -34,8 +34,7 @@
     "format": "web-scripts format",
     "lint": "web-scripts lint",
     "commit": "web-scripts commit",
-    "release": "web-scripts release",
-    "prepare": "web-scripts audit"
+    "release": "web-scripts release"
   },
   "husky": {
     "hooks": {
@@ -44,15 +43,13 @@
     }
   },
   "devDependencies": {
-    "@spotify/web-scripts": "^9.0.0",
-    "@types/puppeteer": "^5.4.2",
-    "husky": "^6.0.0",
-    "jest-puppeteer": "^4.4.0",
+    "@spotify/web-scripts": "^14.1.6",
+    "@types/puppeteer": "^7.0.4",
+    "husky": "^8.0.3",
+    "jest-puppeteer": "^8.0.6",
     "parcel-bundler": "^1.12.4",
-    "puppeteer": "^8.0.0",
-    "ts-jest": "^26.4.4"
+    "puppeteer": "^19.8.3",
+    "ts-jest": "^29.1.0"
   },
-  "dependencies": {
-    "caniuse-lite": "^1.0.30001173"
-  }
+  "dependencies": {}
 }

shell.nix

@@ -0,0 +1,4 @@
+{ pkgs ? import <nixpkgs> {} }:
+  pkgs.mkShell {
+    nativeBuildInputs = [ pkgs.nodejs-18_x pkgs.yarn pkgs.gnumake ];
+}

src/__tests__/browser.e2e.test.ts

@@ -1,4 +1,4 @@
-import puppeteer from 'puppeteer';
+import puppeteer, { KnownDevices } from 'puppeteer';
 import { isMobileResult } from '..';
 
 describe('E2E Tests', () => {
@@ -34,6 +34,7 @@ describe('E2E Tests', () => {
           "blackberry": false,
           "blackberry10": false,
           "chrome": false,
+          "clientHints": false,
           "device": false,
           "firefox": false,
           "opera": false,
@@ -55,7 +56,7 @@ describe('E2E Tests', () => {
     'isMobile correctly checks iOS 13',
     async () => {
       const iPadIos13 = {
-        ...puppeteer.devices['iPad Pro'],
+        ...KnownDevices['iPad Pro'],
         userAgent:
           'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko)',
       };
@@ -73,50 +74,51 @@ describe('E2E Tests', () => {
 
       // eslint-disable-next-line jest/no-standalone-expect
       expect(isMobile).toMatchInlineSnapshot(`
-      Object {
-        "amazon": Object {
-          "device": false,
-          "phone": false,
-          "tablet": false,
-        },
-        "android": Object {
-          "device": false,
-          "phone": false,
-          "tablet": false,
-        },
-        "any": true,
-        "apple": Object {
-          "device": true,
-          "ipod": false,
-          "phone": false,
-          "tablet": true,
-          "universal": false,
-        },
-        "other": Object {
-          "blackberry": false,
-          "blackberry10": false,
-          "chrome": false,
-          "device": false,
-          "firefox": false,
-          "opera": false,
-        },
-        "phone": false,
-        "tablet": true,
-        "windows": Object {
-          "device": false,
+        Object {
+          "amazon": Object {
+            "device": false,
+            "phone": false,
+            "tablet": false,
+          },
+          "android": Object {
+            "device": false,
+            "phone": false,
+            "tablet": false,
+          },
+          "any": false,
+          "apple": Object {
+            "device": false,
+            "ipod": false,
+            "phone": false,
+            "tablet": false,
+            "universal": false,
+          },
+          "other": Object {
+            "blackberry": false,
+            "blackberry10": false,
+            "chrome": false,
+            "clientHints": false,
+            "device": false,
+            "firefox": false,
+            "opera": false,
+          },
           "phone": false,
           "tablet": false,
-        },
-      }
-    `);
+          "windows": Object {
+            "device": false,
+            "phone": false,
+            "tablet": false,
+          },
+        }
+      `);
 
       await browser.close();
     },
   );
 
   test('isMobile correctly fails iOS 13 check when MSStream is present', async () => {
     const iPadIos13 = {
-      ...puppeteer.devices['iPad Pro'],
+      ...KnownDevices['iPad Pro'],
       userAgent:
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko)',
     };
@@ -160,6 +162,7 @@ describe('E2E Tests', () => {
           "blackberry": false,
           "blackberry10": false,
           "chrome": false,
+          "clientHints": false,
           "device": false,
           "firefox": false,
           "opera": false,

src/__tests__/clientHints.test.ts

@@ -0,0 +1,34 @@
+// isMobile.test.ts
+import isMobile, { UserAgentClientHints } from '../isMobile';
+
+describe('isMobile with User-Agent Client Hints', () => {
+  test('should detect mobile device from User-Agent Client Hints', () => {
+    const clientHints: UserAgentClientHints = {
+      ua: 'Mozilla/5.0 (Android 11; Mobile; rv:99.0) Gecko/99.0 Firefox/99.0',
+      uaMobile: true,
+      uaPlatform: 'Android',
+      uaPlatformVersion: '11',
+    };
+
+    const result = isMobile(clientHints);
+
+    expect(result.android.phone).toBe(true);
+    expect(result.phone).toBe(true);
+    expect(result.any).toBe(true);
+  });
+
+  test('should detect non-mobile device from User-Agent Client Hints', () => {
+    const clientHints: UserAgentClientHints = {
+      ua: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0',
+      uaMobile: false,
+      uaPlatform: 'Windows',
+      uaPlatformVersion: '10.0',
+    };
+
+    const result = isMobile(clientHints);
+
+    expect(result.windows.phone).toBe(false);
+    expect(result.phone).toBe(false);
+    expect(result.any).toBe(false);
+  });
+});

src/isMobile.ts

@@ -21,12 +21,20 @@ export type Navigator = {
   maxTouchPoints?: number;
 };
 
+export type UserAgentClientHints = {
+  ua: string;
+  uaMobile: boolean;
+  uaPlatform: string;
+  uaPlatformVersion: string;
+};
+
 const isAppleTabletOnIos13 = (navigator?: Navigator): boolean => {
   return (
     typeof navigator !== 'undefined' &&
     navigator.platform === 'MacIntel' &&
     typeof navigator.maxTouchPoints === 'number' &&
     navigator.maxTouchPoints > 1 &&
+    // @ts-ignore
     typeof MSStream === 'undefined'
   );
 };
@@ -64,16 +72,25 @@ export type isMobileResult = {
     opera: boolean;
     firefox: boolean;
     chrome: boolean;
+    clientHints: boolean;
     device: boolean;
   };
   phone: boolean;
   tablet: boolean;
   any: boolean;
 };
 
-export type IsMobileParameter = UserAgent | Navigator;
+export type IsMobileParameter = UserAgent | Navigator | UserAgentClientHints;
 
 export default function isMobile(param?: IsMobileParameter): isMobileResult {
+  let isClientHintsMobile = false;
+
+  // This helper function takes a UserAgentClientHints object as input and returns the value
+  // of the `uaMobile` property, which indicates whether the device is a mobile device.
+  function isMobileFromClientHints(hints: UserAgentClientHints): boolean {
+    return hints.uaMobile;
+  }
+
   let nav: Navigator = {
     userAgent: '',
     platform: '',
@@ -88,12 +105,21 @@ export default function isMobile(param?: IsMobileParameter): isMobileResult {
     };
   } else if (typeof param === 'string') {
     nav.userAgent = param;
-  } else if (param && param.userAgent) {
+  } else if (param && 'userAgent' in param) {
     nav = {
       userAgent: param.userAgent,
       platform: param.platform,
       maxTouchPoints: param.maxTouchPoints || 0,
     };
+  } else if (param && 'ua' in param) {
+    nav = {
+      userAgent: param.ua,
+      platform: param.uaPlatform,
+      maxTouchPoints: param.uaMobile ? 1 : 0,
+    };
+    isClientHintsMobile = isMobileFromClientHints(
+      param as UserAgentClientHints,
+    );
   }
 
   let userAgent = nav.userAgent;
@@ -165,12 +191,14 @@ export default function isMobile(param?: IsMobileParameter): isMobileResult {
       opera: match(otherOpera),
       firefox: match(otherFirefox),
       chrome: match(otherChrome),
+      clientHints: isClientHintsMobile,
       device:
         match(otherBlackBerry) ||
         match(otherBlackBerry10) ||
         match(otherOpera) ||
         match(otherFirefox) ||
-        match(otherChrome),
+        match(otherChrome) ||
+        isClientHintsMobile,
     },
     any: false,
     phone: false,
@@ -184,7 +212,10 @@ export default function isMobile(param?: IsMobileParameter): isMobileResult {
     result.other.device;
   // excludes 'other' devices and ipods, targeting touchscreen phones
   result.phone =
-    result.apple.phone || result.android.phone || result.windows.phone;
+    result.apple.phone ||
+    result.android.phone ||
+    result.windows.phone ||
+    result.other.clientHints;
   result.tablet =
     result.apple.tablet || result.android.tablet || result.windows.tablet;
 

tsconfig.json

@@ -1,8 +1,14 @@
 {
   "extends": "@spotify/web-scripts/config/tsconfig.json",
-  "include": ["src"],
-  "exclude": ["src/__tests__", "src/index.browser.ts"],
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "src/__tests__",
+    "src/index.browser.ts"
+  ],
   "compilerOptions": {
-    "target": "es3"
+    "target": "es6",
+    "skipLibCheck": true
   }
 }

types/index.d.ts

@@ -1,3 +1,3 @@
 export * from './isMobile';
 export { default } from './isMobile';
-// # sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map