Nativize Your PWA: Unlock Window Controls Overlay

Unlocking the Power of Progressive Web Apps

The Evolution of PWAs

Progressive Web Apps (PWAs) have been revolutionizing the way we experience web applications for quite some time now. With each passing day, they’re becoming more and more capable, blurring the lines between native apps and web apps. One of the most significant advancements in this space is the ability to install PWAs onto computers or phones, making them feel even more native.

The Importance of Delineation

However, despite their convincing appearance, PWAs always retain a telltale toolbar that distinguishes them from native apps. This distinction is crucial from a security perspective. If a PWA were to masquerade as a native app, it could lead to users interacting with malicious warnings or phishing scams. The toolbar serves as a clear indicator that the app is, in fact, a website in a shell.

Breaking Down Barriers with Window Controls Overlay

Recently, Chromium (the core browser that powers both Chrome and Edge) introduced a game-changing feature called Window Controls Overlay. This allows developers to take control of the title bar area of a web app, overlaying custom content instead of relying on the browser or operating system. With Chrome 99, released in March 2022, developers can now utilize this functionality to create more immersive PWAs.

Creating a More Immersive Experience

In this tutorial, we’ll explore how to harness the power of Window Controls Overlay to create a simple music player PWA that showcases the current track and allows users to change tracks. We’ll cover the following topics:

• How PWAs are changing
• Creating an example PWA
• Creating our manifest
• Setting up the title bar
• Setting up the playlist
• Wiring the audio player
• Final polishing and styling

Creating an Example PWA

Let’s create a PWA that demonstrates the Window Controls Overlay functionality. We’ll use HTML and JavaScript to build a music player that looks and feels like a native app. You can demo the app and clone the source code to get started.

Configuring the Manifest

To enable Window Controls Overlay, we need to create a manifest.json file with the following details:

• theme_color and background_color set to the same light blue
• display_override set to ["window-controls-overlay"]

Setting Up the Title Bar

We’ll use two divs side by side in a row layout to create our title bar. The left div will contain the audio player, and the right div will display the track artist and title.

Setting Up the Playlist

We’ll use the Materialize CSS library to present a card to the user with several tracks in it. We’ll create a container for the playlist and populate it with JavaScript later on.

Wiring the Audio Player

We’ll set up a basic array that contains the filenames of our tracks and retrieve references to our various elements within the DOM. Then, we’ll add the tracks to our playlist container and define a play function that sets the selected track as the track to play.

Final Polishing and Styling

We’ll update our styles to vertically offset the content of our app, change the background color of the audio player to transparent, and offset the audio element so it’s more centered within the title area.

The Future of PWAs

With Window Controls Overlay, the possibilities for PWAs are endless. We can create more immersive experiences that blur the lines between native apps and web apps. The question is, what will you create? Share your thoughts in the comments below!