UD5工具箱
准备工作
在开始使用Web App Manifest生成器之前，请确保你已经准备好以下内容：首先，明确你的PWA应用的基本信息，包括应用名称、短名称、描述等；其次，准备好至少两个尺寸的图标文件，推荐192x192和512x512像素；最后，了解你的应用部署路径，以便正确配置start_url和scope字段。如果你是首次开发PWA，建议先阅读PWA基础知识，了解Manifest文件在整个PWA架构中的作用。
第一步：配置基本信息
打开工具页面后，首先看到的是“基本信息”配置区域。在“应用名称”输入框中填写你的完整应用名称，这个名称会显示在安装确认弹窗和启动画面中，建议不超过45个字符。在“短名称”输入框中填写简短的应用名称，这个名称会显示在主屏幕图标下方，由于空间有限，建议控制在12个字符以内。如果未填写短名称，浏览器可能会截断完整名称来显示。描述字段可以输入应用的简要说明，帮助用户了解应用功能。应用ID字段用于跨域识别同一PWA，如果你的应用部署在多个域名下，可以使用此字段将它们关联起来。语言字段设置应用的默认语言，影响浏览器对内容的处理方式。
第二步：配置URL路径
在“URL配置”区域，首先设置起始URL（start_url）。这是用户点击主屏幕图标时打开的页面地址，通常设置为“/”或“/index.html”。然后设置作用域（scope），这个字段定义了PWA的导航范围。重要规则是start_url必须在scope范围内。例如，如果scope设置为“/app/”，那么start_url必须是“/app/”下的路径。如果不确定如何设置，可以将两者都设置为“/”，这是最简单且兼容性最好的配置方式。工具会自动验证两个字段的配置是否正确，并在发现问题时给出提示。
第三步：设置显示模式
在“显示设置”区域，选择应用的显示模式。对于大多数PWA应用，推荐使用standalone模式，它提供了最接近原生应用的体验，同时保留了必要的系统功能。如果你正在开发游戏或需要完全沉浸式体验的应用，可以选择fullscreen模式。minimal-ui模式适合需要少量浏览器控件的应用。browser模式则保持标准的浏览器标签页行为。屏幕方向配置支持多种选择：any允许应用在任意方向运行，portrait限制为竖屏，landscape限制为横屏。文本方向配置主要影响阿拉伯语、希伯来语等从右到左书写的语言。
第四步：配置颜色主题
在“颜色设置”区域，配置应用的颜色主题。主题颜色（theme_color）会影响浏览器工具栏和PWA窗口标题栏的颜色，建议选择与品牌主色协调的颜色。工具提供了直观的颜色选择器，你可以直接点击选择颜色，或者输入HEX、RGB等格式的颜色值。背景颜色（background_color）用于设置PWA启动画面的背景色，在应用完全加载前显示。建议选择与应用首页背景相近的颜色，这样可以减少启动时的视觉闪烁，提供更平滑的启动体验。两个颜色的配合使用可以打造品牌一致的视觉效果。
第五步：管理应用图标
图标管理是配置过程中最重要的环节之一。首先，点击“添加图标”按钮添加第一个图标配置。在图标路径（src）字段输入图标文件的URL地址，可以是相对路径或绝对URL。在尺寸（sizes）字段输入图标的尺寸，格式为“宽x高”，如“192x192”。类型（type）字段设置图标的MIME类型，PNG格式通常设置为“image/png”。用途（purpose）字段设置图标的用途，“any”表示通用图标，“maskable”表示可适配Android圆形图标的遮罩图标。建议为每个图标同时设置两种用途。如果你需要配置多个尺寸的图标，可以重复添加图标配置。为了简化操作，工具提供了“填充推荐尺寸”功能，点击后会自动添加Google推荐的完整图标尺寸列表，你只需要修改图标路径即可。使用“清空图标”按钮可以删除所有图标配置重新开始。
第六步：设置应用分类
在“分类与其它”区域，为你的应用选择合适的分类。工具提供了15种预设分类供选择，包括商业、教育、娱乐、金融、游戏、健康、生活方式、音乐、新闻、生产力、购物、社交、体育、旅行、工具等。你可以根据应用的实际类型选择一个或多个分类，多个分类之间用英文逗号分隔。正确的分类有助于应用商店和推荐系统更好地理解和展示你的应用。
第七步：预览与导出
完成所有配置后，在右侧的“实时预览”区域查看生成的manifest.json内容。预览区采用语法高亮显示，便于阅读和检查。仔细检查JSON格式是否正确，所有字段是否符合预期。确认无误后，可以点击“下载manifest.json”按钮将文件保存到本地，或者点击“复制JSON”按钮将内容复制到剪贴板。下载的文件可以直接添加到你的Web项目根目录中，然后在HTML的head标签中添加link标签引用即可。
后续步骤
生成manifest.json文件后，还需要完成以下步骤才能让PWA正常工作：首先，将manifest.json文件放置在网站根目录；其次，在所有页面的head标签中添加link标签引用manifest文件，代码为link rel="manifest" href="/manifest.json"；再次，确保网站部署在HTTPS环境下（localhost除外）；最后，建议配置Service Worker以实现离线缓存等PWA核心功能。配置完成后，可以使用Chrome DevTools的Application面板验证Manifest配置是否正确。