docs: add images to the pwa local app section
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 271 KiB |
|
After Width: | Height: | Size: 639 KiB |
|
After Width: | Height: | Size: 644 KiB |
|
After Width: | Height: | Size: 662 KiB |
|
After Width: | Height: | Size: 409 KiB |
|
After Width: | Height: | Size: 337 KiB |
|
After Width: | Height: | Size: 452 KiB |
|
After Width: | Height: | Size: 292 KiB |
@@ -35,7 +35,7 @@
|
||||
|
||||
**一句话总结**:PWA 是"会自己存文件的网页"——它既有网站的轻量(无需安装、自动更新),又有原生 App 的体验(离线可用、可添加到桌面)。
|
||||
|
||||
<!--  -->
|
||||

|
||||
|
||||
## 1.2 为什么选择 PWA?
|
||||
|
||||
@@ -90,6 +90,7 @@ npm --version
|
||||
如果能看到版本号输出(如 `v18.17.0` 和 `9.6.7`),说明安装成功。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
## 2.3 AI 编程助手安装
|
||||
|
||||
@@ -182,6 +183,10 @@ PWA 需要图标才能被安装。我们至少需要两个尺寸:**192x192**
|
||||
或者你也可以用任何设计工具(Figma、Canva)做一个你喜欢的图标,放到 `public/` 目录下。
|
||||
|
||||
<!-- 0 -->
|
||||
**192x192**
|
||||

|
||||
**512x512**
|
||||

|
||||
|
||||
## 2.7 配置 vite-plugin-pwa
|
||||
|
||||
@@ -242,6 +247,7 @@ export default defineConfig({
|
||||
* `workbox.globPatterns`:告诉 Service Worker 要缓存哪些类型的文件,这些文件在离线时也能访问。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
# 3 番茄农场 PWA 开发
|
||||
|
||||
@@ -291,6 +297,7 @@ export default defineConfig({
|
||||
3. 如果我们对生成的效果不满意,我们可以回退到上一个版本
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
## 3.2 运行与查看(本地开发服务器)
|
||||
|
||||
@@ -322,6 +329,8 @@ npm run dev
|
||||
试着点击"开始专注"按钮,看看倒计时是否正常工作。点击菜地,看看是否能购买种子并种植。这就是你的第一个 PWA 应用雏形!
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||

|
||||
|
||||
## 3.3 优化迭代(添加 SVG 作物和动画)
|
||||
|
||||
@@ -363,6 +372,7 @@ npm run dev
|
||||
AI 会再次修改代码,帮你处理复杂的 SVG 绘制和动画逻辑。修改完成后,刷新浏览器页面,你应该能看到精美的作物图案和流畅的生长动画。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
## 3.4 添加音效和提示(可选)
|
||||
|
||||
@@ -387,6 +397,7 @@ AI 会再次修改代码,帮你处理复杂的 SVG 绘制和动画逻辑。修
|
||||
AI 会帮你添加音效和提示功能,让你的番茄农场更加生动有趣。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
# 4 本地体验 PWA
|
||||
|
||||
@@ -417,6 +428,7 @@ PWA 的 Service Worker 只在生产构建中生效(开发模式下不会注册
|
||||
安装后的 PWA 看起来就像一个原生桌面应用——没有地址栏,没有标签页,有自己的窗口和图标。现在你可以随时打开番茄农场,开始专注种菜之旅!
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
**macOS Safari 安装步骤:**
|
||||
|
||||
@@ -436,6 +448,7 @@ PWA 的 Service Worker 只在生产构建中生效(开发模式下不会注册
|
||||
你也可以打开 Chrome DevTools(F12)→ Application → Service Workers,查看 Service Worker 的运行状态和缓存的资源列表。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
## 4.4 数据持久化与同步方案
|
||||
|
||||
@@ -614,6 +627,7 @@ AI 会自动处理所有部署步骤,你只需要在提示时:
|
||||
打开它,你会发现它以全屏模式运行,没有浏览器的地址栏和导航按钮,和原生 App 几乎一模一样。现在你可以随时随地开始专注种菜了!
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
## 6.2 iPhone 安装
|
||||
|
||||
@@ -640,6 +654,7 @@ Google 提供了一个叫 **Lighthouse** 的工具,可以给你的 PWA 打分
|
||||
一个合格的番茄农场 PWA 应该在 PWA 评分上拿到满分。如果有扣分项,Lighthouse 会告诉你具体原因和修复建议。
|
||||
|
||||
<!-- 0 -->
|
||||

|
||||
|
||||
# 7 写在最后
|
||||
|
||||
|
||||