App Shell 离线架构与数据协作实践

`title: App Shell 离线架构与数据协作实践``categories: Web 开发/前端/数据管理``keywords: App Shell,Service Worker,离线,Cache Storage,IndexedDB``description: 采用 App Shell 架构将静态壳缓存到 SW，动态数据由 IndexedDB 管理与网络同步，提供稳定的离线体验与增量更新。`架构要点壳：HTML/CSS/JS 缓存为静态层；数据：IndexedDB + 网络增量同步；回退：离线占位与重试队列。SW 预缓存self.addEventListener('install', e => { e.waitUntil(caches.open('app-shell').then(c => c.addAll(['/','/index.html','/styles.css','/app.js']))); });