Chapter 5. Look and feel

 

Up until this point in the book, we’ve focused on key features that make up a Progressive Web App (PWA). To create truly engaging applications that delight your users, you need to focus on your PWA’s visual appeal. In this chapter, we’ll explore a few different ways to enhance the look and feel of your PWA including the Add to Home Screen functionality and customization, which prompts users to add your web app to their home screen.

5.1. The web app manifest

A web app manifest file is a simple JSON file that provides useful information about the application (such as its name, author, icon, and description) in a text file. But more specifically, the web app manifest enables a user to install web applications to the home screen of their device and allows you to customize the splash screen, theme colors, and even the URL that’s opened.

But before all that, it’s time to code! Using our sample Progressive Times application, the following listing adds a basic web app manifest file (a manifest.json file) to it.

Listing 5.1. Web app manifest file

5.2. Add to Home Screen

5.3. Advanced Add to Home Screen usage

5.4. Debugging your manifest file

5.5. Summary