React PWA在iOS15 Safari下点击file输入框偶发不唤起选择菜单问题求助

可行修复方案 #

• 放弃通过JS调用.click()触发原生文件选择器的实现，改为将原生<input type="file">固定渲染在DOM中，不使用条件渲染控制其显隐，通过opacity: 0、position: absolute等CSS属性将其透明覆盖在自定义按钮上层，让用户点击时直接触发原生input的交互，避免iOS Safari对非用户直接触发的系统交互做权限拦截。
• 完善input的属性配置，明确声明accept属性限制可选文件类型，若不需要强制调用摄像头不要加capture属性，避免属性配置冲突导致系统无法正确识别文件选择请求。
• 稳定input的DOM引用，React中使用useRef存储input的引用，避免每次组件渲染生成新的引用导致节点交互上下文丢失。
• 新增异常降级逻辑：监听input的点击事件，若点击后1-2秒内未触发change/focus事件，可自动触发一次轻量的上下文重置操作，比如跳转一个同域空白页再立即回跳，无需用户手动删除PWA重新添加即可恢复功能。

现有临时解决方案可证实上下文重置可修复该问题：
看来重置PWA上下文的唯一方法是重启手机、删除应用后重新添加到主屏幕，或者打开一个外部链接

排查思路 #

• 针对可复现问题的用户，开启Safari远程调试能力，复现问题时查看控制台是否有权限类警告，比如非活跃页面触发系统交互被拦截的相关日志。
• 统计受影响用户的操作路径，确认是否均为将PWA放置后台超过一定时长后切回首次点击触发该问题，验证是否为WebKit对后台休眠的PWA冻结了交互信任上下文导致。
• 排查PWA的manifest.json配置，确认display、权限声明等配置是否符合iOS PWA的规范，避免配置项冲突导致系统交互异常。

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