Make the PWA installable

4 min readAug 3, 2023

At the end of this article, you will be able to :

define what a web application manifest;
provide the properties that a minimal PWA manifest should provide;
give function of manifest i.e. how manifest properties drive PWA capabilities;
create and validate a web application manifest

So, let’s start 😉!

What is a web application manifest?

A web application manifest (web manifest) is a JSON file that provides information about a progressive web application (PWA). The manifest is used by browsers to display the Progressive Web App in the app list, to provide information about the app to the user, and to allow the app to work offline.

Let’s create a manifest.json/manifest.webmanifest

Creating a manifest involves:

Create a manifest.json or manifest.webmanifest and fill in its properties;
Link it to the HTML of the app to advertise your PWA status :

<link rel="manifest" href="/manifest.json">
or
<link rel="manifest" href="/manifest.webmanifest">

What does a Manifest need 🤔?

To work well, a PWA manifest should include at least the following properties:

name: the name of your PWA ;
short_name: a short name for your PWA, which will be displayed in the browser’s address bar ;
descrition: the description of your PWA ;
lang: the language in which your PWA is executed ;
start_url:: your PWA homepage URL;
scope:what web pages can be viewed (navigation scope) ;
theme_color: default theme color for your PWA ;
background_color: placeholder to show (before stylesheet loads) ;
screenshots: showcase application UI/UX (e.g., for app stores) ;
display: how much of browser UI does user see in app. Possible values are “standalone”, “fullscreen”, and “minimal-ui” ;
categories: hints for stores or app catalogs (examples) ;
icons: array of icon images used in various contexts.

Here is an example of Manifest with its properties👇

{
  "name": "Progressive Web App",
  "short_name": "PWA",
  "description": "A web application manifest (web manifest) is a JSON file that provides information about a progressive web application (PWA). The manifest is used by browsers to display the Progressive Web App in the app list, to provide information about the app to the user, and to allow the app to work offline.",
  "lang": "fr-FR",
  "dir": "auto",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://pwa-example.com/manifest.webmanifest"
  }],
  "prefer_related_applications": true,
  "categories": ["social", "productivity", "news"],
  "share_target": {
    "action": "/share-target/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "PWA News",
      "text": "A web application manifest (web manifest) is a JSON file that provides information about a progressive web application (PWA). The manifest is used by browsers to display the Progressive Web App in the app list, to provide information about the app to the user, and to allow the app to work offline.",
      "url": "https://pwa-example.com/"
    }
  },
  "display_override": [
    "window-controls-overlay"
  ],
  "edge_side_panel": {
    "preferred_width": 496
  },
  "icons": [
    {
      "src": "assets/images/app/android/android-launchericon-512-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/images/app/ios/256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/images/app/ios/16.png",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "theme_color": "#4285f4",
  "background_color": "#dbdad9",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/"
  }

What is a good manifest ?

A good Manifest provides additional properties that help deliver the optimal experience for the user on that device. This can include:

adding recommended members and experimental members :

These are manifest members that are being evaluated for future inclusion, but subject to change. Browser platforms may offer early implementations under a flag for evaluation — but keep in mind that these could change, and be unevenly supported across browsers.

Example: Our sample PWA declares a “url_handlers” member. This is an experimental feature that allows the app to register itself as a launch target when user wishes to open associated URLs. There is now a proposal to replace this with a “handle_links” member instead.

adding properties to unlock new capabilities on device :

The manifest can be used to declare support for using new Web APIs that unlock app access to rich platform hardware and features.

Example: The “share_target” (used with the Web Share API), activates PWA ability to share content with other apps like any other platform-specific app. Watch for Week 2, when we talk about advanced capabilities.