A minimal manifest for creating a PWA

NicolasBrondinBernard

Do you think it's complicated to turn a web application into a "Progressive Web App"? Here's proof of the contrary!

Article published on 12/07/2021, last updated on 10/08/2026

A PWA or Progressive Web App is a particular configuration of a web project that makes it possible to tell browsers that the application can be added to the device's home screen in order to work in a way similar to native mobile applications.

Moving from a classic web application to a PWA involves adding a manifest to the root of the project, allowing a "standardization" of the application's entry points so that the browser can easily know how to launch the application once it has been added to the device's home screen.

What are the benefits?

Creating a PWA confers some significant advantages compared to a classic web application, including:

The ability to appear on the home screen, with an application icon and name
Display in full screen (with or without a status bar)
Access native system APIs in a more "reliable" way
Be launched and used offline

It is important to specify that access to native APIs remains limited to Web APIs (as explained in this article) and that "offline" usage must be configured through the use of Web Workers, which will not be covered in this article.

The minimal manifest

By including this manifest at the root of your web project, your application will be recognized as a basic PWA, and mobile browsers will be able to offer the user the option to "install" it on the phone so it can then be launched in full screen, like a native application.

First, you will need to create a manifest.json file in your project, with the following content (which you will need to adapt to your project):

{
    "short_name": "My Game",
    "name": "My Game, an interactive adventure",
    "icons": [
      {
        "src": "/icons/icons-192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/icons/icons-512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "/",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#000000",
    "description": "This is an example of a pwa manifest"
}

Be careful, for your manifest to be recognized, the final step will consist of linking it to your site through the index.html metadata, as below:

<head>
  ...
  <link rel="manifest" href="/manifest.json">
  ...
</head>

A few clarifications

There are two constraints to respect for your application to be recognized as a PWA (in addition to the steps above):

The project must be a "Single Page Application" (SPA)
Access must be done over HTTPS

Once all the configurations are complete, you will be able to verify that everything has been set up correctly with a PWA tester such as this one!

Balázs Kétyi sur Unsplash

Finished reading this article?

Our newsletter1 email a week to understand it all

Go further

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

No comments yet