iOS主屏幕网页书签相机异常：触发后按Home键无法再次打开

问题现象 #

仅影响iOS主屏幕保存的网页书签（Web Clip），iOS 16.6、17.3.1版本均存在此问题：

• 包含图片上传字段的表单添加至主屏幕后，点击上传唤起相机界面，此时按Home键返回主屏幕；
• 重新打开书签仅显示表单，无法再次唤起相机，需完全关闭书签进程后重启才能恢复功能；
• Safari/Chrome常规模式下返回会保留相机界面，切换默认浏览器为Chrome可解决但会生成多重复签页。

问题根源 #

iOS主屏幕Web App的后台进程管理机制导致：当从相机界面切回Home键时，Web App进程被挂起，相机相关的File API会话上下文未被正确释放或恢复，后续触发上传时无法重新初始化相机会话。

无外部依赖的修复方案 #

1. 监听页面可见性，重置上传控件 #

利用页面可见性API，在Web App从后台恢复时重置文件输入控件，清除无效的相机会话上下文：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    const fileInput = document.querySelector('input[type="file"]');
    if (fileInput) {
      fileInput.value = '';
      // 若原有事件监听失效，可重新绑定
      const originalHandler = fileInput.onchange;
      if (originalHandler) {
        fileInput.onchange = null;
        fileInput.onchange = originalHandler;
      }
    }
  }
});

2. 挂起前保存状态，加载时重建上下文 #

在Web App即将被后台挂起时记录上传控件配置，页面重新加载时重置控件状态：

let savedFileInputConfig = null;

// 挂起前保存控件信息
window.addEventListener('beforeunload', () => {
  const fileInput = document.querySelector('input[type="file"]');
  if (fileInput) {
    savedFileInputConfig = {
      elementId: fileInput.id,
      acceptType: fileInput.accept
    };
  }
});

// 页面加载时重置控件
window.addEventListener('load', () => {
  if (savedFileInputConfig) {
    const targetInput = document.getElementById(savedFileInputConfig.elementId);
    if (targetInput) {
      targetInput.accept = savedFileInputConfig.acceptType;
      targetInput.value = '';
    }
    savedFileInputConfig = null;
  }
});

3. 用户引导优化（临时方案） #

通过操作提示减少触发问题的场景，在唤起相机前告知用户不要直接按Home键退出：

<input type="file" accept="image/*" capture="camera" onclick="showOperationTip()">
<script>
function showOperationTip() {
  alert('请完成拍照/选图后再返回主屏幕，避免相机功能异常');
}
</script>

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