Making an app installable

Author: Anna Morawska

-

Making an app installable - manifest.json

One of the most powerful functions that PWA offers is the ability to add our web app to a device's home screen. This single feature fills the big gap between native and web apps - from now on our web apps can look and feel like regular native apps.

Surprisingly, it doesn't require a lot of work. We will cover everything in upcoming lessons.

If you look through the official documentation, you find out that there are only a few requirements, which have to be met:

  • The web app is not already installed
  • the user has interacted with the domain for at least 30 seconds
  • codebase includes a web app manifest
  • App is served over HTTPS
  • Has registered a service worker with a fetch event handler

Of course the two first are beyond our control. As a developer, you have to take care of the last three ones. Let's begin with the app manifest.

What is an app manifest?

App manifest is a simple JSON file. If you have previously worked with create-react-app boilerplate you probably stumbled upon this file while browsing through project directories. By default, it is placed in the public directory. Let's open our project and check what is inside.


          {
            "short_name": "React App",
            "name": "Create React App Sample",
            "icons": [
              {
                "src": "favicon.ico",
                "sizes": "64x64 32x32 24x24 16x16",
                "type": "image/x-icon"
              }
            ],
            "start_url": "./index.html",
            "display": "standalone",
            "theme_color": "#000000",
            "background_color": "#ffffff"
          }
        

As you can see, it's a simple JSON object with a key-value pairs which describes our application. It resembles an App Store description of a native app. There are a lot of supported properties which you can use there. A full list can be found here.

Most of the key names are self-explanatory.

  • name and short_name - simple! Short name will be displayed as a label for an icon on the device home screen.
  • icons - is just an array of icons to use. We will use a set of icons of varying sizes to make sure that it will look good on every device.
  • start_url - defines the URL that loads when a user launches the application. It might also be a good idea to use it for analytics purposes, for example by defining UTM

            "start_url": "/?utm_source=homescreen",
          
  • display - I chose thr standalone option to mimic a native app look.
  • background_color - lets us define the background color of the splash screen.

Let's adjust the file already provided by the create-react-app boilerplate to our needs:


          {
            "short_name": "Agenda App",
            "name": "Daily Agenda Progressive Web App",
            "icons": [
              {
                "src": "icons/icon-72x72.png",
                "sizes": "72x72",
                "type": "image/png"
              },
              {
                "src": "icons/icon-96x96.png",
                "sizes": "96x96",
                "type": "image/png"
              },
              {
                "src": "icons/icon-128x128.png",
                "sizes": "128x128",
                "type": "image/png"
              },
              {
                "src": "icons/icon-144x144.png",
                "sizes": "144x144",
                "type": "image/png"
              },
              {
                "src": "icons/icon-152x152.png",
                "sizes": "152x152",
                "type": "image/png"
              },
              {
                "src": "icons/icon-192x192.png",
                "sizes": "192x192",
                "type": "image/png"
              },
              {
                "src": "icons/icon-384x384.png",
                "sizes": "384x384",
                "type": "image/png"
              },
              {
                "src": "icons/icon-512x512.png",
                "sizes": "512x512",
                "type": "image/png"
              }
            ],
            "start_url": "./index.html",
            "display": "standalone",
            "theme_color": "#2EA6E7",
            "background_color": "#2EA6E7"
          }

        

And that's it, out basic app manifest is ready. In the next lesson, we will take care of the two other points on our criteria list - HTTPS and service worker.

Something doesn't work for you? Then check the code for this lesson on our repository!


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author