第一步:选择 client_mode 模式
打开工具页面后,首先在左侧配置面板中找到 client_mode 下拉菜单。工具默认选中 focus-existing 模式。根据你的 PWA 应用需求选择合适的模式:如果希望用户再次启动应用时回到当前工作界面,选择 focus-existing;如果需要应用响应不同的 URL 请求(如深层链接),选择 navigate-new;如果希望始终打开新窗口,选择 navigate-new;如果希望浏览器自动判断,选择 auto。每次切换模式后,观察桌面模拟器顶部的状态标签变化,确认当前生效的模式。
第二步:设置 PWA 初始状态
在 client_mode 下方,你会看到 PWA 初始状态的切换开关。默认状态下"PWA 窗口已打开"处于开启状态,模拟器中的 PWA 窗口会显示为已打开。如果你需要测试 PWA 窗口未打开时的启动行为,可以关闭该开关。同时,"PWA 窗口已聚焦"开关控制窗口是否处于焦点状态。这两个状态的组合可以覆盖四种典型的启动场景:窗口不存在、窗口存在但未聚焦、窗口存在且已聚焦。建议逐一测试每种组合,确保配置在所有场景下都能正确工作。
第三步:配置 route_to 高级选项(可选)
如果默认的 client_mode 无法满足你的需求,可以展开"高级:route_to 配置"区域。route_to 允许你针对不同启动来源设置差异化的处理策略。选择 desired 的 route_to 值:existing-client 路由到现有客户端、new-client 创建新客户端、existing-client-navigate 路由并导航。你还可以通过 launching_from 下拉菜单选择特定的启动来源(如 share-target),并为该来源单独配置 route_to 行为。如果不使用 route_to,保持默认的"不使用 route_to"选项即可。
第四步:触发启动模拟
在配置面板的"模拟启动场景"区域,选择一种启动场景并点击对应的按钮。外部链接启动按钮模拟用户从外部网页点击 PWA scope 内链接的行为。分享目标按钮模拟通过 Web Share Target 接收分享数据的场景。浏览器导航按钮模拟用户在地址栏输入 PWA URL 的行为。点击按钮后,观察右侧桌面模拟器的窗口状态变化,以及底部行为日志中记录的执行过程。如果需要重新测试,点击"重置模拟环境"按钮恢复初始状态。
第五步:查看行为日志
每次模拟操作完成后,底部行为日志区域会自动更新。日志以时间序列方式展示操作的完整过程,包括:模拟器就绪状态、当前生效的 client_mode、PWA 窗口的初始状态、启动事件的触发来源以及窗口操作的执行结果。通过分析日志,你可以确认配置是否产生了预期的行为。例如,当 client_mode 为 focus-existing 且 PWA 窗口已打开时,日志应显示窗口被聚焦而非新建。如果行为不符合预期,返回配置面板调整参数后重新模拟。
第六步:生成并复制 Manifest 代码
完成所有配置验证后,页面底部会自动显示"生成的 Manifest 配置"区域。该区域包含与你当前配置完全对应的 manifest.json 代码片段,包括 name、short_name、start_url、scope、display 和 launch_handler 字段。如果你配置了 route_to,代码中也会包含相应的高级路由配置。点击"复制代码"按钮,将配置代码复制到剪贴板,然后粘贴到你项目的 manifest.json 文件中即可生效。建议在实际部署前,使用 Chrome DevTools 的 Application 面板验证 manifest 的加载和解析是否正确。
进阶技巧:多模式对比测试
为了全面验证你的 Launch Handler 配置,建议采用对比测试策略。首先固定 PWA 初始状态为"已打开且未聚焦",然后依次切换四种 client_mode,分别触发三种启动场景,记录每次的窗口行为结果。接着将初始状态改为"PWA 窗口不存在",重复上述测试。通过这种矩阵式的测试方法,你可以确保配置在所有可能的用户场景下都能产生正确的行为。特别注意移动端的表现差异,因为移动设备通常只允许单实例运行,navigate-new 模式在移动端可能不会创建新窗口。
注意事项
使用本工具时请注意以下几点。首先,本工具仅模拟 Launch Handler API 的行为逻辑,实际运行效果可能因浏览器版本和操作系统差异而有所不同,建议最终在真实 PWA 环境中进行验证。其次,route_to 配置属于较新的 API 特性,不同浏览器的支持程度可能存在差异,使用前请查阅最新的浏览器兼容性数据。最后,本工具生成的 manifest 配置代码中的 name、short_name 等字段为示例值,实际使用时请根据你的应用信息进行修改。工具的模拟结果仅供参考,不能完全替代真实环境的测试。
UD5工具箱