What is a Web App Manifest?

A Web App Manifest is a JSON file that provides metadata about a web application. It contains information such as the application's name, author, background color, and icon. The Web App Manifest file is used by browsers and other user agents to provide a more app-like experience when users visit a website. For example, the manifest file can be used to add the website to the user's home screen, customize the browser's UI, and provide offline access to the website.

For example, here is an extract of the Web App Manifest file for the redirection.io website:

{
  "name": "redirection.io",
  "short_name": "redirection",
  "icons": [
    ...
  ],
  "theme_color": "#1eaaf1",
  "background_color": "#1eaaf1"
}

It provides to the web browser several information about the website and how to use it outside of the browser, like a native application. It also gives some information about the website's design, like the background color or the icon to use when adding the website to the home screen - some browsers even use this information to customize the way the website is integrated the browser's UI:

The redirection.io website displayed on a mobile device

Should my Website serve a Web App Manifest?

If you want to provide a more app-like experience to your users, you should consider serving a Web App Manifest file on your website. This file can help you customize the way your website is displayed in the browser, add it to the user's home screen, and provide offline access to the website. Serving a Web App Manifest file is especially useful if your website is a Progressive Web App (PWA) or if you want to provide a more immersive experience to your users.

At least, adding a Web App Manifest file to your website is a good practice, as it provides useful information to browsers and other user agents about your web application. This can help improve the user experience and make your website more app-like - see it like a bookmark on the user's home screen, with a custom icon and a custom color.

Which information are shared in a Web App Manifest?

Other websites provide a comprehensive reference about the Web App Manifest file and its properties, like the MDN Web Docs. Here is a list of the most common properties that can be found in a Web App Manifest file:

  • name: The name of the web application.
  • short_name: A short name for the web application. Is should usually be less than 12 characters to fit on the user's home screen.
  • description: A description of the web application.
  • icons: An array of icons to use for the web application.
  • theme_color: The color of the browser's UI when the web application is launched.
  • background_color: The color of the splash screen when the web application is launched.
  • display: The display mode of the web application (e.g., fullscreen, standalone, minimal-ui, browser).
  • start_url: The URL to load when the web application is launched.
  • scope: The navigation scope of the web application, i.e., the set of URLs that the web application can navigate to.
  • orientation: The default orientation of the web application (e.g., portrait, landscape).
  • related_applications: A list of related applications that provide functionality similar to the web application, such as native applications.

The cool thing is, defining a Web App Manifest file is a quite simple task, as it is just a JSON file that you have to create and serve on your website. The most difficult part is to define the right properties to provide the best user experience to your users.

What does this redirection.io Recipe?

This recipe is a helper to serve a Web App Manifest file on your website. It will create a redirection.io rule that will serve the Web App Manifest file when a browser requests it, with all the settings correctly configured. This rule will be created in draft mode, so you can review it, change it if needed, and publish it to add the Web App Manifest on your website.

How to install this recipe on my website with redirection.io?

Installing this recipe on your website requires the following steps:

In order to install this recipe, you need to:

  1. Configure the path of the Web App Manifest file: Set the path of the Web App Manifest file on your website. This file is usually named manifest.webmanifest or site.webmanifest. You can use any other name and server the file from a subfolder, but you should rather use the .webmanifest extension.
  2. Define the Content of the Manifest: In the "Web App Manifest content" field, you can define the content to serve for the Web App Manifest file. This content should be a valid JSON object that contains the properties you want to define for your web application. You can use the MDN Web Docs as a reference to define the properties of the Web App Manifest file.
  3. Click on "Install on My Website": Execute the installation process by clicking the "Install on My Website" button. This action will create the associated redirection.io rule in draft mode, so you can review it, change it if needed, and publish it to activate the Web App manifest on your website.

Optionnaly, you may use our Web App Manifest validator to check the validity of your Web App Manifest file.