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

Question

正在用 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.

的任何更改

对此有什么想法吗？

Answer 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'
}

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

iOS 15.1 safari PWA statusbar color stays green despite changes in index.html and manifest.json

ios

ionic-framework

progressive-web-apps

capacitor