docs(pwa): 优化 PWA 教程内容

- 重写 1.1 节，清晰解释 PWA 离线原理及与普通网站/原生 App 的区别
- 删除冗余的 1.2 和 1.3 节，精简章节结构
- 新增 4.4 节数据持久化与同步方案，解答换设备数据丢失问题
  - 云端同步（Supabase）
  - 导出/导入备份
  - 浏览器扩展同步
  - 方案选择建议

Author: sanbuphy

docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/index.md

@@ -15,45 +15,29 @@
 
 ## 1.1 PWA 的定义
 
-PWA（Progressive Web App，渐进式 Web 应用）是一种使用 Web 技术构建的应用程序，但它能够提供接近原生应用的用户体验。你有没有想过：**一个网页，能不能像微信、抖音一样，直接安装在手机桌面上，点开就用，甚至断网也能跑？** 答案是：可以。这就是 PWA。
+**PWA（Progressive Web App）** 是一种特殊的网页，它通过 **Service Worker** 技术获得了"缓存并接管自己"的能力。
 
-PWA 本质上还是一个网页，但它通过几项关键技术，让自己"进化"成了一个接近原生 App 的存在：
+### 为什么普通网站不能离线，PWA 可以？
 
-* **可安装**：用户可以把它"安装"到桌面/主屏幕，拥有自己的图标和启动画面，打开后没有浏览器的地址栏，看起来就像一个独立的 App。
-* **可离线**：即使没有网络，App 也能正常打开并展示缓存过的内容。
-* **可推送**：像原生 App 一样发送通知提醒。
+普通网站每次打开都要从服务器下载 HTML、CSS、JS 文件，断网就彻底打不开。而 PWA 首次访问时会通过 **Service Worker**（一个运行在浏览器后台的 JS 脚本）把这些文件缓存到本地。之后即使断网，Service Worker 会直接从本地缓存读取文件，让页面正常显示。
 
-简单来说，PWA 就是 **"穿上了 App 外衣的网页"**。
+**打个比方**：普通网站像每次去图书馆借书（必须有网），PWA 像把书买回家放书架上（首次下载后，离线也能看）。
 
-<!-- ![](images/image1.png) -->
-
-## 1.2 PWA 开发
-
-PWA 开发是指构建上述应用程序的全过程。在本教程的 Vibe Coding 开发模式中，借助 **AI 辅助编程模式**，它将开发者的角色从过去的"代码撰写者"转变为"产品架构师"：
-
-1. **你（架构师/PM）**：负责业务逻辑设计、Prompt（提示词）编写以及最终效果验收。
-2. **AI 编程助手（工程师）**：负责执行指令，将自然语言转化为标准的 React 代码和 PWA 配置，并处理语法错误和逻辑细节。
-3. **Vite + vite-plugin-pwa（构建工厂）**：负责提供编译环境，将代码打包成可运行的 PWA，并自动生成 Service Worker 和 Manifest。
-
-## 1.3 PWA 的三大核心技术
-
-要让一个普通网页"进化"成 PWA，需要三样东西：
-
-**1. HTTPS（安全连接）**
+### PWA vs 普通网站 vs 原生 App
 
-PWA 必须运行在 HTTPS 协议下。这是浏览器的硬性要求——只有安全的网站才有资格使用 Service Worker 等高级功能。好消息是，现在主流的部署平台（Vercel、Netlify、GitHub Pages）都自动提供免费的 HTTPS。
+| 特性 | 普通网站 | PWA | 原生 App |
+|------|---------|-----|---------|
+| **安装** | 不需要 | 可选（添加到桌面） | 必须从应用商店下载 |
+| **离线使用** | ❌ 不能 | ✅ 能（缓存后） | ✅ 能 |
+| **更新方式** | 自动刷新 | 自动/后台更新 | 用户手动更新 |
+| **体积** | 无 | 几百 KB~几 MB | 几十 MB 以上 |
+| **开发成本** | 低 | 低（一套代码） | 高（iOS/Android 分开） |
 
-**2. Web App Manifest（应用清单）**
+**一句话总结**：PWA 是"会自己存文件的网页"——它既有网站的轻量（无需安装、自动更新），又有原生 App 的体验（离线可用、可添加到桌面）。
 
-这是一个 JSON 配置文件，告诉浏览器："我是一个 App，我叫什么名字、用什么图标、打开后长什么样"。它决定了你的 PWA 安装后的外观和行为。
-
-**3. Service Worker（服务工作线程）**
-
-这是 PWA 的"灵魂"。它是一段运行在浏览器后台的 JavaScript 代码，充当你的 App 和网络之间的"中间人"。它可以拦截网络请求、缓存资源，从而实现离线访问。你可以把它理解为一个 **"住在浏览器里的小管家"**，负责帮你存东西、取东西。
-
-<!-- 0 -->
+<!-- ![](images/image1.png) -->
 
-## 1.4 为什么选择 PWA？
+## 1.2 为什么选择 PWA？
 
 在 Vibe Coding 时代，PWA 是性价比最高的"跨平台方案"之一：
 
@@ -453,6 +437,123 @@ PWA 的 Service Worker 只在生产构建中生效（开发模式下不会注册
 
 <!-- 0 -->
 
+## 4.4 数据持久化与同步方案
+
+现在你的番茄农场已经可以离线运行了，所有数据都保存在浏览器的 localStorage 中。但这里有一个关键问题：**如果用户换了一台设备，或者清除了浏览器数据，农场数据就会全部丢失**。对于严肃的生产应用，我们需要考虑数据持久化和跨设备同步的方案。
+
+### 4.4.1 本地存储的局限性
+
+目前我们使用的 localStorage 有几个明显的限制：
+
+| 限制项 | 说明 |
+|--------|------|
+| **设备绑定** | 数据只保存在当前设备的浏览器中，换设备即丢失 |
+| **容量有限** | 通常只有 5-10MB 的存储空间 |
+| **易丢失** | 用户清除浏览器数据、卸载 PWA 都会导致数据消失 |
+| **无法同步** | 手机上的进度无法同步到电脑 |
+
+如果你的番茄农场只是个人使用的小工具，这可能不是问题。但如果想让用户长期投入、积累数据，就需要更可靠的方案。
+
+### 4.4.2 方案一：云端同步（推荐）
+
+最可靠的方案是将数据同步到云端数据库。对于 PWA 来说，**Supabase** 是一个绝佳选择——它提供 PostgreSQL 数据库、实时订阅、用户认证，而且有免费套餐。
+
+**实现思路：**
+
+1. **用户登录**：使用邮箱/社交账号登录，建立用户身份
+2. **数据自动同步**：每次操作后自动保存到云端
+3. **离线优先**：即使断网也能继续操作，网络恢复后自动同步
+4. **多端同步**：手机上的进度实时同步到电脑
+
+**Prompt 示例：**
+
+```
+请帮我把番茄农场的数据存储从 localStorage 改成 Supabase 云端同步：
+
+**功能要求：**
+- 添加用户登录功能（邮箱+密码或 Google 登录）
+- 用户数据（积分、等级、菜地状态）保存到 Supabase 数据库
+- 离线时也能正常使用，网络恢复后自动同步
+- 支持多端同步，手机上种的菜电脑上也能看到
+
+**技术栈：**
+- 使用 @supabase/supabase-js 客户端
+- 实现乐观更新（先更新 UI，再同步到云端）
+- 添加简单的同步状态提示
+```
+
+**优点：**
+- 数据永不丢失，换设备只需登录即可恢复
+- 免费套餐足够个人项目使用
+- 支持实时订阅，多端同步体验好
+
+**缺点：**
+- 需要用户注册登录，增加了使用门槛
+- 需要网络连接才能同步
+
+### 4.4.3 方案二：导出/导入备份
+
+如果你不想引入复杂的后端服务，一个简单的折中方案是 **手动备份与恢复**。
+
+**实现思路：**
+
+1. **导出功能**：将农场数据打包成 JSON 文件，让用户下载保存
+2. **导入功能**：用户可以选择之前导出的 JSON 文件恢复数据
+3. **自动提醒**：定期提醒用户备份数据
+
+**Prompt 示例：**
+
+```
+请帮番茄农场添加数据备份功能：
+
+**导出功能：**
+- 在设置页面添加"导出数据"按钮
+- 将 localStorage 中的所有数据打包成 JSON 文件
+- 自动下载到用户设备
+
+**导入功能：**
+- 添加"导入数据"按钮，支持选择 JSON 文件
+- 验证文件格式后恢复数据
+- 导入前提示会覆盖现有数据
+
+**自动提醒：**
+- 如果超过 7 天没有备份，显示温馨提示
+```
+
+**优点：**
+- 实现简单，不需要后端服务
+- 用户完全掌控自己的数据
+- 可以跨设备迁移（通过文件传输）
+
+**缺点：**
+- 需要用户手动操作，体验不够流畅
+- 如果忘记备份，数据仍会丢失
+
+### 4.4.4 方案三：浏览器扩展同步（Chrome 用户）
+
+如果你的 PWA 主要面向 Chrome 用户，可以考虑使用 **Chrome Storage Sync API**。这是 Chrome 浏览器提供的跨设备同步存储服务，数据会自动同步到用户的 Google 账号。
+
+**注意：** 这需要将 PWA 打包成 Chrome 扩展的形式，适合有技术能力的开发者尝试。
+
+### 4.4.5 方案选择建议
+
+| 场景 | 推荐方案 |
+|------|----------|
+| 个人使用的小工具 | localStorage 即可，无需额外方案 |
+| 希望数据不丢失，但不想太复杂 | 导出/导入备份 |
+| 正式产品，需要完整用户体验 | Supabase 云端同步 |
+| 主要面向 Chrome 用户 | Chrome Storage Sync |
+
+**对于番茄农场这样的应用，我的建议是：**
+
+1. **MVP 阶段**：先用 localStorage，快速验证产品想法
+2. **迭代阶段**：添加导出/导入功能，给用户一个数据保险
+3. **成熟阶段**：接入 Supabase，实现真正的云端同步
+
+记住：**渐进式增强**是 PWA 的核心理念。先让应用能跑起来，再逐步添加高级功能。
+
+<!-- 0 -->
+
 # 5 部署上线
 
 PWA 必须运行在 HTTPS 上才能正常工作。好消息是，现在主流的部署平台都自动提供免费的 HTTPS。我们以 **Vercel** 为例（也可以用 Netlify 或 GitHub Pages）。