Refactor usePWAState and useGlobalPWAState composables

Co-authored-by: jxxghp <jxxghp@163.com>
This commit is contained in:
Cursor Agent
2025-07-06 06:50:30 +00:00
co-authored by jxxghp
parent 0e440955c8
commit e1ff50e1e3
+7 -52
View File
@@ -1,15 +1,10 @@
/** import { ref, onMounted, onUnmounted, watch } from 'vue'
* PWA状态管理的Vue组合式API
*/
import type { PWAState } from '@/utils/pwaStateManager' import type { PWAState } from '@/utils/pwaStateManager'
export function usePWAState() { export function usePWAState() {
const isStateRestored = ref(false) const isStateRestored = ref(false)
const stateRestoreCount = ref(0) const stateRestoreCount = ref(0)
const lastRestoredState = ref<PWAState | null>(null) const lastRestoredState = ref<PWAState | null>(null)
// 检查是否在PWA模式下运行
const isPWAMode = ref(false) const isPWAMode = ref(false)
// 检查PWA模式 // 检查PWA模式
@@ -30,18 +25,18 @@ export function usePWAState() {
// 手动触发状态恢复检查 // 手动触发状态恢复检查
const checkStateRestore = async () => { const checkStateRestore = async () => {
if (window.pwaStateController) { if (window.pwaStateController) {
// 这里可以添加手动检查状态恢复的逻辑
console.log('检查状态恢复') console.log('检查状态恢复')
} }
} }
// 监听状态恢复事件 // 监听状态恢复事件
const handleStateRestored = (event: CustomEvent<{ state: PWAState }>) => { const handleStateRestored = (event: Event) => {
const customEvent = event as CustomEvent<{ state: PWAState }>
isStateRestored.value = true isStateRestored.value = true
stateRestoreCount.value++ stateRestoreCount.value++
lastRestoredState.value = event.detail.state lastRestoredState.value = customEvent.detail.state
console.log('Vue组件收到状态恢复通知:', event.detail.state) console.log('Vue组件收到状态恢复通知:', customEvent.detail.state)
} }
// 重置状态恢复标志 // 重置状态恢复标志
@@ -50,11 +45,6 @@ export function usePWAState() {
lastRestoredState.value = null lastRestoredState.value = null
} }
// 获取状态管理器实例
const getStateController = () => {
return window.pwaStateController
}
// 检查状态管理器是否可用 // 检查状态管理器是否可用
const isStateManagerAvailable = () => { const isStateManagerAvailable = () => {
return !!window.pwaStateController return !!window.pwaStateController
@@ -75,7 +65,6 @@ export function usePWAState() {
if (mediaQuery.addEventListener) { if (mediaQuery.addEventListener) {
mediaQuery.addEventListener('change', handleDisplayModeChange) mediaQuery.addEventListener('change', handleDisplayModeChange)
} else { } else {
// 兼容旧版本
mediaQuery.addListener(handleDisplayModeChange) mediaQuery.addListener(handleDisplayModeChange)
} }
@@ -83,7 +72,6 @@ export function usePWAState() {
if (mediaQuery.removeEventListener) { if (mediaQuery.removeEventListener) {
mediaQuery.removeEventListener('change', handleDisplayModeChange) mediaQuery.removeEventListener('change', handleDisplayModeChange)
} else { } else {
// 兼容旧版本
mediaQuery.removeListener(handleDisplayModeChange) mediaQuery.removeListener(handleDisplayModeChange)
} }
}) })
@@ -104,15 +92,12 @@ export function usePWAState() {
saveCurrentState, saveCurrentState,
checkStateRestore, checkStateRestore,
resetStateRestored, resetStateRestored,
getStateController,
isStateManagerAvailable, isStateManagerAvailable,
checkPWAMode checkPWAMode
} }
} }
/** // 全局PWA状态管理器
* 全局PWA状态管理器
*/
export function useGlobalPWAState() { export function useGlobalPWAState() {
// 检查是否在PWA环境中 // 检查是否在PWA环境中
const isPWAEnvironment = () => { const isPWAEnvironment = () => {
@@ -121,35 +106,6 @@ export function useGlobalPWAState() {
document.referrer.includes('android-app://') document.referrer.includes('android-app://')
} }
// 初始化状态管理器(如果尚未初始化)
const initStateManager = async () => {
if (!window.pwaStateController && isPWAEnvironment()) {
const { PWAStateController } = await import('@/utils/pwaStateManager')
window.pwaStateController = new PWAStateController()
console.log('延迟初始化PWA状态管理器')
}
}
// 保存应用状态
const saveAppState = async (customData?: any) => {
await initStateManager()
if (window.pwaStateController) {
// 如果有自定义数据,可以通过这种方式传递
if (customData) {
// 临时存储自定义数据
;(window as any).tempCustomState = customData
}
await window.pwaStateController.saveCurrentState()
// 清除临时数据
if (customData) {
delete (window as any).tempCustomState
}
}
}
// 获取存储的状态 // 获取存储的状态
const getStoredState = () => { const getStoredState = () => {
return localStorage.getItem('mp-pwa-app-state') return localStorage.getItem('mp-pwa-app-state')
@@ -159,12 +115,11 @@ export function useGlobalPWAState() {
const clearStoredState = () => { const clearStoredState = () => {
localStorage.removeItem('mp-pwa-app-state') localStorage.removeItem('mp-pwa-app-state')
sessionStorage.removeItem('mp-pwa-session-state') sessionStorage.removeItem('mp-pwa-session-state')
console.log('已清除PWA存储状态')
} }
return { return {
isPWAEnvironment, isPWAEnvironment,
initStateManager,
saveAppState,
getStoredState, getStoredState,
clearStoredState clearStoredState
} }