Improve manual update flow and auto-check config

bingling-sama · bingling-sama · commit 905ae157ea87 · 2026-07-17T03:05:10.000+08:00
diff --git a/app.json b/app.json
@@ -11,7 +11,9 @@
     "scheme": "ccnubox",
     "userInterfaceStyle": "automatic",
     "updates": {
-      "url": "https://ota.ccnubox.muxixyz.com/65d670f0-9625-4631-9603-f4b11f44e621"
+      "url": "https://ota.ccnubox.muxixyz.com/65d670f0-9625-4631-9603-f4b11f44e621",
+      "checkAutomatically": "ON_LOAD",
+      "fallbackToCacheTimeout": 0
     },
     "assetBundlePatterns": [
       "src/assets/images/",
diff --git a/src/app/(setting)/checkUpdate.tsx b/src/app/(setting)/checkUpdate.tsx
@@ -1,7 +1,7 @@
 import * as Application from 'expo-application';
 import * as Constants from 'expo-constants';
 import * as Updates from 'expo-updates';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -12,6 +12,11 @@ import ThemeBasedView from '@/components/view';
 
 import useVisualScheme from '@/store/visualScheme';
 
+import {
+  checkAndDownloadUpdateAsync,
+  type EasUpdateProgress,
+} from '@/utils/easUpdate';
+
 import { UpdateInfo } from '@/types/updateInfo';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -20,19 +25,124 @@ const mxLogo = require('../../assets/images/mx-logo.png');
 function CheckUpdate(): React.ReactNode {
   const version = Application.nativeApplicationVersion;
   const updateInfo = Constants.default.expoConfig?.extra
-    ?.updateInfo as UpdateInfo;
-  const [loading, setLoading] = useState(false);
+    ?.updateInfo as UpdateInfo | undefined;
+  const [manualProgress, setManualProgress] = useState<
+    EasUpdateProgress | 'restarting' | null
+  >(null);
+  const [hasDownloadedUpdate, setHasDownloadedUpdate] = useState(false);
   const currentStyle = useVisualScheme(state => state.currentStyle);
-  const { isUpdateAvailable, isUpdatePending } = Updates.useUpdates();
-  useEffect(() => {
-    if (isUpdatePending) {
-      void Updates.reloadAsync();
+  const {
+    downloadProgress,
+    isChecking,
+    isDownloading,
+    isRestarting,
+    isStartupProcedureRunning,
+    isUpdateAvailable,
+    isUpdatePending,
+  } = Updates.useUpdates();
+
+  const canRestart = isUpdatePending || hasDownloadedUpdate;
+  const isBusy =
+    manualProgress !== null ||
+    isChecking ||
+    isDownloading ||
+    isRestarting ||
+    isStartupProcedureRunning;
+
+  const buttonLabel = useMemo(() => {
+    if (manualProgress === 'restarting' || isRestarting) return '正在重启…';
+    if (manualProgress === 'downloading' || isDownloading) {
+      return downloadProgress === undefined
+        ? '正在下载…'
+        : `正在下载 ${Math.round(downloadProgress * 100)}%`;
+    }
+    if (
+      manualProgress === 'checking' ||
+      isChecking ||
+      isStartupProcedureRunning
+    )
+      return '正在检查…';
+    if (canRestart) return '立即重启应用';
+    if (isUpdateAvailable && !isUpdatePending) return '下载更新';
+    return '检查更新';
+  }, [
+    canRestart,
+    downloadProgress,
+    isChecking,
+    isDownloading,
+    isRestarting,
+    isStartupProcedureRunning,
+    isUpdateAvailable,
+    isUpdatePending,
+    manualProgress,
+  ]);
+
+  const statusText = useMemo(() => {
+    if (manualProgress === 'restarting' || isRestarting)
+      return '正在应用更新，请稍候。';
+    if (manualProgress === 'downloading' || isDownloading)
+      return '正在下载更新，请保持网络连接。';
+    if (
+      manualProgress === 'checking' ||
+      isChecking ||
+      isStartupProcedureRunning
+    )
+      return '正在检查是否有可用更新。';
+    if (canRestart) return '更新已下载，重启应用后即可使用。';
+    if (isUpdateAvailable && !isUpdatePending)
+      return '发现可用更新，点击按钮开始下载。';
+    return '更新会在后台自动检查，也可以在这里手动检查。';
+  }, [
+    canRestart,
+    isChecking,
+    isDownloading,
+    isRestarting,
+    isStartupProcedureRunning,
+    isUpdateAvailable,
+    isUpdatePending,
+    manualProgress,
+  ]);
+
+  const handleUpdatePress = async () => {
+    if (isBusy) return;
+
+    if (canRestart) {
+      setManualProgress('restarting');
+      try {
+        await Updates.reloadAsync();
+      } catch {
+        setManualProgress(null);
+        Toast.show({ text: '应用更新失败，请稍后重试。' });
+      }
+      return;
+    }
+
+    if (__DEV__ || !Updates.isEnabled) {
+      Toast.show({ text: '当前构建不支持热更新检查。' });
+      return;
     }
-  }, [isUpdatePending]);
 
-  useEffect(() => {
-    if (isUpdateAvailable) Updates.fetchUpdateAsync().then(_r => {});
-  }, [isUpdateAvailable]);
+    setManualProgress('checking');
+    try {
+      const result = await checkAndDownloadUpdateAsync({
+        hasAvailableUpdate: isUpdateAvailable,
+        onProgress: setManualProgress,
+      });
+
+      if (result.status === 'downloaded') {
+        setHasDownloadedUpdate(true);
+        Toast.show({ text: '更新已下载，可以立即重启应用。' });
+      } else if (result.status === 'up-to-date') {
+        Toast.show({ text: '已是最新版', icon: 'success' });
+      } else {
+        Toast.show({ text: '当前构建未启用热更新。' });
+      }
+    } catch {
+      Toast.show({ text: '检查更新失败，请检查网络后重试。' });
+    } finally {
+      setManualProgress(null);
+    }
+  };
 
   return (
     <ThemeBasedView style={styles.container}>
@@ -44,61 +154,46 @@ function CheckUpdate(): React.ReactNode {
           </TypoText>
           <View style={styles.versionBlock}>
             <TypoText level={2} bold style={styles.versionTitle}>
-              热更新版本 {updateInfo.otaVersion}
+              热更新版本 {updateInfo?.otaVersion ?? Updates.runtimeVersion}
             </TypoText>
             <TypoText level="body">应用版本 {version}</TypoText>
-            <TypoText level="body">{updateInfo.updateTime || ''}</TypoText>
+            <TypoText level="body">{updateInfo?.updateTime ?? ''}</TypoText>
           </View>
           <View style={styles.divider} />
           <View style={styles.sectionBlock}>
             <TypoText level={3} bold style={styles.sectionTitle}>
               新增功能：
             </TypoText>
             <TypoText level="body" style={styles.sectionContent}>
-              {(updateInfo.newFeatures || []).join('\n')}
+              {(updateInfo?.newFeatures ?? []).join('\n')}
             </TypoText>
             <TypoText level={3} bold style={styles.sectionTitle}>
               Bug修复：
             </TypoText>
             <TypoText level="body" style={styles.sectionContent}>
-              {(updateInfo.fixedIssues || []).join('\n')}
+              {(updateInfo?.fixedIssues ?? []).join('\n')}
             </TypoText>
             <TypoText level={3} bold style={styles.sectionTitle}>
               已知问题：
             </TypoText>
             <TypoText level="body" style={styles.sectionContent}>
-              {(updateInfo.knownIssues || []).join('\n')}
+              {(updateInfo?.knownIssues ?? []).join('\n')}
             </TypoText>
           </View>
           <View style={styles.divider} />
           <Button
             style={[styles.updateButton, currentStyle?.button_style]}
-            onPress={() => {
-              setLoading(true);
-              if (__DEV__) {
-                Toast.show({ text: '已是最新版', icon: 'success' });
-                setLoading(false);
-              } else {
-                Updates.checkForUpdateAsync()
-                  .then(res => {
-                    if (!res.isAvailable) {
-                      Toast.show({ text: '已是最新版', icon: 'success' });
-                    }
-                  })
-                  .catch(err => {
-                    Toast.show({ text: err.toString() });
-                  })
-                  .finally(() => {
-                    setLoading(false);
-                  });
-              }
-            }}
-            isLoading={loading}
+            onPress={() => void handleUpdatePress()}
+            isLoading={isBusy}
           >
-            检 查 更 新
+            {buttonLabel}
           </Button>
-          <TypoText level="body" style={styles.bottomTip}>
-            更新后请重启应用以确保新功能生效。
+          <TypoText
+            level="body"
+            style={styles.bottomTip}
+            accessibilityLiveRegion="polite"
+          >
+            {statusText}
           </TypoText>
         </View>
       </ScrollView>
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -17,7 +17,6 @@ import { usePortalStore } from '../store/portal';
 import useScraper from '../store/scraper';
 import useVisualScheme from '../store/visualScheme';
 import { commonColors } from '../styles/common';
-import { fetchUpdate } from '../utils';
 
 export default function RootLayout() {
   const rootNavigationState = useRootNavigationState();
@@ -40,35 +39,30 @@ export default function RootLayout() {
   useJPush();
   useBadgeSync();
 
-  const initApp = React.useCallback(async () => {
+  React.useEffect(() => {
     // 引入所有样式以及基于 theme 的组件
     initVisualScheme();
     // 加载字体
     void loadAsync({
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
       antoutline: require('@ant-design/icons-react-native/fonts/antoutline.ttf'),
     });
     // 配置Toast
     Toast.config({ mask: false, stackable: true });
-    // 获取更新
-    if (!__DEV__) {
-      fetchUpdate();
-    }
     // 在 store 中设置爬虫 ref
     setRef(scraperRef as React.RefObject<WebView>);
     // 在 store 中配置 portal ref
     setPortalRef(portalRef);
   }, [initVisualScheme, setPortalRef, setRef]);
 
   React.useEffect(() => {
-    initApp();
     const listener = Appearance.addChangeListener(scheme => {
-      console.log('toggled change scheme', scheme);
       if (isAutoTheme) {
         changeTheme(scheme.colorScheme === 'dark' ? 'dark' : 'light');
       }
     });
     return () => listener.remove();
-  }, [isAutoTheme, changeTheme, initApp]);
+  }, [isAutoTheme, changeTheme]);
 
   React.useEffect(() => {
     const activeRootRouteName =
diff --git a/src/utils/easUpdate.ts b/src/utils/easUpdate.ts
@@ -0,0 +1,53 @@
+import * as Updates from 'expo-updates';
+
+export type EasUpdateResult =
+  | { status: 'disabled' }
+  | { status: 'up-to-date' }
+  | { status: 'downloaded' };
+
+export type EasUpdateProgress = 'checking' | 'downloading';
+
+type EasUpdateOptions = {
+  hasAvailableUpdate?: boolean;
+  onProgress?: (progress: EasUpdateProgress) => void;
+};
+
+let activeUpdateOperation: Promise<EasUpdateResult> | null = null;
+
+const runUpdateOperation = async (
+  options: EasUpdateOptions,
+): Promise<EasUpdateResult> => {
+  if (!Updates.isEnabled) {
+    return { status: 'disabled' };
+  }
+
+  if (!options.hasAvailableUpdate) {
+    options.onProgress?.('checking');
+    const checkResult = await Updates.checkForUpdateAsync();
+    if (!checkResult.isAvailable && !checkResult.isRollBackToEmbedded) {
+      return { status: 'up-to-date' };
+    }
+  }
+
+  options.onProgress?.('downloading');
+  const fetchResult = await Updates.fetchUpdateAsync();
+  if (fetchResult.isNew || fetchResult.isRollBackToEmbedded) {
+    return { status: 'downloaded' };
+  }
+
+  return { status: 'up-to-date' };
+};
+
+export const checkAndDownloadUpdateAsync = (
+  options: EasUpdateOptions = {},
+): Promise<EasUpdateResult> => {
+  if (activeUpdateOperation) {
+    return activeUpdateOperation;
+  }
+
+  activeUpdateOperation = runUpdateOperation(options).finally(() => {
+    activeUpdateOperation = null;
+  });
+
+  return activeUpdateOperation;
+};
diff --git a/src/utils/fetchUpdate.tsx b/src/utils/fetchUpdate.tsx
diff --git a/src/utils/index.ts b/src/utils/index.ts
