66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { ref, shallowRef } from 'vue'
|
|
|
|
interface InstallPrompt extends Event {
|
|
prompt(): Promise<{ outcome: 'accepted' | 'dismissed' }>
|
|
}
|
|
|
|
export const online = ref(navigator.onLine)
|
|
export const waitingWorker = shallowRef<ServiceWorker | null>(null)
|
|
export const installPrompt = shallowRef<InstallPrompt | null>(null)
|
|
|
|
window.addEventListener('online', () => (online.value = true))
|
|
window.addEventListener('offline', () => (online.value = false))
|
|
|
|
window.addEventListener('beforeinstallprompt', (event) => {
|
|
event.preventDefault()
|
|
installPrompt.value = event as InstallPrompt
|
|
})
|
|
window.addEventListener('appinstalled', () => (installPrompt.value = null))
|
|
|
|
export async function installApp() {
|
|
const prompt = installPrompt.value
|
|
if (!prompt) return
|
|
await prompt.prompt()
|
|
installPrompt.value = null
|
|
}
|
|
|
|
export async function registerPwa() {
|
|
// 开发服务器不注册，避免外壳缓存干扰热更新。
|
|
if (!import.meta.env.PROD || !('serviceWorker' in navigator) || !window.isSecureContext) return
|
|
try {
|
|
const registration = await navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' })
|
|
const checkWaiting = () => {
|
|
if (registration.waiting) waitingWorker.value = registration.waiting
|
|
else if (waitingWorker.value?.state === 'redundant') waitingWorker.value = null
|
|
}
|
|
const trackInstalling = () => {
|
|
registration.installing?.addEventListener('statechange', checkWaiting)
|
|
checkWaiting()
|
|
}
|
|
trackInstalling()
|
|
registration.addEventListener('updatefound', trackInstalling)
|
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
// 其他标签页激活新版时，本页也保留手动更新入口。
|
|
waitingWorker.value = navigator.serviceWorker.controller
|
|
})
|
|
const checkUpdate = () => {
|
|
if (document.visibilityState === 'visible' && navigator.onLine) {
|
|
void registration.update().catch((err) => console.warn('检查应用更新失败', err))
|
|
}
|
|
}
|
|
document.addEventListener('visibilitychange', checkUpdate)
|
|
window.addEventListener('online', checkUpdate)
|
|
// 新旧页面报告入口哈希，确认所有页面均已更新后才回收旧资源。
|
|
navigator.serviceWorker.addEventListener('message', (event) => {
|
|
if (event.data === 'SHELL_ENTRY') {
|
|
const script = document.querySelector<HTMLScriptElement>('script[type="module"][src]')!
|
|
event.ports[0]!.postMessage(new URL(script.src).pathname)
|
|
}
|
|
})
|
|
const ready = await navigator.serviceWorker.ready
|
|
ready.active?.postMessage('CLEANUP')
|
|
} catch (err) {
|
|
console.warn('注册离线外壳失败', err)
|
|
}
|
|
}
|