diff --git a/index.html b/index.html index f5ed6931..f2c1ec2a 100644 --- a/index.html +++ b/index.html @@ -81,15 +81,118 @@ - + - + + + + - + + + + + + + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 5f75c71d..983347c0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,6 +10,7 @@ import { checkAndEmitUnreadMessages } from '@/utils/badge' import { preloadImage } from './@core/utils/image' import { globalLoadingStateManager } from '@/utils/loadingStateManager' import { addBackgroundTimer, removeBackgroundTimer } from '@/utils/backgroundManager' +import PWAInstallPrompt from '@/components/PWAInstallPrompt.vue' // 生效主题 const { global: globalTheme } = useTheme() @@ -254,6 +255,8 @@ onUnmounted(() => { + + diff --git a/src/components/PWAInstallPrompt.vue b/src/components/PWAInstallPrompt.vue new file mode 100644 index 00000000..a14a94c2 --- /dev/null +++ b/src/components/PWAInstallPrompt.vue @@ -0,0 +1,185 @@ + + + + + \ No newline at end of file diff --git a/src/composables/useCacheManager.ts b/src/composables/useCacheManager.ts new file mode 100644 index 00000000..8254d4eb --- /dev/null +++ b/src/composables/useCacheManager.ts @@ -0,0 +1,118 @@ +interface CacheInfo { + cacheSizes: Record + totalSize: number + totalSizeMB: string +} + +export function useCacheManager() { + const cacheInfo = ref(null) + const isLoading = ref(false) + const error = ref(null) + + // 发送消息到Service Worker + async function sendMessageToSW(message: any): Promise { + if (!('serviceWorker' in navigator)) { + throw new Error('Service Worker not supported') + } + + const registration = await navigator.serviceWorker.ready + const messageChannel = new MessageChannel() + + return new Promise((resolve, reject) => { + messageChannel.port1.onmessage = (event) => { + if (event.data.success) { + resolve(event.data) + } else { + reject(new Error(event.data.error || 'Unknown error')) + } + } + + registration.active?.postMessage(message, [messageChannel.port2]) + }) + } + + // 获取缓存信息 + async function getCacheInfo() { + isLoading.value = true + error.value = null + + try { + const response = await sendMessageToSW({ type: 'GET_CACHE_INFO' }) + cacheInfo.value = response.cacheInfo + } catch (err) { + error.value = err instanceof Error ? err.message : 'Failed to get cache info' + console.error('Failed to get cache info:', err) + } finally { + isLoading.value = false + } + } + + // 清理缓存 + async function cleanupCaches() { + isLoading.value = true + error.value = null + + try { + const response = await sendMessageToSW({ type: 'CLEANUP_CACHES' }) + cacheInfo.value = response.cacheInfo + return true + } catch (err) { + error.value = err instanceof Error ? err.message : 'Failed to cleanup caches' + console.error('Failed to cleanup caches:', err) + return false + } finally { + isLoading.value = false + } + } + + // 格式化缓存大小 + function formatSize(bytes: number): string { + if (bytes === 0) return '0 B' + + const k = 1024 + const sizes = ['B', 'KB', 'MB', 'GB'] + const i = Math.floor(Math.log(bytes) / Math.log(k)) + + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] + } + + // 获取缓存使用百分比（假设最大100MB） + function getCacheUsagePercentage(totalSize: number): number { + const maxSize = 100 * 1024 * 1024 // 100MB + return Math.min((totalSize / maxSize) * 100, 100) + } + + // 监听Service Worker消息 + function handleSWMessage(event: MessageEvent) { + if (event.data && event.data.type === 'CACHE_SIZE_UPDATE') { + cacheInfo.value = event.data.data + } + } + + onMounted(() => { + // 获取初始缓存信息 + getCacheInfo() + + // 监听Service Worker消息 + if ('serviceWorker' in navigator) { + navigator.serviceWorker.addEventListener('message', handleSWMessage) + } + }) + + onUnmounted(() => { + // 移除事件监听 + if ('serviceWorker' in navigator) { + navigator.serviceWorker.removeEventListener('message', handleSWMessage) + } + }) + + return { + cacheInfo, + isLoading, + error, + getCacheInfo, + cleanupCaches, + formatSize, + getCacheUsagePercentage, + } +} \ No newline at end of file diff --git a/src/composables/usePWAInstall.ts b/src/composables/usePWAInstall.ts new file mode 100644 index 00000000..070d881f --- /dev/null +++ b/src/composables/usePWAInstall.ts @@ -0,0 +1,174 @@ +interface BeforeInstallPromptEvent extends Event { + readonly platforms: string[] + readonly userChoice: Promise<{ + outcome: 'accepted' | 'dismissed' + platform: string + }> + prompt(): Promise +} + +declare global { + interface WindowEventMap { + beforeinstallprompt: BeforeInstallPromptEvent + } +} + +export function usePWAInstall() { + const isInstallable = ref(false) + const isInstalled = ref(false) + const installPrompt = ref(null) + const installOutcome = ref<'accepted' | 'dismissed' | null>(null) + + // 检查是否已安装（通过检查display-mode） + const checkIfInstalled = () => { + const isStandalone = window.matchMedia('(display-mode: standalone)').matches + const isFullscreen = window.matchMedia('(display-mode: fullscreen)').matches + const isMinimalUI = window.matchMedia('(display-mode: minimal-ui)').matches + const isWindowControlsOverlay = window.matchMedia('(display-mode: window-controls-overlay)').matches + + // iOS Safari特殊检查 + const isIOSStandalone = (window.navigator as any).standalone === true + + return isStandalone || isFullscreen || isMinimalUI || isWindowControlsOverlay || isIOSStandalone + } + + // 显示安装提示 + const showInstallPrompt = async () => { + if (!installPrompt.value) { + console.warn('No install prompt available') + return false + } + + try { + // 显示浏览器的安装提示 + await installPrompt.value.prompt() + + // 等待用户响应 + const { outcome } = await installPrompt.value.userChoice + installOutcome.value = outcome + + // 如果用户接受安装，清除安装提示 + if (outcome === 'accepted') { + isInstallable.value = false + installPrompt.value = null + isInstalled.value = true + } + + return outcome === 'accepted' + } catch (error) { + console.error('Failed to show install prompt:', error) + return false + } + } + + // 处理安装事件 + const handleBeforeInstallPrompt = (e: BeforeInstallPromptEvent) => { + // 阻止默认行为 + e.preventDefault() + + // 保存安装提示 + installPrompt.value = e + isInstallable.value = true + } + + // 处理应用安装成功事件 + const handleAppInstalled = () => { + isInstalled.value = true + isInstallable.value = false + installPrompt.value = null + } + + // 检查是否支持PWA安装 + const isPWASupported = computed(() => { + return 'serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window + }) + + // 获取安装指南（针对不同平台） + const getInstallInstructions = () => { + const ua = navigator.userAgent + const isIOS = /iPad|iPhone|iPod/.test(ua) && !(window as any).MSStream + const isAndroid = /Android/.test(ua) + const isSafari = /Safari/.test(ua) && !/Chrome/.test(ua) + const isChrome = /Chrome/.test(ua) && !/Edg/.test(ua) + const isEdge = /Edg/.test(ua) + const isFirefox = /Firefox/.test(ua) + + if (isIOS && isSafari) { + return { + platform: 'iOS Safari', + steps: [ + '点击浏览器底部的分享按钮', + '向下滑动并点击"添加到主屏幕"', + '点击右上角的"添加"', + ], + } + } else if (isAndroid && isChrome) { + return { + platform: 'Android Chrome', + steps: [ + '点击浏览器右上角的菜单按钮（三个点）', + '选择"添加到主屏幕"', + '点击"添加"确认', + ], + } + } else if (isEdge) { + return { + platform: 'Microsoft Edge', + steps: [ + '点击地址栏右侧的安装按钮', + '或点击菜单中的"应用" > "安装此站点"', + '点击"安装"确认', + ], + } + } else if (isFirefox && isAndroid) { + return { + platform: 'Firefox Android', + steps: [ + '点击浏览器右上角的菜单按钮', + '选择"安装"', + '点击"添加到主屏幕"', + ], + } + } else { + return { + platform: '您的浏览器', + steps: [ + '查看浏览器的菜单或设置', + '寻找"安装应用"或"添加到主屏幕"选项', + '按照提示完成安装', + ], + } + } + } + + onMounted(() => { + // 检查是否已安装 + isInstalled.value = checkIfInstalled() + + // 监听安装提示事件 + window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt) + + // 监听安装成功事件 + window.addEventListener('appinstalled', handleAppInstalled) + + // 监听display-mode变化 + const mediaQuery = window.matchMedia('(display-mode: standalone)') + mediaQuery.addEventListener('change', (e) => { + isInstalled.value = e.matches + }) + }) + + onUnmounted(() => { + window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt) + window.removeEventListener('appinstalled', handleAppInstalled) + }) + + return { + isInstallable, + isInstalled, + isPWASupported, + installOutcome, + showInstallPrompt, + getInstallInstructions, + } +} \ No newline at end of file diff --git a/src/layouts/components/OfflinePage.vue b/src/layouts/components/OfflinePage.vue index 365d368d..1cc60469 100644 --- a/src/layouts/components/OfflinePage.vue +++ b/src/layouts/components/OfflinePage.vue @@ -57,19 +57,61 @@ const statusIcon = computed(() => { const colorTheme = computed(() => { return props.type === 'online' ? 'success' : 'error' }) + +// 动画时长 +const ENTER_DURATION = 600 +const LEAVE_DURATION = 400 + +// 进入动画 +function onEnter(el: HTMLElement, done: () => void) { + // 初始状态 + el.style.opacity = '0' + el.style.transform = 'scale(0.9)' + el.style.filter = 'blur(10px)' + + // 强制重绘 + el.offsetHeight + + // 应用过渡 + el.style.transition = `all ${ENTER_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1)` + + // 目标状态 + requestAnimationFrame(() => { + el.style.opacity = '1' + el.style.transform = 'scale(1)' + el.style.filter = 'blur(0)' + }) + + // 动画完成 + setTimeout(done, ENTER_DURATION) +} + +// 离开动画 +function onLeave(el: HTMLElement, done: () => void) { + // 应用过渡 + el.style.transition = `all ${LEAVE_DURATION}ms cubic-bezier(0.4, 0, 1, 1)` + + // 目标状态 + requestAnimationFrame(() => { + el.style.opacity = '0' + el.style.transform = 'scale(1.1)' + el.style.filter = 'blur(20px)' + }) + + // 动画完成 + setTimeout(done, LEAVE_DURATION) +}