🐛 fix: Remove PWA Install in Firefox and Arc

src/app/manifest.ts

@@ -47,8 +47,6 @@ const manifest = async (): Promise<MetadataRoute.Manifest | any> => {
           },
           {
             form_factor: 'narrow',
-            sizes: '640x1138',
-
             url: '/screenshots/shot-3.mobile.png',
           },
           {

src/features/PWAInstall/index.tsx

@@ -11,10 +11,10 @@ const Install: any = dynamic(() => import('./Install'), {
 });
 
 const PWAInstall = memo(() => {
-  const { isPWA } = usePlatform();
+  const { isPWA, isSupportInstallPWA } = usePlatform();
   const isShowPWAGuide = useUserStore((s) => s.isShowPWAGuide);
 
-  if (isPWA || !isShowPWAGuide) return null;
+  if (isPWA || !isShowPWAGuide || !isSupportInstallPWA) return null;
 
   // only when the user is suitable for the pwa install and not install the pwa
   // then show the installation guide

src/hooks/usePWAInstall.test.ts

@@ -38,6 +38,7 @@ describe('usePWAInstall', () => {
   });
 
   it('should return canInstall based on canInstall state when support PWA', () => {
+    document.body.innerHTML = `<div id="${PWA_INSTALL_ID}"></div>`;
     vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: true, isPWA: false } as any);
 
     const { result, rerender } = renderHook(() => usePWAInstall());
@@ -53,12 +54,12 @@ describe('usePWAInstall', () => {
     expect(result.current.canInstall).toBe(true);
   });
 
-  it('should return canInstall as true when not support PWA', () => {
+  it('should return canInstall as false when not support PWA', () => {
     vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: false, isPWA: false } as any);
 
     const { result } = renderHook(() => usePWAInstall());
 
-    expect(result.current.canInstall).toBe(true);
+    expect(result.current.canInstall).toBe(false);
   });
 
   it('should call pwa.showDialog when install is called', () => {

src/hooks/usePWAInstall.ts

@@ -19,12 +19,11 @@ export const usePWAInstall = () => {
   }, []);
 
   const installCheck = () => {
-    // 当在 PWA 中时，不显示安装按钮
-    if (isPWA) return false;
-    // 其他情况下，根据是否可以安装来显示安装按钮 (如已经安装则不显示)
-    if (isSupportInstallPWA) return canInstall;
-    // 当在不支持 PWA 的环境中时，安装按钮 (此时为安装教程)
-    return true;
+    // 当在 PWA 或不支持 PWA 的环境中时，不显示安装按钮
+    if (isPWA || !isSupportInstallPWA) return false;
+    const pwa: any = document.querySelector(`#${PWA_INSTALL_ID}`);
+    if (!pwa) return false;
+    return canInstall;
   };
 
   return {

src/hooks/usePlatform.test.ts

@@ -11,12 +11,14 @@ vi.mock('@/utils/platform', () => ({
   getPlatform: vi.fn(),
   isInStandaloneMode: vi.fn(),
   isSonomaOrLaterSafari: vi.fn(),
+  isArc: vi.fn(),
 }));
 
 describe('usePlatform', () => {
   it('should return correct platform info for Mac OS and Chrome', () => {
     vi.mocked(platformUtils.getPlatform).mockReturnValue('Mac OS');
     vi.mocked(platformUtils.getBrowser).mockReturnValue('Chrome');
+    vi.mocked(platformUtils.isArc).mockReturnValue(false);
     vi.mocked(platformUtils.isInStandaloneMode).mockReturnValue(false);
     vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(false);
 
@@ -27,10 +29,12 @@ describe('usePlatform', () => {
       isChrome: true,
       isChromium: true,
       isEdge: false,
+      isFirefox: false,
       isIOS: false,
       isMacOS: true,
       isPWA: false,
       isSafari: false,
+      isArc: false,
       isSonomaOrLaterSafari: false,
       isSupportInstallPWA: true,
     });
@@ -39,6 +43,7 @@ describe('usePlatform', () => {
   it('should return correct platform info for iOS and Safari', () => {
     vi.mocked(platformUtils.getPlatform).mockReturnValue('iOS');
     vi.mocked(platformUtils.getBrowser).mockReturnValue('Safari');
+    vi.mocked(platformUtils.isArc).mockReturnValue(false);
     vi.mocked(platformUtils.isInStandaloneMode).mockReturnValue(true);
     vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(true);
 
@@ -49,6 +54,8 @@ describe('usePlatform', () => {
       isChrome: false,
       isChromium: false,
       isEdge: false,
+      isArc: false,
+      isFirefox: false,
       isIOS: true,
       isMacOS: false,
       isPWA: true,
@@ -61,6 +68,7 @@ describe('usePlatform', () => {
   it('should return correct platform info for Windows and Edge', () => {
     vi.mocked(platformUtils.getPlatform).mockReturnValue('Windows');
     vi.mocked(platformUtils.getBrowser).mockReturnValue('Edge');
+    vi.mocked(platformUtils.isArc).mockReturnValue(false);
     vi.mocked(platformUtils.isInStandaloneMode).mockReturnValue(false);
     vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(false);
 
@@ -71,12 +79,64 @@ describe('usePlatform', () => {
       isChrome: false,
       isChromium: true,
       isEdge: true,
+      isFirefox: false,
       isIOS: false,
       isMacOS: false,
+      isArc: false,
       isPWA: false,
       isSafari: false,
       isSonomaOrLaterSafari: false,
       isSupportInstallPWA: true,
     });
   });
+
+  it('should return correct platform info for Firefox', () => {
+    vi.mocked(platformUtils.getPlatform).mockReturnValue('Windows');
+    vi.mocked(platformUtils.getBrowser).mockReturnValue('Firefox');
+    vi.mocked(platformUtils.isArc).mockReturnValue(false);
+    vi.mocked(platformUtils.isInStandaloneMode).mockReturnValue(false);
+    vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(false);
+
+    const { result } = renderHook(() => usePlatform());
+
+    expect(result.current).toEqual({
+      isApple: false,
+      isChrome: false,
+      isChromium: false,
+      isEdge: false,
+      isFirefox: true,
+      isIOS: false,
+      isMacOS: false,
+      isArc: false,
+      isPWA: false,
+      isSafari: false,
+      isSonomaOrLaterSafari: false,
+      isSupportInstallPWA: false,
+    });
+  });
+
+  it('should return correct platform info for Arc', () => {
+    vi.mocked(platformUtils.getPlatform).mockReturnValue('Mac OS');
+    vi.mocked(platformUtils.getBrowser).mockReturnValue('Chrome');
+    vi.mocked(platformUtils.isArc).mockReturnValue(true);
+    vi.mocked(platformUtils.isInStandaloneMode).mockReturnValue(false);
+    vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(false);
+
+    const { result } = renderHook(() => usePlatform());
+
+    expect(result.current).toEqual({
+      isApple: true,
+      isChrome: true,
+      isChromium: true,
+      isEdge: false,
+      isFirefox: false,
+      isIOS: false,
+      isMacOS: true,
+      isArc: true,
+      isPWA: false,
+      isSafari: false,
+      isSonomaOrLaterSafari: false,
+      isSupportInstallPWA: false,
+    });
+  });
 });

src/hooks/usePlatform.ts

@@ -1,8 +1,9 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 
 import {
   getBrowser,
   getPlatform,
+  isArc,
   isInStandaloneMode,
   isSonomaOrLaterSafari,
 } from '@/utils/platform';
@@ -12,21 +13,30 @@ export const usePlatform = () => {
   const browser = useRef(getBrowser());
 
   const platformInfo = {
-    isApple: platform.current && ['Mac OS', 'iOS'].includes(platform.current),
-    isChrome: browser.current === 'Chrome',
-    isChromium: browser.current && ['Chrome', 'Edge', 'Opera', 'Brave'].includes(browser.current),
-    isEdge: browser.current === 'Edge',
-    isIOS: platform.current === 'iOS',
-    isMacOS: platform.current === 'Mac OS',
+    isApple: platform.current && ['mac os', 'ios'].includes(platform.current?.toLowerCase()),
+    isArc: isArc(),
+    isChrome: browser.current?.toLowerCase() === 'chrome',
+    isChromium:
+      browser.current &&
+      ['chrome', 'edge', 'opera', 'brave'].includes(browser.current?.toLowerCase()),
+    isEdge: browser.current?.toLowerCase() === 'edge',
+    isFirefox: browser.current?.toLowerCase() === 'firefox',
+    isIOS: platform.current?.toLowerCase() === 'ios',
+    isMacOS: platform.current?.toLowerCase() === 'mac os',
     isPWA: isInStandaloneMode(),
-    isSafari: browser.current === 'Safari',
+    isSafari: browser.current?.toLowerCase() === 'safari',
     isSonomaOrLaterSafari: isSonomaOrLaterSafari(),
   };
 
-  return {
-    ...platformInfo,
-    isSupportInstallPWA:
-      (platformInfo.isChromium && !platformInfo.isIOS) ||
-      (platformInfo.isMacOS && platformInfo.isSonomaOrLaterSafari),
-  };
+  return useMemo(
+    () => ({
+      ...platformInfo,
+      isSupportInstallPWA:
+        !platformInfo.isArc &&
+        !platformInfo.isFirefox &&
+        ((platformInfo.isChromium && !platformInfo.isIOS) ||
+          (platformInfo.isMacOS && platformInfo.isSonomaOrLaterSafari)),
+    }),
+    [platformInfo],
+  );
 };

src/utils/platform.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { isSonomaOrLaterSafari } from './platform';
+import { isArc, isSonomaOrLaterSafari } from './platform';
 
 describe('isSonomaOrLaterSafari', () => {
   beforeEach(() => {
@@ -80,4 +80,58 @@ describe('isSonomaOrLaterSafari', () => {
     );
     expect(isSonomaOrLaterSafari()).toBe(true);
   });
+
+  describe('isArc', () => {
+    // 保存原始的 window 对象
+    const originalWindow = { ...window };
+
+    beforeEach(() => {
+      // 重置 window 对象
+      vi.stubGlobal('window', { ...originalWindow });
+      // 模拟 matchMedia
+      window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+    });
+
+    afterEach(() => {
+      // 清理所有模拟
+      vi.restoreAllMocks();
+    });
+
+    it('should return false when on server side', () => {
+      vi.mock('./platform', async (importOriginal) => {
+        const mod = await importOriginal();
+
+        return {
+          // @ts-ignore
+          ...mod,
+          isOnServerSide: true,
+        };
+      });
+      expect(isArc()).toBe(false);
+    });
+
+    it('should return true when CSS custom property matches', () => {
+      window.matchMedia = vi.fn().mockReturnValue({ matches: true });
+      expect(isArc()).toBe(true);
+    });
+
+    it('should return true when "arc" is in window', () => {
+      (window as any).arc = {};
+      expect(isArc()).toBe(true);
+    });
+
+    it('should return true when "ArcControl" is in window', () => {
+      (window as any).ArcControl = {};
+      expect(isArc()).toBe(true);
+    });
+
+    it('should return true when "ARCControl" is in window', () => {
+      (window as any).ARCControl = {};
+      expect(isArc()).toBe(true);
+    });
+
+    it('should return false when none of the conditions are met', () => {
+      expect(isArc()).toBe(false);
+    });
+  });
 });

src/utils/platform.ts

@@ -25,6 +25,15 @@ export const browserInfo = {
 
 export const isMacOS = () => getPlatform() === 'Mac OS';
 
+export const isArc = () => {
+  if (isOnServerSide) return false;
+  return (
+    window.matchMedia('(--arc-palette-focus: var(--arc-background-simple-color))').matches ||
+    Boolean('arc' in window || 'ArcControl' in window || 'ARCControl' in window) ||
+    Boolean(getComputedStyle(document.documentElement).getPropertyValue('--arc-palette-title'))
+  );
+};
+
 export const isInStandaloneMode = () => {
   if (isOnServerSide) return false;
   return (