点击PWA快捷方式提示「应用未安装」 关联React HashRouter问题排查

问题解决步骤 #

你遇到的「App Not installed」报错核心是PWA快捷方式的URL不在manifest声明的应用覆盖范围内，或路径解析不兼容React HashRouter的格式，对应修复方法如下：

• 第一步：修正manifest的scope和start_url配置，确保覆盖你的站点路径，示例配置如下：

{
  "name": "skyMusic",
  "start_url": "/skyMusic/",
  "scope": "/skyMusic/",
  // 其余原有配置保持不变
}

• 第二步：调整shortcuts的url字段，删除相对路径前缀./，直接写完整的站点相对路径，修改后的shortcuts配置如下：

"shortcuts": [
    {
      "name": "Open composer",
      "short_name": "Composer",
      "description": "Open the composer page",
      "url": "/skyMusic/#/Composer",
      "icons": [{ "src": "manifestData/composerIcon.png", "sizes": "192x192" }]
    }
  ]

如果要更简洁，在scope配置正确的前提下，也可以直接写"url": "#/Composer"，兼容性同样达标。

• 第三步：验证图标路径可用性，确保https://specy.github.io/skyMusic/manifestData/composerIcon.png可正常访问，图标加载失败也会触发快捷方式异常。
• 第四步：完全卸载已安装的PWA应用，清空浏览器站点缓存后重新安装测试，浏览器会长期缓存旧manifest配置，不卸载重装不会生效。

内容的提问来源于stack exchange，提问作者Specy