Progressive Web Apps: Customize Status Bar

Akshay Sharma
codeburst
Published in
3 min readOct 20, 2018

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">
content=”default”

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">
content=”black”

Black-translucent

The black-translucent setting has white text and symbols. It will take the same background colour as the body tag of your web app.

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

CSS

body {
background-color: #014473;
}
content=”black-translucent”

Live Demo

Open the app and click on “Add to Home Screen” — Headlines App

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (1)

What are your thoughts?