Add installable PWA shell with safe updates and offline status

web/src/app/App.vue

@@ -2,6 +2,8 @@
 import { onMounted, ref } from 'vue'
 import { api, setUnauthorizedHandler } from './api'
 import AuthView from './AuthView.vue'
+import AppStatus from './AppStatus.vue'
+import { online, registerPwa } from './pwa'
 import Toasts from './Toasts.vue'
 import Workspace from './Workspace.vue'
 import { stopWorkspace } from './workspace'
@@ -11,6 +13,8 @@ const phase = ref<'loading' | 'setup' | 'login' | 'ready' | 'error'>('loading')
 async function check() {
   try {
     const s = await api.authState()
+    // 请求成功比浏览器的网络状态提示更可靠（局域网和网络切换时可能不同步）。
+    online.value = true
     phase.value = !s.setUp ? 'setup' : s.authenticated ? 'ready' : 'login'
   } catch {
     phase.value = 'error'
@@ -21,15 +25,19 @@ setUnauthorizedHandler(() => {
   stopWorkspace()
   phase.value = 'login'
 })
-onMounted(check)
+onMounted(() => {
+  void check()
+  void registerPwa()
+})
 </script>
 
 <template>
+  <AppStatus />
   <AuthView v-if="phase === 'setup' || phase === 'login'" :mode="phase" @done="phase = 'ready'" />
   <Workspace v-else-if="phase === 'ready'" @logout="phase = 'login'" />
   <div v-else class="rm-splash">
     <template v-if="phase === 'error'">
-      <p>无法连接到服务器</p>
+      <p>{{ online ? '无法连接到服务器' : '离线，无法加载笔记' }}</p>
       <button class="rm-btn" @click="check">重试</button>
     </template>
   </div>

web/src/app/AppStatus.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { installApp, installPrompt, online, waitingWorker } from './pwa'
+import { flushAll, readyToReload, toast } from './workspace'
+
+const busy = ref(false)
+const activated = ref(false)
+
+async function update() {
+  const worker = waitingWorker.value
+  if ((!worker && !activated.value) || busy.value) return
+  busy.value = true
+  try {
+    await flushAll()
+    if (!readyToReload()) {
+      toast('请先完成保存、图片上传或文件操作，再更新应用')
+      return
+    }
+    if (!activated.value && worker) {
+      // 等待新版激活后，仅刷新主动点击更新的页面。
+      await new Promise<void>((resolve, reject) => {
+        const finish = () => {
+          if (worker.state !== 'activated' && worker.state !== 'redundant') return
+          clearTimeout(timer)
+          worker.removeEventListener('statechange', finish)
+          if (worker.state === 'activated') resolve()
+          else reject(new Error('新版本激活失败'))
+        }
+        const timer = setTimeout(() => {
+          worker.removeEventListener('statechange', finish)
+          reject(new Error('等待新版本超时'))
+        }, 15000)
+        worker.addEventListener('statechange', finish)
+        worker.postMessage('ACTIVATE')
+        finish()
+      })
+      activated.value = true
+    }
+    // 激活期间仍可能继续输入，刷新前再次确认；保留按钮供保存后重试。
+    if (readyToReload()) location.reload()
+    else toast('仍有未完成的保存或操作，请完成后再次点击刷新')
+  } catch {
+    toast('暂时无法更新，请稍后重试')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="!online || waitingWorker || activated || installPrompt" class="rm-app-status" role="status">
+    <span v-if="!online">离线，无法加载或保存笔记</span>
+    <template v-else-if="waitingWorker || activated">
+      <span>有新版本</span>
+      <button class="rm-btn" :disabled="busy" @click="update">{{ busy ? '正在保存…' : '保存并刷新' }}</button>
+    </template>
+    <template v-else-if="installPrompt">
+      <span>将 RawMark 添加到主屏幕</span>
+      <button class="rm-btn" @click="installApp">安装</button>
+    </template>
+  </div>
+</template>

web/src/app/api.ts

@@ -72,7 +72,7 @@ async function request(
     headers['Content-Type'] = 'application/json'
     body = JSON.stringify(init.json)
   }
-  const res = await fetch(url, { method, headers, body, credentials: 'same-origin', keepalive: init.keepalive })
+  const res = await fetch(url, { method, headers, body, credentials: 'same-origin', cache: 'no-store', keepalive: init.keepalive })
   if (!res.ok) {
     let data: Record<string, unknown> = {}
     try {

web/src/app/app.css

@@ -27,7 +27,12 @@ body {
 /* 软键盘弹出时为可视区域高度，见 viewport.ts */
 #app {
   height: var(--rm-app-height, 100%);
+  display: flex;
+  flex-direction: column;
 }
+.rm-app-status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--rm-warn-bg); color: var(--rm-warn-text); font-size: 13px; flex: none; }
+#app > .rm-shell, #app > .rm-splash, #app > .rm-auth { flex: 1; min-height: 0; height: auto; }
+@media (pointer: coarse) { .rm-app-status .rm-btn { min-height: 44px; } }
 body {
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;

web/src/app/pwa.ts

@@ -0,0 +1,65 @@
+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)
+  }
+}

web/src/app/workspace.ts

@@ -296,6 +296,12 @@ export async function flushAll(keepalive = false) {
   await Promise.all([...slots.keys()].map((p) => flush(p, keepalive)))
 }
 
+// 保存失败会留在标签页状态中，flushAll 完成并不意味着可以安全刷新。
+export function readyToReload(): boolean {
+  return opsInFlight === 0 && !ws.tabs.some((t) => t.dirty || t.status === 'loading') &&
+    [...slots.values()].every((s) => !s.uploads && !s.paused && !s.inflight)
+}
+
 // ---- 冲突处理 ----
 
 // 放弃本地修改，载入服务器版本