diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-192.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-192.png new file mode 100644 index 0000000..bdb2acb Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-192.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-512.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-512.png new file mode 100644 index 0000000..df9fd68 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/icon-512.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image0.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image0.png new file mode 100644 index 0000000..d282752 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image0.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image1.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image1.png new file mode 100644 index 0000000..27f45f8 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image1.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image10.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image10.png new file mode 100644 index 0000000..5f4a272 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image10.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image11.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image11.png new file mode 100644 index 0000000..a47b56b Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image11.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image2.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image2.png new file mode 100644 index 0000000..f4b40cd Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image2.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image3.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image3.png new file mode 100644 index 0000000..ac692da Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image3.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image4.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image4.png new file mode 100644 index 0000000..79ed532 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image4.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image5.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image5.png new file mode 100644 index 0000000..edc5530 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image5.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image6.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image6.png new file mode 100644 index 0000000..7251cb4 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image6.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image7.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image7.png new file mode 100644 index 0000000..70363d5 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image7.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image8.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image8.png new file mode 100644 index 0000000..67a1ae0 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image8.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image9.png b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image9.png new file mode 100644 index 0000000..59ec916 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/images/image9.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/index.md b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/index.md index 4ed2099..bd2aae0 100644 --- a/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/index.md +++ b/docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/index.md @@ -35,7 +35,7 @@ **一句话总结**：PWA 是"会自己存文件的网页"——它既有网站的轻量（无需安装、自动更新），又有原生 App 的体验（离线可用、可添加到桌面）。 - +![](images/image0.png) ## 1.2 为什么选择 PWA？ @@ -90,6 +90,7 @@ npm --version 如果能看到版本号输出（如 `v18.17.0` 和 `9.6.7`），说明安装成功。 +![](images/image1.png) ## 2.3 AI 编程助手安装 @@ -182,6 +183,10 @@ PWA 需要图标才能被安装。我们至少需要两个尺寸：**192x192** 或者你也可以用任何设计工具（Figma、Canva）做一个你喜欢的图标，放到 `public/` 目录下。 +**192x192** +![](images/icon-192.png) +**512x512** +![](images/icon-512.png) ## 2.7 配置 vite-plugin-pwa @@ -242,6 +247,7 @@ export default defineConfig({ * `workbox.globPatterns`：告诉 Service Worker 要缓存哪些类型的文件，这些文件在离线时也能访问。 +![](images/image2.png) # 3 番茄农场 PWA 开发 @@ -291,6 +297,7 @@ export default defineConfig({ 3. 如果我们对生成的效果不满意，我们可以回退到上一个版本 +![](images/image3.png) ## 3.2 运行与查看（本地开发服务器） @@ -322,6 +329,8 @@ npm run dev 试着点击"开始专注"按钮，看看倒计时是否正常工作。点击菜地，看看是否能购买种子并种植。这就是你的第一个 PWA 应用雏形！ +![](images/image10.png) +![](images/image11.png) ## 3.3 优化迭代（添加 SVG 作物和动画） @@ -363,6 +372,7 @@ npm run dev AI 会再次修改代码，帮你处理复杂的 SVG 绘制和动画逻辑。修改完成后，刷新浏览器页面，你应该能看到精美的作物图案和流畅的生长动画。 +![](images/image4.png) ## 3.4 添加音效和提示（可选） @@ -387,6 +397,7 @@ AI 会再次修改代码，帮你处理复杂的 SVG 绘制和动画逻辑。修 AI 会帮你添加音效和提示功能，让你的番茄农场更加生动有趣。 +![](images/image5.png) # 4 本地体验 PWA @@ -417,6 +428,7 @@ PWA 的 Service Worker 只在生产构建中生效（开发模式下不会注册 安装后的 PWA 看起来就像一个原生桌面应用——没有地址栏，没有标签页，有自己的窗口和图标。现在你可以随时打开番茄农场，开始专注种菜之旅！ +![](images/image6.png) **macOS Safari 安装步骤：** @@ -436,6 +448,7 @@ PWA 的 Service Worker 只在生产构建中生效（开发模式下不会注册 你也可以打开 Chrome DevTools（F12）→ Application → Service Workers，查看 Service Worker 的运行状态和缓存的资源列表。 +![](images/image7.png) ## 4.4 数据持久化与同步方案 @@ -614,6 +627,7 @@ AI 会自动处理所有部署步骤，你只需要在提示时： 打开它，你会发现它以全屏模式运行，没有浏览器的地址栏和导航按钮，和原生 App 几乎一模一样。现在你可以随时随地开始专注种菜了！ +![](images/image8.png) ## 6.2 iPhone 安装 @@ -640,6 +654,7 @@ Google 提供了一个叫 **Lighthouse** 的工具，可以给你的 PWA 打分 一个合格的番茄农场 PWA 应该在 PWA 评分上拿到满分。如果有扣分项，Lighthouse 会告诉你具体原因和修复建议。 +![](images/image9.png) # 7 写在最后