我之前帮好几个开发者排查过类似的iOS PWA空白问题，结合你的场景和manifest配置，大概率是这几个细节出了问题，咱们一步步来解决：

1. 检查start_url和display配置 #

你的manifest里这两个参数可能踩了iOS的兼容性坑：

• start_url路径问题：你用的是"./index.html"，但React是单页应用，而且iOS的PWA对相对路径的解析有时候会出错。建议改成绝对路径"/"，这样不管从哪个路径启动，都会指向根目录的index.html：

  "start_url": "/"
  

• display模式兼容性："fullscreen"模式在iOS Safari上的支持不如"standalone"稳定，后者是PWA最常用的独立窗口模式，iOS对它的适配更好，改成：

  "display": "standalone"
  

2. 修正图标资源和添加iOS专属meta标签 #

iOS的PWA对图标有额外要求，光靠manifest可能不够：

• 你的图标文件名带有空格（比如iOS 192_Trans_True.png），虽然理论上合法，但部分服务器或iOS解析时可能出问题，建议改成无空格的命名，比如iOS_192_Trans_True.png，同时确保这些图标文件确实在项目根目录（和index.html同层级）。
• 在public/index.html里添加iOS专属的apple-touch-icon meta标签，这能确保iOS正确识别图标，同时也有助于PWA的正常加载：

  <link rel="apple-touch-icon" sizes="180x180" href="/iOS_192_Trans_True.png">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 可选，适配状态栏样式 -->
  <meta name="apple-mobile-web-app-title" content="my app name"> <!-- 可选，设置主屏幕显示的标题 -->
  

3. 确保是在生产构建环境测试PWA #

如果你是直接用npm start的开发模式访问IP，然后添加到主屏幕，这大概率会出问题！因为Create React App的开发服务器默认不支持PWA的完整特性（比如Service Worker、manifest的正确解析）。正确的测试步骤是：

1. 执行npm run build生成生产构建包
2. 用静态服务器运行构建后的文件，比如用serve包：

   npm install -g serve
   serve -s build
   

3. 再用iOS Safari访问这个静态服务器的IP地址，然后添加到主屏幕测试。

4. 排查Service Worker缓存问题 #

如果你的项目集成了Service Worker（比如用了PWA模板），可能旧的缓存导致PWA启动失败：

• 先清空Safari的缓存：打开Safari设置 -> 清除历史记录与网站数据
• 或者在构建时，Create React App会自动更新Service Worker的哈希值，确保新的资源被加载
• 也可以暂时移除Service Worker相关代码，测试是否是它导致的空白问题

最后验证步骤 #

修改完以上配置后，按下面的步骤重新测试：

1. 重新构建项目，启动静态服务器
2. 在iOS Safari中访问IP，确认网站正常加载
3. 清空Safari缓存，然后重新添加到主屏幕
4. 打开主屏幕上的应用，查看是否正常显示内容

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