[BUG] Color iPhone status bar incorrect when comparing direct browser install and store install #4839

ncpunt · 2024-10-25T06:24:39Z

What happened?

When I install the PWA directly in Safari, the color of the status bar is correct. However, when I install the (PWA packaged) app from the App Store, the status bar is simpy, white.

How do we reproduce the behavior?

Try any color

What do you expect to happen?

Safari install and Store install should yield same theme colors

What environment were you using?

iPhone 12 with iOS 18

Additional context

No response

maiconcarraro · 2024-10-27T17:30:53Z

What you mean by "try any color"? If you can provide exactly what you are referring to, and double check your "All settings" before exporting the iOS package, it may be showing white because of Status bar color field:

ncpunt · 2024-10-28T09:25:56Z

By any color I mean any color except white. My point is that I would expect PWABuilder to pickup the correct color from the manifest.json file.

"theme_color": "#111943"

The browser does this correctly as shown in my example. It would be nice if PWABuilder would use the manifest "theme_color" as its value for "status bar color". In that way the result would be the same.

maiconcarraro · 2024-10-28T13:38:08Z

@ncpunt it does:

PWABuilder/apps/pwabuilder-vscode/src/library/package-utils.ts

Lines 247 to 250 in 9257da1

    
           splashColor: manifest.background_color || "#ffffff", 
        
           progressBarColor: manifest.theme_color || "#000000", 
        
           statusBarColor: 
        
             manifest.theme_color || manifest.background_color || "#ffffff",

did you update your manifest after generating the ios project? if you can share your url for debug,

as example, if you try spotify link it automatically sets the colors:

ncpunt · 2024-10-28T16:37:47Z

Yes, it picks the color up from the manifest, but it does not apply it.

I went through the whole process again. Below the iOS Package settings.

En here the result. Still white status bar.

maiconcarraro · 2024-10-28T16:57:50Z

@ncpunt got it, I don't have full context on this setting, I did see in the code it may have a different behavior based on adaptiveUIStyle flag, if you check your Settings.swift, can try to disable it?

cc @khmyznikov in case you know what is

ncpunt · 2024-10-29T08:18:01Z

I tried both adaptiveUIStyle and overrideStatusBar, without the desired effect.

let adaptiveUIStyle = false /*true*/     // iOS 15+ only. Change app theme on the fly to dark/light related to WebView background color.
let overrideStatusBar = true  /*false*/  // iOS 13-14 only. if you don't support dark/light system theme.

microsoft-github-policy-service · 2024-11-07T10:30:21Z