> \u7248\u672c：v1.0 ｜ \u9002\u7528\u8303\u56f4：PWA \/ SPA \/ \u684c\u9762\u7aef（Electron\u3001Tauri \u7b49）\u53ca\u79fb\u52a8\u7aef Hybrid \u524d\u7aef\u5e94\u7528 > \u5173\u952e\u8bcd：\u79bb\u7ebf\u4f18\u5148（Offline-First）\u3001\u66f4\u65b0\u6682\u505c\u3001\u65ad\u70b9\u7eed\u4f20\u3001\u51b2\u7a81\u89e3\u51b3\u3001Service Worker\u3001\u672c\u5730\u961f\u5217<\/p>\n
—<\/p>\n
## 1. \u80cc\u666f\u4e0e\u95ee\u9898\u5b9a\u4e49<\/p>\n
\u73b0\u4ee3\u524d\u7aef\u5e94\u7528\u8d8a\u6765\u8d8a\u591a\u5730\u8fd0\u884c\u5728\u5f31\u7f51\u6216\u65ad\u7f51\u73af\u5883（\u5730\u94c1\u3001\u7535\u68af\u3001\u8de8\u56fd\u5dee\u65c5\u3001\u5de5\u4e1a\u73b0\u573a\u7b49）\u3002\u5728\u8fd9\u4e9b\u573a\u666f\u4e0b，\u7528\u6237\u5bf9"\u5e94\u7528\u80fd\u7528"\u7684\u9884\u671f\u9ad8\u4e8e"\u6570\u636e\u548c\u4e91\u7aef\u5b9e\u65f6\u540c\u6b65"\u3002\u5982\u679c\u66f4\u65b0\u903b\u8f91\u4e0d\u505a\u7279\u6b8a\u5904\u7406，\u4f1a\u66b4\u9732\u51fa\u4e09\u7c7b\u5178\u578b\u95ee\u9898：<\/p>\n
1. **\u5199\u64cd\u4f5c\u4e22\u5931**：\u7528\u6237\u79bb\u7ebf\u65f6\u63d0\u4ea4\u7684\u8868\u5355\u3001\u8349\u7a3f\u3001\u72b6\u6001\u53d8\u66f4，\u56e0\u8bf7\u6c42\u5931\u8d25\u800c\u88ab\u76f4\u63a5\u4e22\u5f03\u6216\u629b\u51fa\u9519\u8bef，\u9020\u6210\u6570\u636e\u4e22\u5931\u4e0e\u4f53\u9a8c\u65ad\u88c2\u3002 2. **\u66f4\u65b0\u98ce\u66b4**：\u5e94\u7528\u91cd\u8fde\u540e，\u5806\u79ef\u7684\u66f4\u65b0\u8bf7\u6c42\u672a\u7ecf\u7f16\u6392\u5730\u5e76\u53d1\u53d1\u51fa，\u77ac\u95f4\u6253\u7206\u540e\u7aef，\u5f15\u53d1\u9650\u6d41\u3001\u96ea\u5d29\u6216\u91cd\u590d\u5199\u5165\u3002 3. **\u7248\u672c\u9519\u4e71**：PWA \u7684 Service Worker \u5728\u79bb\u7ebf\u65f6\u5c1d\u8bd5\u6fc0\u6d3b\u65b0\u7248\u672c，\u53ef\u80fd\u5bfc\u81f4\u8d44\u6e90\u52a0\u8f7d\u4e0d\u5168\u3001\u767d\u5c4f\u6216\u8fd0\u884c\u6001\u4e0d\u4e00\u81f4\u3002<\/p>\n
**\u79bb\u7ebf\u6682\u505c\u66f4\u65b0\u7b56\u7565（Offline Pause-and-Resume Update Strategy）** \u7684\u6838\u5fc3\u76ee\u6807：\u5728\u7f51\u7edc\u4e0d\u53ef\u7528\u65f6，**\u5b89\u5168\u3001\u6709\u5e8f\u5730\u6682\u505c\u6240\u6709"\u9700\u8981\u4e0a\u4e91"\u7684\u66f4\u65b0**，\u5c06\u5176\u6301\u4e45\u5316\u5230\u672c\u5730；\u5728\u7f51\u7edc\u6062\u590d\u540e，**\u6309\u53ef\u63a7\u8282\u594f\u7eed\u4f20**\u8fd9\u4e9b\u66f4\u65b0，\u5e76\u5bf9\u53ef\u80fd\u51fa\u73b0\u7684\u51b2\u7a81\u505a\u53ef\u9884\u6d4b\u7684\u5904\u7406\u3002<\/p>\n
—<\/p>\n
## 2. \u66f4\u65b0\u7c7b\u578b\u7684\u5206\u5c42<\/p>\n
\u5e76\u975e\u6240\u6709"\u66f4\u65b0"\u90fd\u5e94\u4ee5\u540c\u4e00\u79cd\u65b9\u5f0f\u5904\u7406\u3002\u5efa\u8bae\u6309\u4ee5\u4e0b\u4e09\u5c42\u5206\u7c7b，\u5206\u522b\u5236\u5b9a\u6682\u505c\/\u6062\u590d\u7b56\u7565：<\/p>\n
| \u5c42\u7ea7 | \u66f4\u65b0\u7c7b\u578b | \u65b9\u5411 | \u79bb\u7ebf\u5904\u7406 | \u5178\u578b\u624b\u6bb5 | |——|———-|——|———-|———-| | L1 | \u5e94\u7528\u672c\u4f53\u7248\u672c\u66f4\u65b0（SW \/ \u8d44\u6e90\u5305） | \u4e91\u7aef \u2192 \u5ba2\u6237\u7aef | \u6682\u505c\u6fc0\u6d3b，\u63d0\u793a\u7528\u6237 | Service Worker \u751f\u547d\u5468\u671f\u7ba1\u7406 | | L2 | \u7528\u6237\u5199\u64cd\u4f5c（\u4e1a\u52a1\u6570\u636e\u53d8\u66f4） | \u5ba2\u6237\u7aef \u2192 \u4e91\u7aef | \u5165\u961f\u6301\u4e45\u5316，\u6682\u505c\u63d0\u4ea4 | \u672c\u5730\u4efb\u52a1\u961f\u5217 + IndexedDB | | L3 | \u589e\u91cf\u6570\u636e\u62c9\u53d6（\u914d\u7f6e\u3001\u6d88\u606f\u3001\u5217\u8868） | \u4e91\u7aef \u2192 \u5ba2\u6237\u7aef | \u6682\u505c\u62c9\u53d6，\u6807\u8bb0\u810f | \u589e\u91cf\u6e38\u6807 + \u91cd\u8fde\u56de\u6e90 |<\/p>\n
> \u672c\u6587\u91cd\u70b9\u8986\u76d6 **L1（\u7248\u672c\u6682\u505c）** \u4e0e **L2（\u5199\u64cd\u4f5c\u961f\u5217\u5316）**，\u8fd9\u662f\u79bb\u7ebf\u7b56\u7565\u4e2d\u6700\u5173\u952e\u3001\u6700\u6613\u51fa\u9519\u7684\u4e24\u5c42\u3002<\/p>\n
—<\/p>\n
## 3. \u6574\u4f53\u67b6\u6784<\/p>\n
``` \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u5e94\u7528 UI \u5c42 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u2502 \u00a0 \u7528\u6237\u64cd\u4f5c \u2192 \u4ea7\u751f Update \u4e8b\u4ef6 \u2192 \u8c03\u7528 UpdateScheduler \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u25bc \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u7f51\u7edc\u72b6\u6001\u611f\u77e5 (NetworkMonitor) \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u2502 \u00a0 online \/ offline \u4e8b\u4ef6 + \u5fc3\u8df3\u63a2\u6d4b(HTTP Ping \/ WebSocket) \u00a0 \u00a0 \u00a0\u2502 \u2502 \u00a0 \u5bf9\u5916\u66b4\u9732：isOnline\u3001onChange\u3001quality(\u5f31\u7f51\/\u6b63\u5e38) \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u5728\u7ebf \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u79bb\u7ebf \u00a0 \u00a0 \u00a0 \u00a0 \u25bc \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u25bc \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u76f4\u63a5\u63d0\u4ea4\u8fdc\u7aef \u00a0\u2502 \u00a0\u2502 \u00a0 \u00a0 \u00a0 UpdateQueue（\u6301\u4e45\u5316\u4efb\u52a1\u961f\u5217） \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u2502 (HTTP\/Push) \u00a0\u2502 \u00a0\u2502 \u00a0IndexedDB: {id, payload, meta, status} \u00a0 \u00a0 \u00a0\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0\u2502 \u00a0– enqueue: \u5199\u5165 pending \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0– pause: \u72b6\u6001\u673a\u6302\u8d77 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0– resume: \u6309\u5e8f flush \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u7f51\u7edc\u6062\u590d\u65f6\u89e6\u53d1 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u25bc \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 Flush Controller（\u7eed\u4f20\u7f16\u6392\u5668） \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 – \u5e76\u53d1\u5ea6\u63a7\u5236 \/ \u9650\u901f \/ \u9000\u907f\u91cd\u8bd5 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 – \u51b2\u7a81\u68c0\u6d4b（\u7248\u672c\u53f7 \/ \u65f6\u95f4\u6233 \/ CRDT） \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 – \u5931\u8d25\u56de\u6eda\u4e0e\u6b7b\u4fe1\u961f\u5217（DLQ） \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 ```<\/p>\n
—<\/p>\n
## 4. \u5173\u952e\u7b56\u7565\u8be6\u89e3<\/p>\n
### 4.1 \u7f51\u7edc\u72b6\u6001\u611f\u77e5（\u4e0d\u8981\u53ea\u4fe1 `navigator.onLine`）<\/p>\n
`navigator.onLine` \u4e0e `online\/offline` \u4e8b\u4ef6**\u4e0d\u53ef\u9760**：\u5b83\u53ea\u53cd\u6620"\u662f\u5426\u6709\u7f51\u7edc\u63a5\u53e3"，\u4e0d\u53cd\u6620"\u662f\u5426\u80fd\u771f\u6b63\u8bbf\u95ee\u4e1a\u52a1\u540e\u7aef"\u3002\u5fc5\u987b\u53e0\u52a0\u4e3b\u52a8\u63a2\u6d4b\u3002<\/p>\n
```ts class NetworkMonitor { \u00a0 private online = navigator.onLine; \u00a0 private listeners = new Set<(online: boolean) => void>(); \u00a0 private timer?: number;<\/p>\n
\u00a0 constructor(private pingUrl = '\/api\/__health') { \u00a0 \u00a0 window.addEventListener('online', () => this.probe()); \u00a0 \u00a0 window.addEventListener('offline', () => this.set(false)); \u00a0 \u00a0 this.probe(); \u00a0 \u00a0 this.timer = window.setInterval(() => this.probe(), 15_000); \u00a0 }<\/p>\n
\u00a0 get isOnline() { return this.online; }<\/p>\n
\u00a0 onChange(fn: (online: boolean) => void) { \u00a0 \u00a0 this.listeners.add(fn); \u00a0 \u00a0 return () => this.listeners.delete(fn); \u00a0 }<\/p>\n
\u00a0 \/** \u7528\u5e26\u8d85\u65f6\u7684\u8bf7\u6c42\u786e\u8ba4"\u771f\u53ef\u8fbe"，\u800c\u975e\u4ec5\u770b\u7f51\u5361 *\/ \u00a0 private async probe() { \u00a0 \u00a0 if (!navigator.onLine) return this.set(false); \u00a0 \u00a0 try { \u00a0 \u00a0 \u00a0 const ctrl = new AbortController(); \u00a0 \u00a0 \u00a0 const t = setTimeout(() => ctrl.abort(), 3000); \u00a0 \u00a0 \u00a0 await fetch(this.pingUrl, { method: 'HEAD', cache: 'no-store', signal: ctrl.signal }); \u00a0 \u00a0 \u00a0 clearTimeout(t); \u00a0 \u00a0 \u00a0 this.set(true); \u00a0 \u00a0 } catch { \u00a0 \u00a0 \u00a0 this.set(false); \u00a0 \u00a0 } \u00a0 }<\/p>\n
\u00a0 private set(v: boolean) { \u00a0 \u00a0 if (this.online === v) return; \u00a0 \u00a0 this.online = v; \u00a0 \u00a0 this.listeners.forEach(fn => fn(v)); \u00a0 } } ```<\/p>\n
> \u8fdb\u9636：\u53ef\u7528\u6027 `Network Information API`（`navigator.connection.effectiveType`）\u8bc6\u522b\u5f31\u7f51（2g\/slow-2g），\u5728\u5f31\u7f51\u4e0b\u540c\u6837\u8fdb\u5165"\u51c6\u79bb\u7ebf"\u8282\u6d41\u6a21\u5f0f\u3002<\/p>\n
### 4.2 L1：\u5e94\u7528\u7248\u672c\u66f4\u65b0\u7684\u79bb\u7ebf\u6682\u505c<\/p>\n
PWA \u4e2d Service Worker \u6ce8\u518c\u65b0\u7248\u672c\u65f6，\u9ed8\u8ba4\u4f1a\u5728\u9875\u9762\u4e0b\u6b21\u52a0\u8f7d\u65f6\u6fc0\u6d3b\u3002\u82e5\u7528\u6237**\u79bb\u7ebf\u65f6**SW \u5df2\u7ecf\u5728\u540e\u53f0\u5b89\u88c5\u5b8c\u65b0\u7248\u672c，\u76f4\u63a5 `skipWaiting()` + `clients.claim()` \u53ef\u80fd\u8ba9\u9875\u9762\u5728\u62ff\u4e0d\u5230\u65b0\u8d44\u6e90\u7684\u60c5\u51b5\u4e0b\u8fd0\u884c，\u5bfc\u81f4\u767d\u5c4f\u3002<\/p>\n
**\u63a8\u8350\u7b56\u7565：\u79bb\u7ebf\u65f6\u6682\u505c\u6fc0\u6d3b，\u8054\u7f51\u540e\u518d\u63d0\u793a\u5237\u65b0\u3002**<\/p>\n
```ts \/\/ sw.js let pendingActivation = false; self.addEventListener('install', (e) => { \u00a0 \/\/ \u4e0d\u7acb\u5373 skipWaiting，\u7b49\u5f85\u63a7\u5236\u5668\u547d\u4ee4 \u00a0 self.skipWaiting(); \/\/ \u4ec5\u5f53\u5728\u7ebf\u4e14\u7528\u6237\u786e\u8ba4\u65f6 }); self.addEventListener('message', (e) => { \u00a0 if (e.data === 'SKIP_WAITING') self.skipWaiting(); }); ```<\/p>\n
```ts \/\/ \u4e3b\u7ebf\u7a0b：\u914d\u5408\u7f51\u7edc\u72b6\u6001\u51b3\u5b9a\u662f\u5426\u5141\u8bb8\u6fc0\u6d3b const reg = await navigator.serviceWorker.ready; reg.addEventListener('updatefound', () => { \u00a0 const newWorker = reg.installing!; \u00a0 newWorker.addEventListener('statechange', () => { \u00a0 \u00a0 if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { \u00a0 \u00a0 \u00a0 const hasUpdate = true; \u00a0 \u00a0 \u00a0 if (networkMonitor.isOnline) { \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u5728\u7ebf：\u63d0\u793a\u7528\u6237\u5237\u65b0\u4ee5\u5e94\u7528\u66f4\u65b0 \u00a0 \u00a0 \u00a0 \u00a0 showUpdateToast(() => newWorker.postMessage('SKIP_WAITING')); \u00a0 \u00a0 \u00a0 } else { \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u79bb\u7ebf：\u6682\u505c\u66f4\u65b0，\u8054\u7f51\u540e\u518d\u5524\u9192 \u00a0 \u00a0 \u00a0 \u00a0 networkMonitor.onChange((online) => { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (online) showUpdateToast(() => newWorker.postMessage('SKIP_WAITING')); \u00a0 \u00a0 \u00a0 \u00a0 }); \u00a0 \u00a0 \u00a0 } \u00a0 \u00a0 } \u00a0 }); }); ```<\/p>\n
**\u8981\u70b9**： – \u79bb\u7ebf\u65f6**\u4e0d\u8981**\u81ea\u52a8 `skipWaiting()`，\u907f\u514d\u8fd0\u884c\u6001\u4e0e\u8d44\u6e90\u7248\u672c\u4e0d\u5339\u914d\u3002 – \u8054\u7f51\u540e\u7528 Toast\/\u5f39\u7a97\u8ba9\u7528\u6237\u4e3b\u52a8\u89e6\u53d1\u5237\u65b0，\u4fdd\u8bc1\u66f4\u65b0\u53d1\u751f\u5728\u53ef\u9884\u671f\u65f6\u523b\u3002<\/p>\n
### 4.3 L2：\u5199\u64cd\u4f5c\u961f\u5217\u5316（\u6838\u5fc3）<\/p>\n
\u6240\u6709"\u9700\u8981\u4e0a\u4e91"\u7684\u7528\u6237\u66f4\u65b0，\u79bb\u7ebf\u65f6\u4e0d\u5e94\u76f4\u63a5 `fetch`\u3002\u7edf\u4e00\u8d70 `UpdateScheduler`：<\/p>\n
– \u5728\u7ebf \u2192 \u76f4\u63a5\u63d0\u4ea4； – \u79bb\u7ebf \u2192 \u5199\u5165 IndexedDB \u961f\u5217，\u72b6\u6001\u7f6e `pending`，UI \u7acb\u5373\u53cd\u9988"\u5df2\u4fdd\u5b58（\u5f85\u540c\u6b65）"\u3002<\/p>\n
```ts \/\/ \u4f7f\u7528 idb-keyval \u6f14\u793a；\u751f\u4ea7\u5efa\u8bae\u7528\u66f4\u5b8c\u6574\u7684\u961f\u5217\u5e93\u6216\u81ea\u7814 import { set, get, del, keys } from 'idb-keyval';<\/p>\n
interface UpdateTask { \u00a0 id: string; \u00a0 type: string; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \u5982 'order.update' \u00a0 payload: unknown; \u00a0 meta: { baseVersion?: number; createdAt: number; retry: number }; \u00a0 status: 'pending' | 'inflight' | 'done' | 'dead'; }<\/p>\n
const QUEUE_PREFIX = 'uq:'; const enqueue = (task: UpdateTask) => set(QUEUE_PREFIX + task.id, task); const allPending = async () => (await keys()) \u00a0 .filter(k => String(k).startsWith(QUEUE_PREFIX)) \u00a0 .map(k => get(k)); ```<\/p>\n
UI \u4fa7\u53cd\u9988：<\/p>\n
```ts async function submitUpdate(task: UpdateTask) { \u00a0 if (networkMonitor.isOnline) { \u00a0 \u00a0 try { await httpPost(task); markDone(task); } \u00a0 \u00a0 catch (e) { await enqueue(task); } \u00a0 \/\/ \u4e34\u65f6\u5931\u8d25\u4e5f\u5165\u961f \u00a0 } else { \u00a0 \u00a0 await enqueue(task); \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \u79bb\u7ebf：\u4ec5\u843d\u5e93 \u00a0 \u00a0 toast('\u5df2\u79bb\u7ebf\u4fdd\u5b58，\u8054\u7f51\u540e\u81ea\u52a8\u540c\u6b65'); \u00a0 } } ```<\/p>\n
### 4.4 L2：\u7eed\u4f20\u7f16\u6392（Flush Controller）<\/p>\n
\u7f51\u7edc\u6062\u590d\u65f6，\u7531\u7f16\u6392\u5668\u6309**\u987a\u5e8f + \u5e76\u53d1\u5ea6 + \u9000\u907f**\u8fdb\u884c\u7eed\u4f20，\u907f\u514d\u8bf7\u6c42\u98ce\u66b4：<\/p>\n
```ts async function flush() { \u00a0 const tasks = (await allPending()) \u00a0 \u00a0 .filter(t => t.status === 'pending') \u00a0 \u00a0 .sort((a, b) => a.meta.createdAt – b.meta.createdAt); \/\/ FIFO<\/p>\n
\u00a0 const CONCURRENCY = 3; \u00a0 for (let i = 0; i < tasks.length; i += CONCURRENCY) { \u00a0 \u00a0 const batch = tasks.slice(i, i + CONCURRENCY); \u00a0 \u00a0 await Promise.all(batch.map(sendOne)); \u00a0 \u00a0 if (!networkMonitor.isOnline) break; \/\/ \u4e2d\u9014\u53c8\u65ad\u7f51，\u7acb\u523b\u6682\u505c \u00a0 } }<\/p>\n
async function sendOne(task: UpdateTask) { \u00a0 task.status = 'inflight'; \u00a0 try { \u00a0 \u00a0 const res = await httpPost(task); \u00a0 \u00a0 if (res.status === 409) return resolveConflict(task, res); \/\/ \u51b2\u7a81 \u00a0 \u00a0 await markDone(task); \u00a0 } catch (e) { \u00a0 \u00a0 task.meta.retry++; \u00a0 \u00a0 if (task.meta.retry > 5) task.status = 'dead'; \/\/ \u5165\u6b7b\u4fe1\u961f\u5217 \u00a0 \u00a0 else await backoff(task); \/\/ \u6307\u6570\u9000\u907f\u540e\u91cd\u6392 \u00a0 \u00a0 await set(QUEUE_PREFIX + task.id, task); \u00a0 } } ```<\/p>\n
**\u6682\u505c\u8bed\u4e49**：`flush` \u4e2d\u4efb\u4f55\u4e00\u6b21\u63a2\u6d4b\u5230 `isOnline === false`，\u7acb\u5373 `break`，\u5269\u4f59\u4efb\u52a1\u4fdd\u6301 `pending`，\u7b49\u5f85\u4e0b\u6b21 `online` \u4e8b\u4ef6\u518d\u89e6\u53d1 `flush()`\u3002\u8fd9\u5c31\u662f"\u6682\u505c\u2014\u6062\u590d"\u7684\u95ed\u73af\u3002<\/p>\n
### 4.5 \u51b2\u7a81\u89e3\u51b3\u7b56\u7565<\/p>\n
\u79bb\u7ebf\u671f\u95f4\u5176\u4ed6\u7aef\u53ef\u80fd\u5df2\u4fee\u6539\u540c\u4e00\u8d44\u6e90，\u7eed\u4f20\u65f6\u540e\u7aef\u8fd4\u56de `409 Conflict`\u3002\u5e38\u89c1\u7b56\u7565：<\/p>\n
| \u7b56\u7565 | \u9002\u7528\u573a\u666f | \u505a\u6cd5 | |——|———-|——| | \u6700\u540e\u5199\u5165\u83b7\u80dc（LWW） | \u4f4e\u534f\u4f5c\u3001\u53ef\u63a5\u53d7\u8986\u76d6 | \u4ee5 `updatedAt` \u53d6\u6700\u65b0，\u524d\u7aef\u5f39"\u5df2\u88ab\u4ed6\u4eba\u4fee\u6539"\u63d0\u793a | | \u7248\u672c\u53f7\u6821\u9a8c（OCC） | \u901a\u7528 | \u63d0\u4ea4\u5e26 `baseVersion`，\u4e0d\u5339\u914d\u5219\u62d2\u7edd，\u524d\u7aef\u62c9\u65b0\u57fa\u7ebf\u540e\u5408\u5e76 | | \u64cd\u4f5c\u53d8\u6362（OT） | \u534f\u540c\u7f16\u8f91 | \u5c06\u66f4\u65b0\u8868\u8fbe\u4e3a\u64cd\u4f5c，\u670d\u52a1\u7aef\u91cd\u6392 | | CRDT | \u9ad8\u5e76\u53d1\u65e0\u4e2d\u5fc3 | \u6570\u636e\u7ed3\u6784\u5929\u7136\u53ef\u5408\u5e76，\u65e0\u9700\u51b2\u7a81\u5904\u7406 |<\/p>\n
> \u63a8\u8350\u9ed8\u8ba4\u91c7\u7528 **OCC（\u4e50\u89c2\u5e76\u53d1\u63a7\u5236）**：\u6210\u672c\u53ef\u63a7，\u4e14\u80fd\u628a"\u6682\u505c\u2014\u6062\u590d\u2014\u51b2\u7a81"\u4e09\u6bb5\u903b\u8f91\u89e3\u8026\u3002<\/p>\n
—<\/p>\n
## 5. \u72b6\u6001\u673a\u4e0e\u8fb9\u754c\u60c5\u51b5<\/p>\n
\u66f4\u65b0\u4efb\u52a1\u5efa\u8bae\u7528\u663e\u5f0f\u72b6\u6001\u673a，\u907f\u514d"\u534a\u63d0\u4ea4"\u5e7d\u7075\u4efb\u52a1：<\/p>\n
``` \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 enqueue \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u5728\u7ebf\u63d0\u4ea4\u5931\u8d25 \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25b6 \u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u2502 \u00a0pending \u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 pending \u00a0\u2502 \u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u00a0 \u2514\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u53d1\u9001 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502 \u6536\u5230 409 \u00a0 \u00a0 \u00a0 \u00a0 \u25bc \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u25bc \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u2502 inflight \u2502 \u00a0\u2502 \u00a0done \u00a0 \u2502 \u00a0 \u2502 conflict \u2502 \u2500\u2500\u25b6 resolveConflict \u00a0 \u2514\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u00a0 \u00a0 \u00a0 \u00a0\u2502 \u91cd\u8bd5\u8017\u5c3d \u00a0 \u00a0 \u00a0 \u00a0\u25bc \u00a0 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u2502 \u00a0 dead \u00a0 \u2502 \u00a0\u2500\u2500\u25b6 \u6b7b\u4fe1\u961f\u5217（\u4eba\u5de5\/\u65e5\u5fd7） \u00a0 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 ```<\/p>\n
**\u5fc5\u5904\u7406\u7684\u8fb9\u754c\u60c5\u51b5：** – **\u91cd\u8fde\u77ac\u95f4\u91cd\u590d\u63d0\u4ea4**：\u7528\u4efb\u52a1 `id` \u5e42\u7b49\u952e，\u540e\u7aef\u505a\u53bb\u91cd（\u540c\u4e00 `id` \u4ec5\u751f\u6548\u4e00\u6b21）\u3002 – **\u9875\u9762\u5173\u95ed\u5bfc\u81f4 inflight \u4e22\u5931**：`inflight` \u5728\u91cd\u8f7d\u540e\u56de\u9000\u4e3a `pending` \u91cd\u65b0\u53d1\u9001（\u540e\u7aef\u5e42\u7b49\u515c\u5e95）\u3002 – **\u961f\u5217\u65e0\u9650\u81a8\u80c0**：\u8bbe\u6700\u5927\u5bb9\u91cf\u4e0e TTL，\u8fc7\u671f\u4efb\u52a1\u8f6c `dead` \u5e76\u544a\u8b66\u3002 – **\u6ce8\u9500\/\u5207\u6362\u8d26\u53f7**：\u6e05\u7a7a\u961f\u5217\u6216\u6309 `userId` \u9694\u79bb，\u9632\u6b62\u4e32\u53f7\u4e32\u6570\u636e\u3002<\/p>\n
—<\/p>\n
## 6. \u53ef\u89c2\u6d4b\u6027<\/p>\n
\u79bb\u7ebf\u66f4\u65b0\u7b56\u7565"\u770b\u4e0d\u89c1"\u5c31\u5bb9\u6613\u51fa\u95ee\u9898，\u5efa\u8bae\u57cb\u70b9：<\/p>\n
– `queue_depth`：\u5f53\u524d pending \u4efb\u52a1\u6570（\u53cd\u6620\u79bb\u7ebf\u5806\u79ef\u538b\u529b） – `sync_latency`：\u4ece enqueue \u5230 done \u7684\u65f6\u5ef6 – `conflict_rate`：\u51b2\u7a81\u5360\u6bd4，\u8fc7\u9ad8\u8bf4\u660e OCC \u7c92\u5ea6\u8fc7\u7c97 – `dead_letter_count`：\u6b7b\u4fe1\u6570\u91cf，\u9700\u544a\u8b66 – `offline_duration`：\u5355\u6b21\u79bb\u7ebf\u65f6\u957f\u5206\u5e03<\/p>\n
—<\/p>\n
## 7. \u6700\u4f73\u5b9e\u8df5\u6e05\u5355<\/p>\n
1. **\u5199\u64cd\u4f5c\u4e00\u5f8b\u8d70\u8c03\u5ea6\u5668**，\u4e0d\u8981\u5728\u4e1a\u52a1\u4ee3\u7801\u91cc\u6563\u843d `fetch`，\u7531 `UpdateScheduler` \u7edf\u4e00\u51b3\u5b9a\u76f4\u53d1\u8fd8\u662f\u5165\u961f\u3002 2. **\u672c\u5730\u4f18\u5148\u53cd\u9988**：\u79bb\u7ebf\u4fdd\u5b58\u5373\u89c6\u4e3a"\u5df2\u4fdd\u5b58（\u5f85\u540c\u6b65）"，\u7ed9\u786e\u5b9a\u611f，\u4e0d\u629b\u7f51\u7edc\u9519\u8bef\u3002 3. **\u7248\u672c\u66f4\u65b0\u79bb\u7ebf\u6682\u505c**：SW \u4e0d\u8981\u5728\u79bb\u7ebf\u65f6\u81ea\u52a8\u6fc0\u6d3b，\u8054\u7f51\u540e\u7531\u7528\u6237\u89e6\u53d1\u5237\u65b0\u3002 4. **\u7eed\u4f20\u8981\u6709\u7f16\u6392**：\u5e76\u53d1\u5ea6\u3001\u9000\u907f\u3001\u5e42\u7b49\u3001\u65ad\u70b9\u6682\u505c，\u7f3a\u4e00\u4e0d\u53ef\u3002 5. **\u51b2\u7a81\u8981\u663e\u5f0f\u5904\u7406**：\u9ed8\u8ba4 OCC，\u5fc5\u8981\u65f6\u5347\u7ea7\u5230 CRDT；\u7edd\u4e0d\u9759\u9ed8\u8986\u76d6\u7528\u6237\u6570\u636e\u3002 6. **\u961f\u5217\u8981\u53ef\u89c2\u6d4b\u3001\u53ef\u6e05\u7406**：\u66b4\u9732\u6df1\u5ea6\u4e0e\u6b7b\u4fe1，\u8bbe\u7f6e\u5bb9\u91cf\u4e0a\u9650\u4e0e TTL\u3002 7. **\u5b58\u50a8\u9009\u578b**：\u961f\u5217\u6301\u4e45\u5316\u4f18\u5148 **IndexedDB**（\u5bb9\u91cf\u5927\u3001\u5f02\u6b65\u3001\u4e8b\u52a1\u5b89\u5168），\u6781\u5c0f\u6570\u636e\u53ef\u7528 `localStorage` \u515c\u5e95\u3002<\/p>\n
—<\/p>\n
## 8. \u6280\u672f\u9009\u578b\u53c2\u8003<\/p>\n
| \u80fd\u529b | \u63a8\u8350 | \u5907\u6ce8 | |——|——|——| | \u672c\u5730\u6301\u4e45\u5316\u961f\u5217 | IndexedDB（idb \/ Dexie） | \u5f02\u6b65\u3001\u5bb9\u91cf\u5927\u3001\u652f\u6301\u4e8b\u52a1 | | \u7f51\u7edc\u63a2\u6d4b | \u81ea\u5b9a\u4e49 + \u5fc3\u8df3 | `navigator.onLine` \u4ec5\u4f5c\u521d\u5224 | | PWA \u66f4\u65b0 | Workbox + \u81ea\u5b9a\u4e49 SW \u6d88\u606f | \u63a7\u5236\u6fc0\u6d3b\u65f6\u673a | | \u51b2\u7a81\u5408\u5e76 | \u81ea\u7814 OCC \/ Yjs(CRDT) | \u534f\u540c\u573a\u666f\u7528 Yjs | | \u91cd\u8bd5\u9000\u907f | \u81ea\u7814\u6216 p-retry | \u6307\u6570\u9000\u907f + \u6296\u52a8 |<\/p>\n
—<\/p>\n
_\u6587\u6863\u7ed3\u675f\u3002\u5982\u9700\u9488\u5bf9\u5177\u4f53\u6846\u67b6（React \/ Vue \/ Electron \/ Flutter Web）\u6216\u540e\u7aef\u534f\u8bae（REST \/ GraphQL \/ WebSocket）\u8865\u5145\u843d\u5730\u793a\u4f8b，\u53ef\u5728\u6b64\u57fa\u7840\u4e0a\u6269\u5c55\u5bf9\u5e94\u7ae0\u8282\u3002_ \u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
> \u7248\u672c：v1.0 ｜ \u9002\u7528\u8303\u56f4：PWA \/ SPA \/ \u684c\u9762\u7aef（Electron\u3001Tauri \u7b49）\u53ca\u79fb\u52a8\u7aef Hybrid \u524d\u7aef\u5e94\u7528 > \u5173\u952e\u8bcd：\u79bb\u7ebf\u4f18\u5148（Offline-First）\u3001\u66f4\u65b0\u6682\u505c\u3001\u65ad\u70b9\u7eed\u4f20\u3001\u51b2\u7a81\u89e3\u51b3\u3001Service Worker\u3001\u672c\u5730\u961f\u5217
\n—
\n## 1. \u80cc\u666f\u4e0e\u95ee\u9898\u5b9a\u4e49
\n\u73b0\u4ee3\u524d\u7aef\u5e94\u7528\u8d8a\u6765\u8d8a\u591a\u5730\u8fd0\u884c\u5728\u5f31\u7f51\u6216\u65ad\u7f51\u73af\u5883（\u5730\u94c1\u3001\u7535\u68af\u3001<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[87],"topic":[],"class_list":["post-90010","post","type-post","status-publish","format-standard","hentry","category-server","tag-87"],"yoast_head":"\n