feat: use feature detection for defaults-mode-browser (#1730)

Author: kuhe

.changeset/sixty-cows-pretend.md

@@ -0,0 +1,5 @@
+---
+"@smithy/util-defaults-mode-browser": minor
+---
+
+remove bower from mobile device detection

packages/util-defaults-mode-browser/package.json

@@ -27,7 +27,6 @@
     "@smithy/property-provider": "workspace:^",
     "@smithy/smithy-client": "workspace:^",
     "@smithy/types": "workspace:^",
-    "bowser": "^2.11.0",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/util-defaults-mode-browser/src/resolveDefaultsModeConfig.spec.ts

@@ -1,14 +1,37 @@
-import bowser from "bowser";
-import { afterEach, describe, expect, test as it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, test as it, vi } from "vitest";
 
 import { DEFAULTS_MODE_OPTIONS } from "./constants";
 import { resolveDefaultsModeConfig } from "./resolveDefaultsModeConfig";
-vi.mock("bowser");
+
+/**
+ * @internal
+ */
+type NavigatorTestAugment = Navigator & {
+  userAgentData?: {
+    mobile?: boolean;
+  };
+  connection?: {
+    effectiveType?: "4g" | string;
+    rtt?: number;
+    downlink?: number;
+  };
+};
 
 describe("resolveDefaultsModeConfig", () => {
   const uaSpy = vi.spyOn(window.navigator, "userAgent", "get").mockReturnValue("some UA");
 
+  beforeEach(() => {
+    const navigator = window.navigator as NavigatorTestAugment;
+    if (!navigator.userAgentData || !navigator.connection) {
+      navigator.userAgentData = {};
+      navigator.connection = {};
+    }
+  });
+
   afterEach(() => {
+    const navigator = window.navigator as NavigatorTestAugment;
+    delete navigator.userAgentData;
+    delete navigator.connection;
     uaSpy.mockClear();
   });
 
@@ -22,17 +45,20 @@ describe("resolveDefaultsModeConfig", () => {
   });
 
   it("should resolve auto mode to mobile if platform is mobile", async () => {
-    (bowser.parse as any).mockReturnValue({ platform: { type: "mobile" } });
+    vi.spyOn(window.navigator as NavigatorTestAugment, "userAgentData", "get").mockReturnValue({
+      mobile: true,
+    });
     expect(await resolveDefaultsModeConfig({ defaultsMode: () => Promise.resolve("auto") })()).toBe("mobile");
   });
 
-  it("should resolve auto mode to mobile if platform is tablet", async () => {
-    (bowser.parse as any).mockReturnValue({ platform: { type: "tablet" } });
+  it("should resolve auto mode to mobile if connection is not 4g (5g is not possible in this enum)", async () => {
+    vi.spyOn(window.navigator as NavigatorTestAugment, "connection", "get").mockReturnValue({
+      effectiveType: "3g",
+    });
     expect(await resolveDefaultsModeConfig({ defaultsMode: () => Promise.resolve("auto") })()).toBe("mobile");
   });
 
   it("should resolve auto mode to standard if platform not mobile or tablet", async () => {
-    (bowser.parse as any).mockReturnValue({ platform: { type: "desktop" } });
     expect(await resolveDefaultsModeConfig({ defaultsMode: () => Promise.resolve("auto") })()).toBe("standard");
   });
 

packages/util-defaults-mode-browser/src/resolveDefaultsModeConfig.ts

@@ -1,7 +1,6 @@
 import { memoize } from "@smithy/property-provider";
 import type { DefaultsMode, ResolvedDefaultsMode } from "@smithy/smithy-client";
 import type { Provider } from "@smithy/types";
-import bowser from "bowser";
 
 import { DEFAULTS_MODE_OPTIONS } from "./constants";
 
@@ -27,7 +26,7 @@ export const resolveDefaultsModeConfig = ({
     const mode = typeof defaultsMode === "function" ? await defaultsMode() : defaultsMode;
     switch (mode?.toLowerCase()) {
       case "auto":
-        return Promise.resolve(isMobileBrowser() ? "mobile" : "standard");
+        return Promise.resolve(useMobileConfiguration() ? "mobile" : "standard");
       case "mobile":
       case "in-region":
       case "cross-region":
@@ -43,12 +42,49 @@ export const resolveDefaultsModeConfig = ({
     }
   });
 
-const isMobileBrowser = (): boolean => {
-  const parsedUA =
-    typeof window !== "undefined" && window?.navigator?.userAgent
-      ? bowser.parse(window.navigator.userAgent)
-      : undefined;
-  const platform = parsedUA?.platform?.type;
-  // Reference: https://github.com/lancedikson/bowser/blob/master/src/constants.js#L86
-  return platform === "tablet" || platform === "mobile";
+/**
+ * @internal
+ */
+type NavigatorAugment = {
+  userAgentData?: {
+    mobile?: boolean;
+  };
+  connection?: {
+    effectiveType?: "4g" | string;
+    rtt?: number;
+    downlink?: number;
+  };
+};
+
+/**
+ * The aim of the mobile detection function is not really to know whether the device is a mobile device.
+ * This is emphasized in the modern guidance on browser detection that feature detection is correct
+ * whereas UA "sniffing" is usually a mistake.
+ *
+ * So then, the underlying reason we are trying to detect a mobile device is not for any particular device feature,
+ * but rather the implied network speed available to the program (we use it to set a default request timeout value).
+ *
+ * Therefore, it is better to use network speed related feature detection when available. This also saves
+ * 20kb (minified) from the bowser dependency we were using.
+ *
+ * @internal
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent
+ */
+const useMobileConfiguration = (): boolean => {
+  const navigator = window?.navigator as (typeof window.navigator & NavigatorAugment) | undefined;
+  if (navigator?.connection) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType
+    // The maximum will report as 4g, regardless of 5g or further developments.
+    const { effectiveType, rtt, downlink } = navigator?.connection;
+    const slow =
+      (typeof effectiveType === "string" && effectiveType !== "4g") || Number(rtt) > 100 || Number(downlink) < 10;
+    if (slow) {
+      return true;
+    }
+  }
+
+  // without the networkInformation object, we use the userAgentData or touch feature detection as a proxy.
+  return (
+    navigator?.userAgentData?.mobile || (typeof navigator?.maxTouchPoints === "number" && navigator?.maxTouchPoints > 1)
+  );
 };

yarn.lock

@@ -3286,7 +3286,6 @@ __metadata:
     "@smithy/smithy-client": "workspace:^"
     "@smithy/types": "workspace:^"
     "@types/node": "npm:^18.11.9"
-    bowser: "npm:^2.11.0"
     concurrently: "npm:7.0.0"
     downlevel-dts: "npm:0.10.1"
     rimraf: "npm:3.0.2"
@@ -4655,13 +4654,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bowser@npm:^2.11.0":
-  version: 2.11.0
-  resolution: "bowser@npm:2.11.0"
-  checksum: 10c0/04efeecc7927a9ec33c667fa0965dea19f4ac60b3fea60793c2e6cf06c1dcd2f7ae1dbc656f450c5f50783b1c75cf9dc173ba6f3b7db2feee01f8c4b793e1bd3
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"