HTML Academy · 课时

Web 应用清单

Q: 「Web 应用清单」这节课中我会学到什么？

使用 manifest.json 文件定义 PWA 元数据 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 manifest.json 文件定义 PWA 元数据

第 1 / 4 课13 个步骤

Web 应用清单 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

清单的作用

Web 应用清单是一份 JSON 文件，用来告诉浏览器如何将页面安装为应用：使用什么名称、显示哪个图标、启动哪个 URL、应用什么配色方案，以及使用哪种显示模式来渲染（standalone、fullscreen、browser）。

链接清单

应当允许安装的每个页面都要引用清单：在 head 中添加 <link rel="manifest" href="/manifest.webmanifest">。浏览器会获取并缓存它；后续加载时会应用清单的更新。

<link rel="manifest" href="/manifest.webmanifest">

最低要求字段

要让浏览器提供“安装应用”选项，清单至少需要：name（完整名称）、short_name（主屏幕标签，约 12 个字符）、start_url、display（通常为“standalone”），以及一个 icons 数组，其中至少包含一张 192x192 和一张 512x512 的 PNG 图标。

{
  "name": "Coddy Learn",
  "short_name": "Coddy",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f2937",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

start_url

点击已安装应用图标时启动的 URL。主页通常使用 /；也可以包含用于分析的查询参数："start_url": "/?source=pwa"，以便明确区分已安装会话和浏览器会话。

display 模式

display 可以是“browser”（常规页面界面）、“minimal-ui”（部分界面）、“standalone”（没有浏览器界面，看起来像应用）或“fullscreen”（没有状态栏）。standalone 是典型的 PWA 选择。

图标与可遮罩图标

请加入一个 purpose 为“maskable”的图标，这样 Android 可以将图标裁切成与其他主屏幕图标一致的形状：{ src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }。可遮罩图标包含安全区域，供系统进行裁切。

theme_color 和 background_color

theme_color 设置应用在浏览器中运行时地址栏的颜色。页面加载前，background_color 会作为启动画面的背景色显示。请使用与设计系统主色一致的颜色，让启动体验更加精致。

orientation

"orientation": "portrait" 会在应用安装后将其锁定为竖屏。“any”、“landscape”、“portrait-primary”是其他可选值。大多数通用 PWA 不设置此项，而是让设备方向决定显示方向。

安装资格

要让浏览器显示“安装”，页面必须通过 HTTPS 提供，注册一个能够处理获取事件的服务工作线程，链接一个包含最低要求字段的有效清单，并满足参与度条件（用户已经与页面交互过）。

更新清单

浏览器会缓存清单。编辑后若要强制刷新，可以更改图标 URL（使用防缓存查询参数即可），也可以等待——大多数浏览器会定期重新检查。没有强制更新 API，因此设计时应考虑到用户可能会暂时使用略微过期的清单。

测试清单

Chrome DevTools 的 Application 选项卡会显示解析后的清单、计算值和验证错误。Lighthouse 的 PWA 审计会检查每项安装要求，并报告缺少的内容。在开发过程中请同时使用这两项工具，以确认安装资格。

知识检查

网页应用清单中的 display: “standalone”值有什么作用？

在交互式课程中回答

总结

网页应用清单（manifest.webmanifest）会告诉浏览器如何将页面安装为应用：名称、short_name、start_url、display、theme_color，以及图标（192 和 512，还有适用于 Android 的可遮罩图标）。通过 <link rel="manifest"> 链接清单，并确保 HTTPS + 服务工作线程以满足安装条件；使用 Chrome DevTools 和 Lighthouse PWA 审计进行测试。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「Web 应用清单」课时是免费的吗？

是的 — 「Web 应用清单」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「Web 应用清单」这节课中我会学到什么？

使用 manifest.json 文件定义 PWA 元数据你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Web 应用清单」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy