UD5工具箱
操作步骤
1选择预设模板
在「快速预设模板」区域，根据应用场景选择合适的模板。经典横幅适合内容型网站，不打断用户阅读；居中弹窗适合电商或工具类网站，需要强引导；顶部通知适合博客或新闻类网站；iOS 引导则专门用于 Safari 浏览器的引导场景。选择模板后，下方的预设参数会自动填充，开发者可以在此基础上进一步调整。建议初次使用时逐一尝试每种模板，通过实时预览对比效果后再做决定。
2配置提示内容
在「提示内容设置」区域填写安装提示的文案信息。「提示标题」是用户看到的第一行文字，建议简洁有力，如「安装我们的应用」或「获取更好的体验」。「安装按钮文字」默认为「安装」，可改为「立即安装」「免费添加」等更具行动力的文案。「提示描述」用于补充说明安装的好处，如「支持离线访问，加载更快」。「应用名称」和「应用图标文字」分别用于展示应用名称和图标上的缩写文字，建议与 manifest.json 中的配置保持一致。
3设置触发条件
在「触发条件设置」区域选择触发方式并配置相关参数。推荐使用「延迟触发」或「滚动触发」作为默认选项——延迟触发设置 3 至 5 秒的等待时间，给用户浏览页面的机会；滚动触发设置 30% 至 50% 的滚动深度，表明用户对内容感兴趣。如果选择「访问次数触发」，建议设置最小访问次数为 2 至 3 次，针对回头客展示提示。「冷却时间」建议设置为 24 至 48 小时，避免频繁打扰已关闭提示的用户。设为 0 则在同一会话内关闭后不再显示。
4调整外观样式
在「外观与位置」区域定制安装提示的视觉风格。选择与网站品牌色一致的主题色，确保安装提示融入整体设计。调整按钮圆角以匹配现有的 UI 风格——扁平化设计适合较小的圆角（4 至 8px），圆润风格可设置较大的圆角（16 至 24px）。根据需要开启或关闭关闭按钮、应用图标和动画效果。关闭按钮的开启是推荐做法，它尊重用户的选择权，避免强制感。动画效果建议保持开启，让提示的出现和消失更加自然。
5预览并验证效果
在「实时预览」区域检查安装提示的最终效果。预览模拟了手机浏览器的显示环境，可以直观看到提示的位置、大小、颜色和文案。如果使用了触发条件，可以在预览中模拟触发效果。确认效果满意后，点击「复制代码」按钮将生成的 JavaScript 代码复制到剪贴板，或点击「下载 .js 文件」保存为独立文件。建议在复制代码后，先在测试环境中验证功能正常，再部署到生产环境。
6集成到项目
将生成的代码保存为 pwa-install.js 文件，在 HTML 页面中通过 script 标签引入。确保页面已注册 Service Worker 且配置了有效的 manifest.json 文件。如果尚未配置，可参考工具页面提供的「Manifest.json 配置参考」区域的示例。引入代码后，在支持 A2HS 的浏览器中访问页面，即可看到自定义的安装提示。建议在 Chrome DevTools 的 Application 面板中检查 Service Worker 状态和 manifest.json 配置，确保所有前置条件均满足。
7诊断与调试
使用工具内置的「PWA 状态检测」功能检查当前网站的配置状态。检测结果会显示 Service Worker、manifest.json、安装状态和 A2HS 支持情况。如果检测到问题，根据提示信息进行修复。常见问题包括：Service Worker 未注册（需检查 sw.js 路径和注册代码）、manifest.json 缺少必要字段（需补充 name、icons、start_url 等）、页面未通过 HTTPS 访问（localhost 除外）。修复后重新检测，确认所有项目均显示正常状态后再进行生产环境部署。