Adjusting the iOS status bar when building PWAs with Bubble
Hey there 👋
Yes, that’s right. bubbleHacks migrated back to Substack! 🥳
So, let’s head right in:
PWAs are en vogue. And Bubble comes with a lot of PWA features and settings right out of the box. But unfortunately, the iOS status bar color is not one of them. That's why I've created a short tutorial on adjusting the iOS status bar when building PWAs with Bubble :)
Bubble editor: https://bubble.io/page?type=page&name=ios_notch&id=bh-examples&tab=tabs-1
Header code:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
CSS code:
<style>
body {
background-color: #058AF7;
}
</style>
Further reading (article from video): https://codeburst.io/progressive-web-apps-customize-status-bar-23c4b2de590f
Some interesting stuff I came across
That’s it. See you in two weeks.
Keep it simple!
Damian