如何在ReactJS Web应用中检测iOS Safari/Chrome是否处于锁定模式

问题背景 #

iOS 17.2系统下，Safari/Chrome浏览器中的Web应用出现IndexedDB无法使用、添加文件无报错直接崩溃的情况，推测是设备开启了锁定模式；但同版本iOS在BrowserStack测试环境中未出现该问题。

锁定模式的前端检测方法 #

由于JavaScript无法直接访问iOS原生的UserDefaults（原生Swift可通过let isLockdownModeEnabled = (UserDefaults.standard.object(forKey: "LDMGlobalEnabled") as? Bool) ?? false判断锁定模式状态，但前端无权限调用），只能通过功能特性检测间接判断：

• 执行IndexedDB测试操作：创建测试数据库，尝试添加一条测试数据，若出现静默失败或页面崩溃，结合iOS 17.2+的版本信息，可高度怀疑设备处于锁定模式
• 组合检测其他受限特性：锁定模式还会限制部分JavaScript API、跨域资源访问、Service Worker等，可同时检测多个受限特性，提升判断准确率

临时应对方案 #

• 给用户明确指引：提示用户前往「iOS设置 > 隐私与安全性 > 锁定模式」检查状态，建议关闭后重试应用
• 兼容降级处理：针对锁定模式环境，提供不依赖IndexedDB的替代存储方案（如localStorage，注意其5MB容量限制）

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