web：PWA 安装支持（manifest + iOS meta + service worker）+ PKCE 改 localStorage

让 web 前端可「添加到主屏幕」以独立窗口启动——iOS 上免证书的类原生体验（也使 Android/桌面出现安装提示）。 - site.webmanifest 补全可安装字段：id / start_url / scope / description / orientation；icons 拆出独立 any 与 maskable 条目。 - index.html 加 iOS 独立窗口 meta：apple-mobile-web-app-capable / status-bar-style / title + application-name（旧版 iOS 仍读这些才无 Safari chrome 启动）。 - public/sw.js（新）：仅缓存同源静态壳，**绝不拦截 /api/***（SSE /api/hub/events、剪贴板、信令、中继需要实时不缓冲的网络连接，直接放行）；跨源（字体/CDN）也放行。导航走 network-first（新部署即取新 HTML），静态资源 stale-while-revalidate。cdrop 离线无意义，故此 SW 只为可安装 + 秒开壳。 - main.tsx：SW 注册仅在浏览器 + prod；dev 下干扰 Vite HMR、桌面壳（Wails WebView，wails:// / loopback origin）SW 行为不可靠，故 isDesktop() 跳过。 - auth.ts：PKCE verifier / state 从 sessionStorage 改 localStorage。iOS 独立 PWA 可能在独立上下文跑完 OIDC 往返、回跳时重启 PWA 而清空 sessionStorage，导致 verifier 丢失登录失败；localStorage 跨上下文存活。verifier 在 callback 即消费并删除、且无配对 code 无用，落盘窗口的安全代价可忽略。
2026-06-15 22:14:18 +08:00
parent f21fa5b5e8
commit 5c28ddf9b8
6 changed files with 135 additions and 17 deletions
@@ -1,11 +1,19 @@
 {
+    "id": "/",
    "name": "Commilitia Drop",
    "short_name": "CDrop",
-    "icons": [
-        { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
-        { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
-    ],
+    "description": "跨设备剪贴板同步与点对点文件传输",
+    "lang": "zh-CN",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "orientation": "any",
    "theme_color": "#E8B923",
    "background_color": "#E8B923",
-    "display": "standalone"
+    "icons": [
+        { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+        { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+        { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+        { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+    ]
 }
@@ -0,0 +1,85 @@
+// cdrop service worker — makes the web app installable and caches the static
+// shell for instant launch.
+//
+// HARD RULE: it MUST NOT intercept /api/* . The SSE stream (/api/hub/events),
+// clipboard, WebRTC signaling and relay all need a live, unbuffered network
+// connection — those requests are passed straight through to the network. Same
+// goes for cross-origin requests (fonts / CDN): the browser handles them.
+//
+// cdrop is useless offline (everything needs the backend), so this is a shell
+// cache for fast loads + installability, not a real offline app.
+
+const CACHE = "cdrop-shell-v1";
+const SHELL = [
+    "/",
+    "/site.webmanifest",
+    "/favicon-96.png",
+    "/icon-192.png",
+    "/apple-touch-icon-180.png",
+    "/logo-mark.png",
+];
+
+self.addEventListener("install", (event) =>
+{
+    event.waitUntil(
+        caches.open(CACHE)
+            .then((cache) => cache.addAll(SHELL))
+            .then(() => self.skipWaiting())
+            .catch(() => self.skipWaiting()),
+    );
+});
+
+self.addEventListener("activate", (event) =>
+{
+    event.waitUntil(
+        caches.keys()
+            .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))
+            .then(() => self.clients.claim()),
+    );
+});
+
+self.addEventListener("fetch", (event) =>
+{
+    const req = event.request;
+    if (req.method !== "GET") { return; }
+
+    const url = new URL(req.url);
+    if (url.origin !== self.location.origin) { return; }   // cross-origin (fonts/CDN) → browser default
+    if (url.pathname.startsWith("/api/")) { return; }       // live backend → never intercept
+
+    // SPA navigations: network-first so a new deploy serves fresh HTML (which
+    // points at the new hashed assets); fall back to the cached shell offline.
+    if (req.mode === "navigate")
+    {
+        event.respondWith(
+            fetch(req)
+                .then((resp) =>
+                {
+                    const copy = resp.clone();
+                    caches.open(CACHE).then((c) => c.put("/", copy)).catch(() => {});
+                    return resp;
+                })
+                .catch(() => caches.match("/").then((r) => r || Response.error())),
+        );
+        return;
+    }
+
+    // Static assets (hashed JS/CSS/images are immutable): stale-while-revalidate.
+    event.respondWith(
+        caches.match(req).then((cached) =>
+        {
+            const network = fetch(req)
+                .then((resp) =>
+                {
+                    if (resp && resp.status === 200 && resp.type === "basic")
+                    {
+                        const copy = resp.clone();
+                        caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => {});
+                    }
+                    return resp;
+                })
+                .catch(() => cached);
+            return cached || network;
+        }),
+    );
+});