无需登录 数据私有 本地保存

Manifest.json验证器 - PWA清单检查

10
0
0
0

📋 Manifest.json 验证器

PWA 清单文件检查 · 语法验证 · 字段分析 · 合规评分

拖放 manifest.json 文件到此处，或点击选择

注意：目标服务器需允许跨域访问（CORS），否则获取会失败。建议使用粘贴或上传方式。

📱 PWA 安装预览
9:41 ●●●
应用名称
等待验证...
standalone
常见问题与 PWA 知识点
什么是 manifest.json？为什么它很重要？

manifest.json 是 Progressive Web App（PWA）的核心配置文件，它是一个 JSON 格式的文件，告诉浏览器关于你的 Web 应用的信息。它定义了应用的名称、图标、启动 URL、显示模式等关键属性。

重要性：

  • 使网页能够被"安装"到用户设备上，像原生应用一样
  • 控制应用启动时的外观（全屏、状态栏颜色等）
  • 是 Chrome 触发"添加到主屏幕"提示的必要条件
  • 影响应用在应用切换器中的显示效果
manifest.json 有哪些必填字段？

根据 PWA 规范和浏览器要求，以下字段是实际必填的：

  • name 或 short_name：应用名称（至少需要一个）
  • icons：包含至少一个 192×192 和一个 512×512 的图标
  • start_url：应用启动时的 URL
  • display：显示模式（如 standalone、fullscreen 等）

强烈推荐：theme_color、background_color、description

图标（icons）有什么具体要求？
  • 必须提供 192×192 和 512×512 两种尺寸的图标
  • 推荐使用 PNG 格式（"type": "image/png"）
  • 建议包含 "purpose": "any maskable" 以支持自适应图标
  • sizes 字段格式如 "192x192" 或 "any"
  • 图标 src 可以是相对路径或绝对 URL
display 显示模式有哪些？该选哪个？
  • standalone（推荐）：类似原生应用，有独立窗口，无浏览器地址栏
  • fullscreen：完全全屏，无任何系统 UI（适合游戏）
  • minimal-ui：最小浏览器 UI，有简化的导航控件
  • browser：标准浏览器体验，有完整地址栏

大多数 PWA 选择 standalone，兼顾原生体验和基本导航。

theme_color 和 background_color 有什么区别？
  • theme_color：工具栏和状态栏的颜色，影响浏览器 UI 的主题色
  • background_color：应用启动画面（splash screen）的背景色，在应用完全加载前显示

两者通常设置为与品牌色一致，但 background_color 应尽量浅色以减少加载时的视觉闪烁。

如何检查我的 manifest.json 是否有效？
  • 使用本工具粘贴内容进行验证，获取详细评分和修复建议
  • 在 Chrome DevTools → Application → Manifest 面板中查看
  • 使用 Lighthouse 进行 PWA 审计
  • 确保 <link rel="manifest" href="/manifest.json"> 正确添加到 HTML 的 <head> 中
manifest.json 常见的错误有哪些？
  • JSON 语法错误：尾随逗号、使用单引号、注释（JSON 不支持注释）
  • 缺少 192×192 或 512×512 尺寸的图标
  • start_url 指向无效路径或跨域 URL
  • scope 设置超出 manifest 所在目录范围
  • 图标 src 返回 404 错误
  • 服务器未返回正确的 Content-Type: application/manifest+json
PWA 安装需要满足哪些条件？
  • 网站必须通过 HTTPS 提供服务（localhost 除外）
  • 有有效的 manifest.json，包含必填字段和图标
  • 注册了 Service Worker 且处于激活状态
  • 用户与网站有一定程度的交互（Chrome 的安装启发式规则）
  • manifest.json 的 start_url 与当前页面同源
什么是 shortcuts 和 screenshots 字段？
  • shortcuts：定义应用快捷方式，用户长按图标可快速访问特定功能（如"新建帖子"）
  • screenshots：应用截图数组，用于应用安装对话框和应用商店展示

这两个字段是可选的，但能显著提升 PWA 的体验和可发现性。

scope 字段有什么作用？如何正确设置？

scope 定义了 PWA 的导航范围。当用户导航到 scope 之外的 URL 时，会在浏览器标签页（而非 PWA 窗口）中打开。

  • 默认 scope 是 manifest.json 所在的目录
  • scope 不能超出 manifest 自身所在目录（只能限制在自身目录或子目录）
  • 例如 manifest 在 /app/，scope 可以设为 /app/ 或 /app/sub/，但不能设为 /
🔧 相关工具