perf(movimento): vitrine e 3D mais leves, WebGL por software lembrado na sessão e suporte ao WebKit

lib/device.test.ts

@@ -1,11 +1,14 @@
 import {
   isCoarsePointer,
+  isKnownSoftwareWebGL,
   isLowPowerDevice,
   isMobileViewport,
   isSaveData,
   isSoftwareRenderer,
   isSoftwareWebGL,
+  isWebKit,
   MOBILE_QUERY,
+  rememberSoftwareWebGL,
 } from "./device";
 
 const originalMatchMedia = window.matchMedia;
@@ -122,3 +125,97 @@ describe("software WebGL", () => {
     expect(isSoftwareWebGL(context(null))).toBe(false);
   });
 });
+
+describe("the software WebGL verdict kept for the session", () => {
+  beforeEach(() => sessionStorage.clear());
+  afterEach(() => {
+    jest.restoreAllMocks();
+    sessionStorage.clear();
+  });
+
+  it("is unknown until someone remembers it, then known for the rest of the session", () => {
+    expect(isKnownSoftwareWebGL()).toBe(false);
+
+    rememberSoftwareWebGL();
+
+    expect(isKnownSoftwareWebGL()).toBe(true);
+    // fica no sessionStorage: some com a aba, e não vale para outra aparelhagem
+    expect(sessionStorage.getItem("webgl-software")).toBe("1");
+  });
+
+  it("ignores any other value in the key (only the verdict this module writes counts)", () => {
+    sessionStorage.setItem("webgl-software", "0");
+
+    expect(isKnownSoftwareWebGL()).toBe(false);
+  });
+
+  it("counts a blocked sessionStorage as unknown, and remembering then does not throw", () => {
+    jest.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new DOMException("blocked", "SecurityError");
+    });
+    jest.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new DOMException("blocked", "SecurityError");
+    });
+
+    expect(isKnownSoftwareWebGL()).toBe(false);
+    expect(() => rememberSoftwareWebGL()).not.toThrow();
+  });
+});
+
+describe("isWebKit (the only engine that needs the showcase video to play once)", () => {
+  const iphone =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1";
+  const iphoneChrome =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0 Mobile/15E148 Safari/604.1";
+  const macSafari =
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15";
+  const chrome =
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36";
+  const edge = `${chrome} Edg/126.0.0.0`;
+  const androidChrome =
+    "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36";
+  const firefox =
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0";
+
+  afterEach(() => {
+    mockNavigator({ platform: "", maxTouchPoints: 0 });
+    Reflect.deleteProperty(navigator, "userAgent");
+  });
+
+  it.each([
+    ["Safari on the iPhone", iphone],
+    [
+      "Chrome on the iPhone (iOS runs WebKit under every browser)",
+      iphoneChrome,
+    ],
+    ["Safari on the Mac", macSafari],
+  ])("is true for %s", (_name, userAgent) => {
+    mockNavigator({ userAgent });
+
+    expect(isWebKit()).toBe(true);
+  });
+
+  it.each([
+    ["Chrome", chrome],
+    ["Edge", edge],
+    ["Chrome on Android", androidChrome],
+    ["Firefox", firefox],
+  ])("is false for %s", (_name, userAgent) => {
+    mockNavigator({ userAgent });
+
+    expect(isWebKit()).toBe(false);
+  });
+
+  it("is true for an iPad that presents itself as a Mac (a Mac with a touch screen)", () => {
+    mockNavigator({
+      userAgent:
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Gecko/20100101",
+      platform: "MacIntel",
+      maxTouchPoints: 5,
+    });
+
+    expect(isWebKit()).toBe(true);
+    mockNavigator({ maxTouchPoints: 0 });
+    expect(isWebKit()).toBe(false);
+  });
+});