Frontend Academy · 课时

Web 应用清单

编写包含名称、图标、start_url、display 和 theme_color 的 manifest.json，使浏览器显示“添加到主屏幕”提示。

第 1 / 4 课14 个步骤

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

什么是 PWA

渐进式 Web 应用是一种具备原生应用能力的网站：可以安装到主屏幕、支持离线运行，还能接收推送通知。其三个核心部分是：Web 应用清单、服务工作线程和 HTTPS。

清单文件

manifest.json（或 .webmanifest）是一个描述应用元数据的 JSON 文件。浏览器会读取它，以启用“添加到主屏幕”功能，并像启动原生应用一样启动您的应用。

基本清单

最小清单包含名称、图标、启动地址和显示模式。

// public/manifest.webmanifest
{
  "name": "Coddy Notes",
  "short_name": "Notes",
  "description": "Lightweight markdown notes",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

链接清单

请在 HTML <head> 中链接它。

<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">

显示模式

"display"控制应用窗口的浏览器界面："standalone"（没有浏览器界面，类似应用）、"fullscreen"（沉浸式体验，隐藏状态栏）、"minimal-ui"（保留部分浏览器控件）、"browser"（普通标签页）。

图标——多种尺寸

请提供多种尺寸的图标。现代 Android 需要 192 和 512 尺寸；Apple 还需要其他尺寸。请使用 "purpose": "maskable" 来创建自适应 Android 图标。

"icons": [
  { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Apple 专用标签

iOS 不完全支持清单。请添加 Apple 专用元标签，以支持 iOS 的“添加到主屏幕”功能。

<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">

安装提示

满足条件时（清单、服务工作线程、HTTPS 以及用户参与度），浏览器会触发 beforeinstallprompt 事件。您可以延迟处理它，并从自己的界面触发。

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

async function onInstallClick() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log('install:', outcome);
  deferredPrompt = null;
}

快捷方式（应用快捷方式）

清单可以声明快捷方式，用户长按已安装应用的图标时，这些快捷方式就会显示出来。

"shortcuts": [
  {
    "name": "New Note",
    "short_name": "New",
    "url": "/notes/new",
    "icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
  }
]

类别和屏幕截图

添加 categories 和 screenshots，可在 Chrome Android 和 Windows 中显示更丰富的安装界面。

"categories": ["productivity", "utilities"],
"screenshots": [
  { "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
  { "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]

测试清单

打开 DevTools → 应用 → 清单。Chrome 会显示解析后的清单字段、图标预览和警告（缺少图标、对比度过低等）。

框架让这一切更简单

Next.js：将 manifest.webmanifest 放入 public/。Nuxt：安装 @vite-pwa/nuxt 模块。Vite：vite-plugin-pwa 会自动生成清单和服务工作线程。

// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [VitePWA({
    manifest: {
      name: 'Coddy Notes',
      icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
    }
  })]
};

快速检查

在 Web 应用清单中，哪个 display 值可以让已安装的 PWA 像原生应用一样打开，且不显示任何浏览器界面？

在交互式课程中回答

回顾：Web 应用清单

JSON 文件，用于描述 PWA 元数据。包括名称、简短名称、启动地址、显示模式、主题颜色，以及多种尺寸的图标（含可遮罩图标）。在 HTML 中使用 rel=manifest 链接。iOS 需要 Apple 专用元标签。使用 beforeinstallprompt 事件构建自定义安装界面。使用快捷方式和屏幕截图提供更丰富的安装体验。框架（Vite PWA、Next、Nuxt PWA）可以自动完成生成。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 41
课程: 163

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

常见问题解答

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

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

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

编写包含名称、图标、start_url、display 和 theme_color 的 manifest.json，使浏览器显示“添加到主屏幕”提示。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Frontend Academy