fix: 增加前置的beforeinstallprompt以修复加载过晚无法监听到pwa安装事件的问题

client/shared/i18n/langs/en-US/translation.json

@@ -160,6 +160,7 @@
   "k8d46e81e": "Maybe the image is too large",
   "k8dc86b13": "Pin",
   "k8e7fb0d7": "MiniStar App initialization failed",
+  "k8f6ab535": "Unable to install",
   "k8f6dfd40": "Current members",
   "k9179206d": "Reconnecting",
   "k9277af78": "Retry",

client/shared/i18n/langs/zh-CN/translation.json

@@ -160,6 +160,7 @@
   "k8d46e81e": "可能是图片体积过大",
   "k8dc86b13": "Pin",
   "k8e7fb0d7": "MiniStar 应用初始化失败",
+  "k8f6ab535": "无法安装",
   "k8f6dfd40": "当前成员数",
   "k9179206d": "正在重新链接",
   "k9277af78": "重试",

client/web/src/routes/Main/Navbar/InstallBtn.tsx

@@ -1,14 +1,14 @@
-import { usePwa } from '@/hooks/usePwa';
-import React from 'react';
+import { canInstallprompt, showInstallPrompt } from '@/utils/sw-helper';
+import React, { useEffect, useState } from 'react';
 import { Icon } from 'tailchat-design';
 
 /**
  * 安装按钮
  */
 export const InstallBtn: React.FC = React.memo(() => {
-  const { canInstallprompt, showInstallPrompt } = usePwa();
+  const canInstall = useCanInstallPwa();
 
-  if (!canInstallprompt) {
+  if (!canInstall) {
     return null;
   }
 
@@ -21,3 +21,26 @@ export const InstallBtn: React.FC = React.memo(() => {
   );
 });
 InstallBtn.displayName = 'InstallBtn';
+
+function useCanInstallPwa() {
+  const [canInstall, setCanInstall] = useState(false);
+
+  useEffect(() => {
+    if (canInstallprompt()) {
+      setCanInstall(true);
+      return;
+    }
+
+    const handleEvent = (e: any) => {
+      setCanInstall(true);
+    };
+
+    window.addEventListener('beforeinstallprompt', handleEvent);
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleEvent);
+    };
+  }, []);
+
+  return canInstall;
+}

client/web/src/utils/sw-helper.ts

@@ -1,9 +1,18 @@
 import { notification } from 'antd';
 import React from 'react';
 import _once from 'lodash/once';
-import { t } from 'tailchat-shared';
+import { showErrorToasts, t } from 'tailchat-shared';
 import { UpdateNotificationBtn } from '@/components/UpdateNotificationBtn';
 
+type BeforeInstallPromptEvent = Event & {
+  readonly platforms: Array<string>;
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+};
+
 /**
  * 弹出更新提示框
  */
@@ -20,6 +29,7 @@ const handleShowUpdateTip = _once(() => {
 });
 
 let _serviceWorkerRegistration: ServiceWorkerRegistration | null = null;
+let beforeinstallprompt: BeforeInstallPromptEvent;
 
 /**
  * 处理registration相关任务和状态
@@ -77,6 +87,10 @@ export function installServiceWorker() {
           console.log('SW registration failed: ', registrationError);
         });
     });
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+      beforeinstallprompt = e as any;
+    });
   }
 }
 
@@ -86,3 +100,19 @@ export function installServiceWorker() {
 export function getServiceWorkerRegistration(): ServiceWorkerRegistration | null {
   return _serviceWorkerRegistration;
 }
+
+/**
+ * 显示pwa安装按钮
+ */
+export function showInstallPrompt() {
+  if (!beforeinstallprompt) {
+    showErrorToasts(t('无法安装'));
+    return;
+  }
+
+  beforeinstallprompt.prompt();
+}
+
+export function canInstallprompt() {
+  return !!beforeinstallprompt;
+}