Statusbar confusion

[seamlink-aalves]

Hi,

With the latest releases of cordova-android 15 and cordova-ios 8 I see that each have started to implement the management of the status bar in each platform and that, for me, signals that the cordova-plugin-statusbar will be deprecated soon. The blog posts mentions that the latest versions do not require the statusbar plugin.

For me, I haven't been able to drop the status bar plugin with the latest releases of each platform. Our apps have been for a long time presented with the webview fully extented to the size of the screen (edge to edge). To be able to do this we have used StatusBarOverlaysWebView preference of the statusbar plugin and manage ourselves the insets.

In cordova-android we have now AndroidEdgeToEdge preference that extends the webview but I have not found a similar preference for iOS, which forces me to keep using the statusbar plugin. I think a similar preference should be implemented for that platform or simply have a single preference for both platforms like EnableEdgeToEdge.

With the new implementations of the statusbar within each respective platform there is no method to set the colour of the text like we had with the statusbar plugin with statusbarLightStyle and styleDefault. I need to be able to manage a proper contrast for the text if my app has light background. In this case I think each platform should implement a single function to do this: something like setColor with a parameter light or dark.

Has anyone faced these issues?

Alexandre Alves

[dpogue]

For iOS, the status bar obeys the viewport-fit option of the <meta name="viewport"> tag.

viewport-fit=cover will make the WebView cover the whole screen and give you access to CSS environment variables to implement your own status bar.

viewport-fit=contain will keep the WebView below the status bar, with the status bar colours being determined by the <meta name="theme-color"> tag.

[seamlink-aalves]

Hi @dpogue

Thank you for your comment. I did not know this. I can confirm that viewport-fit=cover will work on iOS. I was not aware of this.

Nevertheless I will keep my suggestion that both platforms should be implemented the same way. I don't see a reason why we should have different configurations to achieve the same goal in both platforms.

Concerning the definition of the colour of the text of the status bar, I see no way to set it with the new implementation in each platform. If the UI of the App has a dark color and extends bellow the status bar and the OS is in light-mode (which will make the color black) I have no way to set it to a white color.

Are you planning to support this in a future releases of each platform?

[seamlink-aalves]

I did further test for this migration and found other issues that I'd like to share:

For cordova-android 15 I started testing the build of the App with AndroidEdgeToEdge preference and while I see the same result as with StatusBarOverlaysWebView of cordova-plugin-statusbar this will to work correctly on Android version under 15. For these devices the app will not extend under the status bar but worst of all it will keep adding the insets on the top of the App. In summary, I get the status bar, the app UI starts bellow the the status bar and it will also assume the insets as if the app extended bellow the status bar. It also made no difference having the statusbar plugin or not. The result is the same.

After some digging of the cordova-android 15 code I was able to get a better result changing the source code here (https://github.com/apache/cordova-android/blob/c02d1b0331d82c0480a275804f85d134ad201155/framework/src/org/apache/cordova/CordovaActivity.java#L124) from:
canEdgeToEdge = preferences.getBoolean("AndroidEdgeToEdge", false) && Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM;

to:
canEdgeToEdge = preferences.getBoolean("AndroidEdgeToEdge", false);

Also changed here (https://github.com/apache/cordova-android/blob/c02d1b0331d82c0480a275804f85d134ad201155/framework/src/org/apache/cordova/SystemBarPlugin.java#L58) from:
canEdgeToEdge = preferences.getBoolean("AndroidEdgeToEdge", false) && Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM;

to:
canEdgeToEdge = preferences.getBoolean("AndroidEdgeToEdge", false);

While this fixes the insets problem in Android < 15 and does not change the behaviour for Android >= 15, for the first ones it does not solve the overlay of the status bar. For me this would be acceptable and good compromise. I found no way to overlay the statusbar over the webview for android <15.

I will try to make a PR with this change.

For cordova-ios 8 my tests have turned out mixed results. After my last comment I did further tests and while I confirmed that in a blank app I was able to get an App with the webview extended under the statusbar with viewport-fit=cover, with our App, after removing the status bar plugin and having viewport-fit=cover I was unable to get the App to extend under the statusbar. Without the status bar I could only get the desired result by implementing an override to the viewDidLoad function in the ViewController like this:

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
*/

import Cordova
import WebKit

#if compiler(>=6.1)
@objc @implementation
#else
@_objcImplementation
#endif
extension MainViewController {
}

class ViewController: MainViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 11.0, *), let wk = self.webView as? WKWebView {
            wk.scrollView.contentInsetAdjustmentBehavior = .never
        }
    }
}
 

Please note that I searched the complete code of the App to check if there was something manipulating. I found that the cordova inappvrowser also has code related to the manipulation of the statusbar, so I removed it but got the same result with UI of the app starting after the status bar. After removing both the statusbar and the inappbrowser I found no code related to the manipulation of the statusbar except for the platform code.

Finally, I found no way to control the color of the text of the status bar without the status bar plugin. Will this be implemented in the future?

[seamlink-aalves]

Another finding I would like to report is that, with the change included in the PR I did for cordova-android, for Android devices with version <15, I had previously reported that the status bar would start bellow the statusbar and with the correct insets. This is actually not true. It does extend to the full height of the device but the status bar is black or white depending on the theme of the device. If I set the status bar to transparent with window.statusbar.setBackgroundColor("#00000000") it will have the same behaviour in version bellow 15 and higher then 15.