submitted 1 year ago by phareous@lemmy.world to c/voyagerapp@lemmy.world

18 comments fedilink hide all child comments

When I use the app as a Home Screen PWA I can’t see the title bar anymore. This is kindof annoying because it hides the clock. Anybody have any ideas on this? Is it seeing the devs can control?

you are viewing a single comment's thread
view the rest of the comments

[-] revs@feddit.uk 4 points 1 year ago

iOS issue. Not one the dev can control.

However if you use the TestFlight native app, you won’t get this issue.

[-] carobwagoner@lemmy.world 1 points 1 year ago

They can: https://stackoverflow.com/questions/19125074/how-to-change-the-background-color-of-the-ios-status-bar-for-safari-web-apps

[-] tun@lemmy.world 4 points 1 year ago

The answer is almost 10 years old. If you are certain it can fix the issue you should create a PR.

[-] carobwagoner@lemmy.world 1 points 1 year ago* (last edited 1 year ago)

Fail enough. I went and tried the answer without quick luck. After some trial and error, in the simplest working page:

This gets you a status bar with black background and white text:

＜html>
    ＜head >
        ＜meta name="apple-mobile-web-app-capable" content="yes" />
    ＜/head>
    ＜body>
        ＜meta name="theme-color" content="#000">
        ＜p>Testing Status bar: white text text, black background＜/p>
    ＜/body>
＜/html>

This gets you a status bar with white background and black text:

＜html>
    ＜head>
        ＜meta name="apple-mobile-web-app-capable" content="yes" />
    ＜/head>
    ＜body>
        ＜meta name="theme-color" content="#fff">
        ＜p>Testing Status bar: black text, white background＜/p>
    ＜/body>
＜/html>

the important detail is getting the theme inside the body element not the head. Other colors can be used too, for example, a red status bar:

```＜meta name="theme-color" content="#ff0000">``

I don't really have time to apply this in the voyager app and I don't use it either, so I'm not really motivated to do it atm. Just for the sake of it, I've downloaded the code and tried to apply the changes I though it would make it work, but it was not a straight forward fix, so I gave up.

(Sorry for the formatting, the editor keeps removing all of the html tags in the comment)

[-] carobwagoner@lemmy.world 1 points 1 year ago* (last edited 1 year ago)

After some more testing, I discovered that just removing the meta tag apple-mobile-web-app-status-bar-style or setting its value to default, would make it pick the right color for status bar from the meta theme-color.

The meta theme-color is not needed in body, as it works just fine in the head (I was wrong about that part). However, I was going to create a pull request for this small change and decided to look for open related issues in github, and found that the owner is aware of the problem and the possible solutions (, but he refuses to do anything about it claiming that it's an apple bug (he's right, but read bellow) and because the status bar would take screen space, pushing modals to be lower by the size of the status bar and because it works on native app. (https://github.com/aeharding/voyager/issues/44)

I personally don't think it's a big deal to give up that top space for the benefit of the users not users the native app, and I also don't think we can expect a fix from Apple any time soon because the issue has been known for at least 8years according to this: https://developer.apple.com/forums/thread/9819