Status bar #850
Status bar #850
Conversation
| import { Component } from 'react'; | ||
|
|
||
|
|
||
| const {head} = document |
There was a problem hiding this comment.
This needs to be able to run in a server-side context too. Use canUseDOM guard as done elsewhere
|
|
||
|
|
||
| function getMetaTag(attrName) { | ||
| const htmlCollection = head.getElementsByTagName('meta') |
There was a problem hiding this comment.
No need to collect all the meta tags when all you need is something like
document.querySelector(`meta[name=${attrName}]`)
There was a problem hiding this comment.
Good trick, thank you! :-) Fixed.
| } | ||
|
|
||
| function setAppleMobileWebAppCapable() { | ||
| getMetaTag('apple-mobile-web-app-capable').content = |
There was a problem hiding this comment.
Setting apple-mobile-web-app-capable is problematic (it's basically a broken feature), which is why most web apps do not set it.
There was a problem hiding this comment.
I've used it because seems Apple docs say it's needed to enable the apple-mobile-web-app-status-bar-style meta tag and make it works. Do you know of any other alternative?
| static setBarStyle() {} | ||
| static setHidden() {} | ||
| static get currentHeight() { | ||
| const {availHeight, height} = screen |
| static setBarStyle(style, animated) { | ||
| if(style === 'light-content') style = 'black' | ||
|
|
||
| if(!['black', 'black-translucent', 'default'].includes(style)) return |
There was a problem hiding this comment.
includes is not polyfilled and it's not necessary to create an array to perform this check
There was a problem hiding this comment.
I'm used to use includes(), but it's ok for me to change that. Done.
|
You need to run |
Fixed |
There was a problem hiding this comment.
I'm not sure that all of this is particularly useful. Perhaps only keep the theme color for apps not using a service worker / manifest or wanting to customize the tab bar color for mobile chrome.
The Apple web app stuff is broken in Safari. And the translucent setting in native is Android only, but here it's iOS Safari only. I think that can be removed.
I only needed the color theme just for aesthetics, since I knew that Chrome supported the change of the navigation bar it I though it could be a good replacement to the Android and iOS support to change status bar color. I tried to implement the other things just to don't have the API incomplete.
Lol...
Platform dependent options are noop for the ones that doesn't have an alternative, but if we can have some way to implement some behaviour available in just some of the platforms instead of all of them, I don't see why we shouldn't add it as far as the API is the same... In fact, |
|
Thanks for this, but at this stage I'm going to close it for the reasons previously mentioned. |
|
It's your project and your decission, but it's not fair. I've investigated about how to implement this and filled all the possible behaviour, and also fixed the problems that you showed up. Maybe it's not too much useful, but improve apps eyecandy and more important implement a missing API, I think this is enough reason to accept it. |
|
You didn't respond to requests for further changes, and unfortunately Safari's web app features currently have bugs that you can't do anything about. These settings are meant to be defined in an app manifest file on web now, that's the expectation for PWAs. |
|
You've mentioned using a PWA manifest -- I assume that's for mobile safari and mobile chrome. What I'm not seeing is anything about an identical looking purely front end polyfill for desktop browsers. Philosophically, if we can make a button that looks like a button, or other widgets that look on web like they look on mobile, I don't see why we can't have a status bar that looks like a mobile statusbar, with the handful of customization that the mobile one has (mostly color). I don't know if this user's solution is correct, I just feel like this polyfill is missing. |
|
There's no value in creating a fake status bar for desktop. No apps want or need that. Apps should feel native to their host environment |
Implement
StatusBarcomponent instead of being a noop. This allow to set backgroundColor as navigation bar color in Chrome for Android, and all the other props and static functions with their iOS equivalents by injecting and updating theirmetatags.