Changing The iOS Status Bar Of Your Progressive Web App
Even after making your PWA web app capable (standalone) you may notice that its full-screen version still does not fully resemble a native iOS application. One of the most obvious differences that remains is often that the status bar at the top of the screen (which usually displays the time and battery status) appears completely black and does not show any text or symbols. Take a look at Instagram’s PWA, for example:
In order to change the iOS status bar of your progressive web app, you must use the apple-mobile-web-app-status-bar-style meta tag. Unfortunately, the number of ways to customize the status bar is fairly limited, but Apple offers three distinct settings: default, black, and black-translucent.
default
The default setting has a white background with black text and symbols.
<meta name="apple-mobile-web-app-status-bar-style" content="default">black
The black setting has a black background and black text and symbols, making it appear completely black. If you do not use the status bar meta tag, this is what status bar will look like.
<meta name="apple-mobile-web-app-status-bar-style" content="black">black-translucent
The black-translucent setting has white text and symbols, and will take the same background color as the body of your web app. Unfortunately, the text color will remain white even if you use a light background color.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Appscope is the leading directory for progressive web apps and offers a collection of the best web-based applications that are compatible with all devices.
