尽管 index.html 和 manifest.json 发生变化，iOS 15.1 safari PWA 状态栏颜色仍保持绿色答案

【问题标题】：iOS 15.1 safari PWA statusbar color stays green despite changes in index.html and manifest.json尽管 index.html 和 manifest.json 发生变化，iOS 15.1 safari PWA 状态栏颜色仍保持绿色
【发布时间】：2021-12-11 15:42:42
【问题描述】：

在使用ionic 和capacitor 构建PWA。我刚刚将我的 iPhone 更新为iOS 15.1。在为生产构建时，我注意到状态栏是绿色的。我将我的apple-mobile-web-app-status-bar-style 更改为black-transculent。再次构建应用，添加到主屏幕，但状态栏仍然是绿色。

我检查了我的manifest.json 文件并注意到theme_color 属性设置为#4DBA87。我查了一下这个颜色，结果发现它和我的状态栏的绿色完全一样。将此颜色更改为#FFFFFF 再次构建应用程序，添加到主屏幕但我的状态栏仍然保持绿色。

我现在有点迷茫了。我确保在每次构建后我都会清除缓存以确保将新构建加载到safari。当我还有iOS 14.7.x 时，状态栏是白色的。我已经在iOS 15.1 上查看了发行说明，但它没有说明html 属性对safari 的更改。

对此有什么想法吗？

【问题讨论】：

标签： ios ionic-framework progressive-web-apps capacitor

【解决方案1】：

原来我在vue.config.js 中的pwa 配置设置在我的index.html 中导致了2x <meta name="theme-color" /> 标签。后者是绿色的，这是因为这个标签是硬编码在我的index.html 中的，而vue pwa 插件也生成了这个标签，是最后一个（按顺序排列）用绿色。

我删除了硬编码标签，将vue.config.js 中的themeColor 属性设置为#FFFFFF，现在一切正常。

vue.config.js:

pwa: {
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black-transculent',
    themeColor: '#FFFFFF'
}

【讨论】：