@lobehub/chat 0.161.10 → 0.161.12

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.161.12](https://github.com/lobehub/lobe-chat/compare/v0.161.11...v0.161.12)
+
+<sup>Released on **2024-05-23**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the home redirect implement.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the home redirect implement, closes [#2626](https://github.com/lobehub/lobe-chat/issues/2626) ([ab4216e](https://github.com/lobehub/lobe-chat/commit/ab4216e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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.12",
   "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/(loading)/Redirect.tsx

@@ -3,35 +3,47 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
-import { messageService } from '@/services/message';
-import { sessionService } from '@/services/session';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
-const checkHasConversation = async () => {
-  const hasMessages = await messageService.hasMessages();
-  const hasAgents = await sessionService.hasSessions();
-  return hasMessages || hasAgents;
-};
-
 const Redirect = memo(() => {
   const router = useRouter();
-  const isLogin = useUserStore(authSelectors.isLogin);
+  const [isLogin, isLoaded, isUserStateInit, isUserHasConversation, isOnboard] = useUserStore(
+    (s) => [
+      authSelectors.isLogin(s),
+      authSelectors.isLoaded(s),
+      s.isUserStateInit,
+      s.isUserHasConversation,
+      s.isOnboard,
+    ],
+  );
 
   useEffect(() => {
+    // if user auth state is not ready, wait for loading
+    if (!isLoaded) return;
+
+    // this mean user is definitely not login
     if (!isLogin) {
       router.replace('/welcome');
       return;
     }
 
-    checkHasConversation().then((hasData) => {
-      if (hasData) {
-        router.replace('/chat');
-      } else {
-        router.replace('/welcome');
-      }
-    });
-  }, []);
+    // if user state not init, wait for loading
+    if (!isUserStateInit) return;
+
+    // user need to onboard
+    if (!isOnboard) {
+      router.replace('/onboard');
+      return;
+    }
+
+    // finally check the conversation status
+    if (isUserHasConversation) {
+      router.replace('/chat');
+    } else {
+      router.replace('/welcome');
+    }
+  }, [isUserStateInit, isLoaded, isUserHasConversation, isOnboard, isLogin]);
 
   return null;
 });

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/layout/AuthProvider/NoAuth/index.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useUserStore } from '@/store/user';
+
+const NoAuthProvider = memo<PropsWithChildren>(({ children }) => {
+  const useStoreUpdater = createStoreUpdater(useUserStore);
+
+  useStoreUpdater('isLoaded', true);
+
+  return children;
+});
+
+export default NoAuthProvider;

package/src/layout/AuthProvider/index.tsx

@@ -4,13 +4,14 @@ import { authEnv } from '@/config/auth';
 
 import Clerk from './Clerk';
 import NextAuth from './NextAuth';
+import NoAuth from './NoAuth';
 
 const AuthProvider = ({ children }: PropsWithChildren) => {
   if (authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH) return <Clerk>{children}</Clerk>;
 
   if (authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH) return <NextAuth>{children}</NextAuth>;
 
-  return children;
+  return <NoAuth>{children}</NoAuth>;
 };
 
 export default AuthProvider;

package/src/middleware.ts

@@ -41,16 +41,7 @@ const nextAuthMiddleware = auth((req) => {
 });
 
 export default authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH
-  ? // can't lift to a function because if there is no clerk public key, it will throw error
-    clerkMiddleware((auth, request) => {
-      // if user is logged in and on the home page, redirect to chat
-      if (auth().userId && request.nextUrl.pathname === '/') {
-        request.nextUrl.pathname = '/chat';
-        return NextResponse.redirect(request.nextUrl);
-      }
-
-      return NextResponse.next();
-    })
+  ? clerkMiddleware()
   : authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH
     ? nextAuthMiddleware
     : defaultMiddleware;

package/src/services/user/client.test.ts

@@ -46,6 +46,8 @@ describe('ClientService', () => {
     expect(userState).toEqual({
       avatar: mockUser.avatar,
       isOnboard: true,
+      canEnablePWAGuide: false,
+      hasConversation: false,
       canEnableTrace: false,
       preference: mockPreference,
       settings: mockUser.settings,

package/src/services/user/client.ts

@@ -1,6 +1,7 @@
 import { DeepPartial } from 'utility-types';
 
 import { MessageModel } from '@/database/client/models/message';
+import { SessionModel } from '@/database/client/models/session';
 import { UserModel } from '@/database/client/models/user';
 import { GlobalSettings } from '@/types/settings';
 import { UserInitializationState, UserPreference } from '@/types/user';
@@ -18,10 +19,13 @@ export class ClientService implements IUserService {
   async getUserState(): Promise<UserInitializationState> {
     const user = await UserModel.getUser();
     const messageCount = await MessageModel.count();
+    const sessionCount = await SessionModel.count();
 
     return {
       avatar: user.avatar,
+      canEnablePWAGuide: messageCount >= 2,
       canEnableTrace: messageCount >= 4,
+      hasConversation: messageCount > 0 || sessionCount > 0,
       isOnboard: true,
       preference: await this.preferenceStorage.getFromLocalStorage(),
       settings: user.settings as GlobalSettings,

package/src/services/user/type.ts

@@ -6,7 +6,6 @@ import { UserInitializationState, UserPreference } from '@/types/user';
 export interface IUserService {
   getUserState: () => Promise<UserInitializationState>;
   resetUserSettings: () => Promise<any>;
-  updateAvatar: (avatar: string) => Promise<any>;
   updatePreference: (preference: UserPreference) => Promise<any>;
   updateUserSettings: (patch: DeepPartial<GlobalSettings>) => Promise<any>;
 }

package/src/store/user/slices/auth/selectors.ts

@@ -41,6 +41,7 @@ const isLogin = (s: UserStore) => {
 };
 
 export const authSelectors = {
+  isLoaded: (s: UserStore) => s.isLoaded,
   isLogin,
   isLoginWithAuth: (s: UserStore) => s.isSignedIn,
   isLoginWithClerk: (s: UserStore): boolean => (s.isSignedIn && enableClerk) || false,

package/src/store/user/slices/common/action.test.ts

@@ -5,6 +5,7 @@ import { withSWR } from '~test-utils';
 
 import { DEFAULT_PREFERENCE } from '@/const/user';
 import { userService } from '@/services/user';
+import { ClientService } from '@/services/user/client';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { GlobalServerConfig } from '@/types/serverConfig';
@@ -36,7 +37,7 @@ describe('createCommonSlice', () => {
       const avatar = 'new-avatar';
 
       const spyOn = vi.spyOn(result.current, 'refreshUserState');
-      const updateAvatarSpy = vi.spyOn(userService, 'updateAvatar');
+      const updateAvatarSpy = vi.spyOn(ClientService.prototype, 'updateAvatar');
 
       await act(async () => {
         await result.current.updateAvatar(avatar);

package/src/store/user/slices/common/action.ts

@@ -4,6 +4,7 @@ import type { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_PREFERENCE } from '@/const/user';
 import { userService } from '@/services/user';
+import { ClientService } from '@/services/user/client';
 import type { UserStore } from '@/store/user';
 import type { GlobalServerConfig } from '@/types/serverConfig';
 import type { GlobalSettings } from '@/types/settings';
@@ -45,7 +46,9 @@ export const createCommonSlice: StateCreator<
     await mutate(GET_USER_STATE_KEY);
   },
   updateAvatar: async (avatar) => {
-    await userService.updateAvatar(avatar);
+    const clientService = new ClientService();
+
+    await clientService.updateAvatar(avatar);
     await get().refreshUserState();
   },
 
@@ -89,8 +92,12 @@ export const createCommonSlice: StateCreator<
               {
                 defaultSettings,
                 enabledNextAuth: serverConfig.enabledOAuthSSO,
+                isOnboard: data.isOnboard,
+                isShowPWAGuide: data.canEnablePWAGuide,
                 isUserCanEnableTrace: data.canEnableTrace,
+                isUserHasConversation: data.hasConversation,
                 isUserStateInit: true,
+
                 preference,
                 serverLanguageModel: serverConfig.languageModel,
                 settings: data.settings || {},

package/src/store/user/slices/common/initialState.ts

@@ -1,9 +1,15 @@
 export interface CommonState {
+  isOnboard: boolean;
+  isShowPWAGuide: boolean;
   isUserCanEnableTrace: boolean;
+  isUserHasConversation: boolean;
   isUserStateInit: boolean;
 }
 
 export const initialCommonState: CommonState = {
+  isOnboard: false,
+  isShowPWAGuide: false,
   isUserCanEnableTrace: false,
+  isUserHasConversation: false,
   isUserStateInit: false,
 };

package/src/types/user/index.ts

@@ -34,7 +34,9 @@ export interface UserPreference {
 
 export interface UserInitializationState {
   avatar?: string;
+  canEnablePWAGuide?: boolean;
   canEnableTrace?: boolean;
+  hasConversation?: boolean;
   isOnboard?: boolean;
   preference: UserPreference;
   settings: DeepPartial<GlobalSettings>;

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;
-};