UTILS.
100% 浏览器内运行
📱

Web 应用清单生成器(PWA)

生成含图标、主题色和显示模式的有效 PWA web 应用清单(manifest.json),附可直接粘贴的 link rel=manifest 标签。

— 输出将显示在这里 —
— 输出将显示在这里 —

关于此工具

Web 应用清单生成器通过一个简单表单为渐进式 Web 应用(PWA)构建有效的 manifest.json,然后交给你配套的 HTML 标签以放入页面 <head>。一切都在你的浏览器中组装,不上传任何数据——你可以复制 JSON、将其下载为 manifest.json,或复制 link 和 meta 标签。

web 应用清单是让网站能被安装到主屏并像原生应用一样启动的 JSON 文件。本工具组装标准键——name、short_name、description、start_url、scope、display(standalone、fullscreen、minimal-ui 或 browser)、orientation、theme_color、background_color 以及一个 icons 数组——并丢弃你留空的任何字段,使输出保持整洁。你勾选的每个图标尺寸都会成为一个条目,含其 src、sizes 和 type(由文件扩展名推导),可选的 purpose 让你将图标标记为 maskable。结果用 JSON.stringify 以两空格缩进序列化,因此可读且符合标准。

在图标路径中使用 {size} 占位符(例如 /icons/icon-{size}.png),它会被替换为每个尺寸,如 192x192 和 512x512。清单至少应包含 name、start_url、display 模式以及至少 192px 和 512px 图标,这也是此处的默认值。用生成的 <link rel="manifest"> 标签从你的页面引用它,并为浏览器 UI 添加 theme-color meta。

常见问题

什么是 web 应用清单?
它是一个描述你的渐进式 Web 应用的 JSON 文件——其名称、图标、颜色以及应如何启动——使浏览器能提供将其安装到主屏并在类应用窗口中打开的选项。
哪些字段是必需的?
一个可用的清单至少需要 name(或 short_name)、start_url、display 模式以及 192x192 和 512x512 的图标。本生成器默认填充这些;其他字段可选,留空时会被省略。
图标的 'maskable' 是什么意思?
Maskable 图标带有安全内边距,使平台能将其裁剪为圆形、方圆形或圆角方形而不裁掉你的徽标。对于按该安全区设计的图标,将 purpose 设为 'maskable' 或 'any maskable'。
我如何在网站上安装清单?
将 JSON 保存为 manifest.json,上传到你的网站,然后将生成的 <link rel="manifest" href="/manifest.json"> 和 theme-color meta 标签添加到每个页面的 <head> 中。

更多工具