Progressive Web Apps (PWA) are starting to pick up a lot of momentum and are getting adopted by major tech companies including Uber, Twitter, Instagram and many others. While developing my first PWA, supporting cross-platform custom status bar proved to be a bigger challenge than expected. This is a quick post to help others quickly customize PWA status bar that works across both Android and iOS devices, including devices with the notch.
In order to change the status bar at the top of the screen (which usually displays the time and battery status) of your progressive web app, you must use the configure few properties for your app to provide complete native look and feel.
Android
Chrome, Firefox and Opera allow you to define the colour of the status bar using the meta tags.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#014473">
Example:
iOS
Unfortunately, the number of ways to customize the status bar for iOS devices are fairly limited, but Apple offers the apple-mobile-web-app-status-bar-style meta tag to customize status bar. There are three distinct settings available: default, black, and black-translucent. The default value is default.
This meta tag has no effect unless you add apple-apple-mobile-web-app-capable meta tag.
<meta name="apple-mobile-web-app-capable" content="yes">
Default
The default setting has a white background with black text and symbols.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Example:
Black
The black setting has a black background and black text and symbols, making it appear completely black.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Example:
Black-translucent
The black-translucent setting has white text and symbols. It will take the same background colour as the body of your web app.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
body {
background-color: #014473;
}
Example:
Top comments (0)