From 94fcbb7445e92a0e2ea29c66e0746b18bbd0ed6d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 2 Jan 2023 01:16:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E5=89=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84beforeinstallprompt=E4=BB=A5=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E8=BF=87=E6=99=9A=E6=97=A0=E6=B3=95=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E5=88=B0pwa=E5=AE=89=E8=A3=85=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/i18n/langs/en-US/translation.json  |  1 +
 .../shared/i18n/langs/zh-CN/translation.json  |  1 +
 .../web/src/routes/Main/Navbar/InstallBtn.tsx | 31 +++++++++++++++---
 client/web/src/utils/sw-helper.ts             | 32 ++++++++++++++++++-
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json
index eef9ecec..9e5d491a 100644
--- a/client/shared/i18n/langs/en-US/translation.json
+++ b/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",
diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json
index ecf590ca..dc0e0176 100644
--- a/client/shared/i18n/langs/zh-CN/translation.json
+++ b/client/shared/i18n/langs/zh-CN/translation.json
@@ -160,6 +160,7 @@
   "k8d46e81e": "可能是图片体积过大",
   "k8dc86b13": "Pin",
   "k8e7fb0d7": "MiniStar 应用初始化失败",
+  "k8f6ab535": "无法安装",
   "k8f6dfd40": "当前成员数",
   "k9179206d": "正在重新链接",
   "k9277af78": "重试",
diff --git a/client/web/src/routes/Main/Navbar/InstallBtn.tsx b/client/web/src/routes/Main/Navbar/InstallBtn.tsx
index b58964e4..341fb231 100644
--- a/client/web/src/routes/Main/Navbar/InstallBtn.tsx
+++ b/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;
+}
diff --git a/client/web/src/utils/sw-helper.ts b/client/web/src/utils/sw-helper.ts
index 66b9371a..8c0a4f0c 100644
--- a/client/web/src/utils/sw-helper.ts
+++ b/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;
+}