@lobehub/chat 0.161.10 → 0.161.11

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.161.11](https://github.com/lobehub/lobe-chat/compare/v0.161.10...v0.161.11)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve PWA install guide.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve PWA install guide, closes [#2617](https://github.com/lobehub/lobe-chat/issues/2617) ([7fee545](https://github.com/lobehub/lobe-chat/commit/7fee545))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.10](https://github.com/lobehub/lobe-chat/compare/v0.161.9...v0.161.10)
 
 <sup>Released on **2024-05-23**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.10",
+  "version": "0.161.11",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -94,6 +94,7 @@
     "@clerk/themes": "^2.1.6",
     "@google/generative-ai": "^0.11.3",
     "@icons-pack/react-simple-icons": "^9.5.0",
+    "@khmyznikov/pwa-install": "^0.3.9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "^1.22.0",

package/src/app/(main)/_layout/Desktop.tsx

@@ -4,12 +4,12 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useIsPWA } from '@/hooks/useIsPWA';
+import { usePlatform } from '@/hooks/usePlatform';
 
 import { LayoutProps } from './type';
 
 const Layout = memo<LayoutProps>(({ children, nav }) => {
-  const isPWA = useIsPWA();
+  const { isPWA } = usePlatform();
   const theme = useTheme();
 
   return (

package/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import PWAInstall from '@/features/PWAInstall';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
@@ -31,6 +32,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
             {children}
             {modal}
           </AuthProvider>
+          <PWAInstall />
         </GlobalProvider>
         <Analytics />
         {inVercel && <SpeedInsights />}

package/src/const/layoutTokens.ts

@@ -18,3 +18,4 @@ export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };
 export const DESKTOP_HEADER_ICON_SIZE = { fontSize: 24 };
 export const HEADER_ICON_SIZE = (mobile?: boolean) =>
   mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE;
+export const PWA_INSTALL_ID = 'pwa-install';

package/src/features/PWAInstall/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+import { usePlatform } from '@/hooks/usePlatform';
+
+// @ts-ignore
+const PWA: any = dynamic(() => import('@khmyznikov/pwa-install/dist/pwa-install.react.js'), {
+  ssr: false,
+});
+
+const PWAInstall = memo(() => {
+  const { t } = useTranslation('metadata');
+  const { isPWA } = usePlatform();
+  if (isPWA) return null;
+  return <PWA description={t('chat.description')} id={PWA_INSTALL_ID} />;
+});
+
+export default PWAInstall;

package/src/hooks/usePWAInstall.test.ts

@@ -0,0 +1,78 @@
+import { act, renderHook } from '@testing-library/react';
+import { pwaInstallHandler } from 'pwa-install-handler';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+
+import { usePWAInstall } from './usePWAInstall';
+import { usePlatform } from './usePlatform';
+
+// Mocks
+vi.mock('./usePlatform', () => ({
+  usePlatform: vi.fn(),
+}));
+
+vi.mock('@/utils/env', () => ({
+  isOnServerSide: false,
+}));
+
+vi.mock('pwa-install-handler', () => ({
+  pwaInstallHandler: {
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    getEvent: vi.fn(),
+  },
+}));
+
+describe('usePWAInstall', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return canInstall as false when in PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: true, isPWA: true } as any);
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(false);
+  });
+
+  it('should return canInstall based on canInstall state when support PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: true, isPWA: false } as any);
+
+    const { result, rerender } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(false);
+
+    act(() => {
+      vi.mocked(pwaInstallHandler.addListener).mock.calls[0][0](true);
+    });
+
+    rerender();
+
+    expect(result.current.canInstall).toBe(true);
+  });
+
+  it('should return canInstall as true when not support PWA', () => {
+    vi.mocked(usePlatform).mockReturnValue({ isSupportInstallPWA: false, isPWA: false } as any);
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    expect(result.current.canInstall).toBe(true);
+  });
+
+  it('should call pwa.showDialog when install is called', () => {
+    const mockShowDialog = vi.fn();
+    document.body.innerHTML = `<div id="${PWA_INSTALL_ID}"></div>`;
+    const pwaElement: any = document.querySelector(`#${PWA_INSTALL_ID}`);
+    pwaElement.showDialog = mockShowDialog;
+
+    const { result } = renderHook(() => usePWAInstall());
+
+    act(() => {
+      result.current.install();
+    });
+
+    expect(mockShowDialog).toHaveBeenCalledWith(true);
+  });
+});

package/src/hooks/usePWAInstall.ts

@@ -1,18 +1,39 @@
 import { pwaInstallHandler } from 'pwa-install-handler';
 import { useEffect, useState } from 'react';
 
+import { PWA_INSTALL_ID } from '@/const/layoutTokens';
+import { isOnServerSide } from '@/utils/env';
+
+import { usePlatform } from './usePlatform';
+
 export const usePWAInstall = () => {
   const [canInstall, setCanInstall] = useState(false);
+  const { isSupportInstallPWA, isPWA } = usePlatform();
 
   useEffect(() => {
+    if (isOnServerSide) return;
     pwaInstallHandler.addListener(setCanInstall);
     return () => {
       pwaInstallHandler.removeListener(setCanInstall);
     };
   }, []);
 
+  const installCheck = () => {
+    // 当在 PWA 中时，不显示安装按钮
+    if (isPWA) return false;
+    // 其他情况下，根据是否可以安装来显示安装按钮 (如已经安装则不显示)
+    if (isSupportInstallPWA) return canInstall;
+    // 当在不支持 PWA 的环境中时，安装按钮 (此时为安装教程)
+    return true;
+  };
+
   return {
-    canInstall,
-    install: pwaInstallHandler.install,
+    canInstall: installCheck(),
+    install: () => {
+      const pwa: any = document.querySelector(`#${PWA_INSTALL_ID}`);
+      if (!pwa) return;
+      pwa.externalPromptEvent = pwaInstallHandler.getEvent();
+      pwa?.showDialog(true);
+    },
   };
 };

package/src/hooks/usePlatform.test.ts

@@ -0,0 +1,82 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import * as platformUtils from '@/utils/platform';
+
+import { usePlatform } from './usePlatform';
+
+// Mocks
+vi.mock('@/utils/platform', () => ({
+  getBrowser: vi.fn(),
+  getPlatform: vi.fn(),
+  isInStandaloneMode: vi.fn(),
+  isSonomaOrLaterSafari: 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.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,
+      isIOS: false,
+      isMacOS: true,
+      isPWA: false,
+      isSafari: false,
+      isSonomaOrLaterSafari: false,
+      isSupportInstallPWA: true,
+    });
+  });
+
+  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.isInStandaloneMode).mockReturnValue(true);
+    vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(true);
+
+    const { result } = renderHook(() => usePlatform());
+
+    expect(result.current).toEqual({
+      isApple: true,
+      isChrome: false,
+      isChromium: false,
+      isEdge: false,
+      isIOS: true,
+      isMacOS: false,
+      isPWA: true,
+      isSafari: true,
+      isSonomaOrLaterSafari: true,
+      isSupportInstallPWA: false,
+    });
+  });
+
+  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.isInStandaloneMode).mockReturnValue(false);
+    vi.mocked(platformUtils.isSonomaOrLaterSafari).mockReturnValue(false);
+
+    const { result } = renderHook(() => usePlatform());
+
+    expect(result.current).toEqual({
+      isApple: false,
+      isChrome: false,
+      isChromium: true,
+      isEdge: true,
+      isIOS: false,
+      isMacOS: false,
+      isPWA: false,
+      isSafari: false,
+      isSonomaOrLaterSafari: false,
+      isSupportInstallPWA: true,
+    });
+  });
+});

package/src/hooks/usePlatform.ts

@@ -1,15 +1,32 @@
 import { useRef } from 'react';
 
-import { getBrowser, getPlatform } from '@/utils/platform';
+import {
+  getBrowser,
+  getPlatform,
+  isInStandaloneMode,
+  isSonomaOrLaterSafari,
+} from '@/utils/platform';
 
 export const usePlatform = () => {
   const platform = useRef(getPlatform());
   const browser = useRef(getBrowser());
-  return {
+
+  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',
+    isPWA: isInStandaloneMode(),
     isSafari: browser.current === 'Safari',
+    isSonomaOrLaterSafari: isSonomaOrLaterSafari(),
+  };
+
+  return {
+    ...platformInfo,
+    isSupportInstallPWA:
+      (platformInfo.isChromium && !platformInfo.isIOS) ||
+      (platformInfo.isMacOS && platformInfo.isSonomaOrLaterSafari),
   };
 };

package/src/utils/platform.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { isSonomaOrLaterSafari } from './platform';
+
+describe('isSonomaOrLaterSafari', () => {
+  beforeEach(() => {
+    // 重置 navigator 对象
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15',
+      maxTouchPoints: 0,
+    });
+  });
+
+  it('should return false when userAgent is not Macintosh', () => {
+    vi.stubGlobal('navigator', { userAgent: 'Windows NT 10.0; Win64; x64' });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when navigator.maxTouchPoints > 0', () => {
+    Object.defineProperty(navigator, 'maxTouchPoints', { value: 1 });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when Safari version < 17', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15',
+    });
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when audio codec check fails', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue(''),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce(null);
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return false when WebGL check fails', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue('maybe'),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce(null);
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(false);
+  });
+
+  it('should return true when all checks pass', () => {
+    vi.stubGlobal('navigator', {
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+    });
+    vi.spyOn(document, 'createElement').mockReturnValueOnce({
+      canPlayType: vi.fn().mockReturnValue('maybe'),
+    } as any);
+    vi.stubGlobal(
+      'OffscreenCanvas',
+      class {
+        getContext = vi.fn().mockReturnValueOnce({});
+      },
+    );
+    expect(isSonomaOrLaterSafari()).toBe(true);
+  });
+});

package/src/utils/platform.ts

@@ -1,7 +1,9 @@
 import UAParser from 'ua-parser-js';
 
-const getParser = () => {
-  if (typeof window === 'undefined') return new UAParser('Node');
+import { isOnServerSide } from '@/utils/env';
+
+export const getParser = () => {
+  if (isOnServerSide) return new UAParser('Node');
 
   let ua = navigator.userAgent;
   return new UAParser(ua);
@@ -22,3 +24,32 @@ export const browserInfo = {
 };
 
 export const isMacOS = () => getPlatform() === 'Mac OS';
+
+export const isInStandaloneMode = () => {
+  if (isOnServerSide) return false;
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    ('standalone' in navigator && (navigator as any).standalone === true)
+  );
+};
+
+export const isSonomaOrLaterSafari = () => {
+  if (isOnServerSide) return false;
+
+  // refs: https://github.com/khmyznikov/pwa-install/blob/0904788b9d0e34399846f6cb7dbb5efeabb62c20/src/utils.ts#L24
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (navigator.maxTouchPoints || !/macintosh/.test(userAgent)) return false;
+
+  // check safari version >= 17
+  const version = /version\/(\d{2})\./.exec(userAgent);
+  if (!version || !version[1] || !(parseInt(version[1]) >= 17)) return false;
+
+  try {
+    // hacky way to detect Sonoma
+    const audioCheck = document.createElement('audio').canPlayType('audio/wav; codecs="1"');
+    const webGLCheck = new OffscreenCanvas(1, 1).getContext('webgl');
+    return Boolean(audioCheck) && Boolean(webGLCheck);
+  } catch {
+    return false;
+  }
+};

package/src/hooks/useIsPWA.ts

@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { isInStandaloneMode } from '@/utils/matchMedia';
-
-export const useIsPWA = () => {
-  const [isPWA, setIsPWA] = useState(false);
-
-  useEffect(() => {
-    setIsPWA(isInStandaloneMode());
-  }, []);
-
-  return isPWA;
-};

package/src/utils/matchMedia.ts

@@ -1,10 +0,0 @@
-/**
- * check standalone mode in browser
- */
-export const isInStandaloneMode = () => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  return window.matchMedia('(display-mode: standalone)').matches;
-};