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:

Live Demo

Headlines App

References:

Android Support

Safari HTML Reference

Safari Web Content Guide

Demo App - Github