Fix mobile PWA navigation behavior

Author: dogxii

CHANGELOG.md

@@ -6,6 +6,8 @@
 - 新安装用户默认自动模式：PWA 独立窗口使用底部导航，普通浏览器使用顶部导航。
 - 已有本地设置的 0.1.0 用户默认保留底部导航，避免升级后突然改变操作习惯。
 - 配置导入导出和恢复默认同步支持移动端导航模式。
+- 修复 iOS PWA 底部导航栏安全区空白，并在下滑阅读时自动隐藏底部导航。
+- iOS 添加到主屏幕提示关闭后会记住选择，刷新后不再重复显示。
 - 更新 Service Worker 静态缓存名到 `60s-web-static-v0.1.1`。
 
 ## 0.1.0

README.md

@@ -186,6 +186,8 @@ PWA 只缓存应用壳和静态资源，新闻、天气、热榜等 API 数据
 - 设置页新增“移动端导航”，可选择自动、底部导航或顶部导航。
 - 配置导入导出和恢复默认同步支持移动端导航模式。
 - 顶部导航模式释放底部空间，底部导航模式保留单手操作体验。
+- 底部导航修复 iOS PWA 安全区空白，并在下滑阅读时自动隐藏。
+- 添加到主屏幕提示关闭后会记住选择，刷新后不再重复显示。
 - Service Worker 静态缓存名更新到 `60s-web-static-v0.1.1`。
 
 ## 0.1.0 发布说明
@@ -344,6 +346,8 @@ server {
 - 工具页常用接口收藏能够在刷新后保留，并能快速切换到对应接口。
 - iPhone Safari 可以添加到主屏幕，打开后显示独立窗口和底部导航。
 - 设置页切换移动端导航模式后，顶部导航和底部导航显示符合预期。
+- 下滑阅读时底部导航自动隐藏，上滑或回到顶部后恢复显示。
+- 关闭 iOS 添加到主屏幕提示后，刷新页面不会再次显示。
 - 移动端底部导航切换页面后回到顶部，点击当前入口也能回到顶部。
 - 新版本 Service Worker 安装后能够显示更新提示并刷新到最新应用壳。
 - 断网后应用壳能够打开，API 内容显示现有失败提示。

src/App.tsx

@@ -359,6 +359,7 @@ export function App() {
 		useState<ServiceWorkerRegistration | null>(null);
 	const [showInstallHint, setShowInstallHint] = useState(false);
 	const [isStandalone, setIsStandalone] = useState(isStandaloneDisplay);
+	const [bottomNavHidden, setBottomNavHidden] = useState(false);
 
 	const daily = useApi<DailyNews>(
 		apiBase,
@@ -519,7 +520,9 @@ export function App() {
 	useEffect(() => registerServiceWorker(setServiceWorkerUpdate), []);
 
 	useEffect(() => {
-		setShowInstallHint(shouldShowIosInstallHint());
+		const dismissed =
+			readStoredValue(STORAGE_KEYS.iosInstallHintDismissed, "false") === "true";
+		setShowInstallHint(!dismissed && shouldShowIosInstallHint());
 	}, []);
 
 	useEffect(() => {
@@ -657,6 +660,41 @@ export function App() {
 				: "top"
 			: mobileNavMode;
 
+	useEffect(() => {
+		if (resolvedMobileNav !== "bottom") {
+			setBottomNavHidden(false);
+			return;
+		}
+
+		let lastScrollY = window.scrollY;
+		let ticking = false;
+
+		const updateNavVisibility = () => {
+			const currentScrollY = window.scrollY;
+			const delta = currentScrollY - lastScrollY;
+
+			if (currentScrollY < 80) {
+				setBottomNavHidden(false);
+			} else if (delta > 12) {
+				setBottomNavHidden(true);
+			} else if (delta < -12) {
+				setBottomNavHidden(false);
+			}
+
+			lastScrollY = currentScrollY;
+			ticking = false;
+		};
+
+		const handleScroll = () => {
+			if (ticking) return;
+			ticking = true;
+			window.requestAnimationFrame(updateNavVisibility);
+		};
+
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [resolvedMobileNav]);
+
 	const reloadAll = () => {
 		daily.reload();
 		weather.reload();
@@ -715,7 +753,10 @@ export function App() {
 					applyServiceWorkerUpdate(serviceWorkerUpdate);
 					setServiceWorkerUpdate(null);
 				}}
-				onDismissInstallHint={() => setShowInstallHint(false)}
+				onDismissInstallHint={() => {
+					writeStoredValue(STORAGE_KEYS.iosInstallHintDismissed, "true");
+					setShowInstallHint(false);
+				}}
 			/>
 
 			<main>
@@ -853,6 +894,7 @@ export function App() {
 					activePage={activePage}
 					setActivePage={setActivePage}
 					variant="bottom"
+					hidden={bottomNavHidden}
 				/>
 			)}
 		</div>

src/components/MobileBottomNav.tsx

@@ -7,14 +7,16 @@ export function MobileNav({
 	activePage,
 	setActivePage,
 	variant,
+	hidden = false,
 }: {
 	activePage: PageId;
 	setActivePage: (page: PageId) => void;
 	variant: "bottom" | "top";
+	hidden?: boolean;
 }) {
 	return (
 		<nav
-			className={`mobile-nav mobile-${variant}-nav`}
+			className={`mobile-nav mobile-${variant}-nav ${hidden ? "is-hidden" : ""}`}
 			aria-label="移动端主导航"
 		>
 			{nav

src/config.ts

@@ -41,6 +41,7 @@ export const STORAGE_KEYS = {
 	chromeTheme: "60s-web:chrome-theme",
 	colorTheme: "60s-web:color-theme",
 	mobileNavMode: "60s-web:mobile-nav-mode",
+	iosInstallHintDismissed: "60s-web:ios-install-hint-dismissed",
 	homeCardLayout: "60s-web:home-card-layout",
 	endpointFavorites: "60s-web:endpoint-favorites",
 	quickFavorites: "60s-web:quick-favorites",

src/styles.css

@@ -3473,7 +3473,7 @@ footer strong {
 	}
 
 	.app-shell.mobile-nav-bottom {
-		--mobile-nav-height: 78px;
+		--mobile-nav-height: calc(78px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.topbar {
@@ -3588,17 +3588,29 @@ footer strong {
 		left: 10px;
 		right: 10px;
 		bottom: 8px;
+		bottom: max(8px, env(safe-area-inset-bottom, 0px));
 		z-index: 30;
 		display: grid;
 		grid-template-columns: repeat(5, minmax(0, 1fr));
 		gap: 4px;
-		min-height: calc(58px + env(safe-area-inset-bottom, 0px));
-		padding: 6px 7px calc(6px + env(safe-area-inset-bottom, 0px));
+		min-height: 58px;
+		padding: 6px 7px;
 		border: 1px solid rgba(15, 155, 142, 0.16);
 		border-radius: 18px;
 		background: rgba(255, 255, 255, 0.9);
 		box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
 		backdrop-filter: blur(18px);
+		transform: translateY(0);
+		transition:
+			opacity 0.22s ease,
+			transform 0.22s ease;
+		will-change: transform;
+	}
+
+	.mobile-bottom-nav.is-hidden {
+		opacity: 0;
+		pointer-events: none;
+		transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom, 0px)));
 	}
 
 	.mobile-bottom-nav button {