v1 tips for changing iphone statusbar color?

  • I could swear that in previous versions of Quasar, I was able to add this tag to the index.template.html file:

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    and my PWA would have the statusbar color correctly displayed, but it does not seem to work in v1…is there something else I need to do?

  • Has no one ever needed to do this in a PWA with quasar v1?

  • I am also having this trouble, I think is Quasar related because, I have done other projects with vue-cli and the above does work. But strangely in Quasar it doesn’t, maybe someone can help.

  • Whether I add these two lines to the index.template.html file or not makes ZERO difference:

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    Something is broken here. Should I report this as a bug in github, or can someone tell me what I am doing wrong?

  • I think I just found where the bug is. In the manifest section of the pwa in the quasar.conf.js file, the item background_color: is being used to populate content of meta tag apple-mobile-web-app-status-bar-style which it should NOT. We need to both be able to specify a background color AND be able to specify status bar style and they are NOT the same thing.

  • I have a cheap and dirty, non spec compliant workaround for this for now: just place your meta tag directly AFTER the closing </head> tag in the index.template.html file, it will supercede the previous one erroneously created by quasar. I will report this in github.

  • Admin

    Thanks for reporting. Will take care of it @ssuess

  • Thanks @rstoenescu

Log in to reply