Changing The iOS Status Bar Of Your Progressive Web App

Appscope
Appscope
May 31, 2018 · 3 min read

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:

Status bar for Instagram’s native iOS app
Status bar for Instagram’s PWA

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

Status bar with “default” setting

The default setting has a white background with black text and symbols.

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

black

Status bar with “black” setting

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

Status bar with “black-translucent” setting

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.

Appscope

The leading directory for high-quality progressive web apps

Appscope

The leading directory for high-quality progressive web apps

Appscope

Written by

Appscope

Appscope

The leading directory for high-quality progressive web apps

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Start a blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store