iOS 15.1 Safari PWA修改index.html和manifest后状态栏仍为绿色

1. 修正meta标签配置 #

首先确认apple-mobile-web-app-status-bar-style属性拼写正确，你之前写的black-transculent为错误拼写，正确值为black-translucent，拼写错误会直接导致属性失效。同时补充以下两个必备meta标签：

<!-- 强制状态栏半透明模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 适配刘海屏安全区域，保证状态栏样式生效 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

iOS 15+新增了meta标签版theme-color支持，优先级高于manifest.json中的配置，仅修改manifest文件不会生效，需要在HTML头部新增对应配置：

<!-- 浅色模式下状态栏背景为白色 -->
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
<!-- 如需适配暗黑模式可补充以下配置，不需要可删除 -->
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

2. 彻底清理PWA独立缓存 #

仅清理Safari普通缓存无效，iOS会为添加到主屏幕的PWA单独存储缓存数据，按以下步骤操作：

• 删除所有已添加到主屏幕的该应用快捷方式
• 进入【设置】→【Safari浏览器】→【高级】→【网站数据】，搜索你的PWA域名，删除对应所有站点数据
• 重启Safari后重新访问站点，再次添加到主屏幕测试

3. 检查Capacitor原生配置（混合打包场景适用） #

如果你的应用走Capacitor原生打包而非纯网页PWA，需要检查capacitor.config.ts配置文件中的iOS相关配置：

ios: {
  statusBarStyle: 'DEFAULT',
  statusBarBackgroundColor: '#FFFFFF'
}

修改后执行npx cap sync ios同步配置到iOS项目，再重新构建生产包测试。

4. 兜底兼容方案 #

black-translucent模式下状态栏为半透明效果，会透出页面最顶部的背景色，若以上配置都生效后仍有异常，直接给HTML根元素、body元素或者页面顶部固定导航栏设置#FFFFFF背景色，即可强制状态栏透出白色。

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