What does this recipe do?

This recipe helps you serve a "Web App Manifest" file on your website. It creates a redirection.io rule to expose the Web App Manifest file, with all settings correctly configured. This rule will be created in "draft" mode, so you can modify it if necessary before publishing it on your site.

What is a Web App Manifest?

A web app manifest is a JSON-formatted 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, which is usually exposed at the site's root at the address /website.manifest, is used by browsers to provide website visitors with a user experience similar to that of an application (mobile or desktop). For example, the manifest file can be used to add the website to the user's home screen, customize the browser's user interface, provide offline access to the website, set up notifications, etc.

For example, here is an excerpt from the "Web App Manifest" file for the redirection.io website:

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

This file provides the web browser with several pieces of information about the website and how to use it outside the browser, much like a native application. It includes design information, 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 how the website is integrated into the browser's user interface:

Should my website serve a Web App Manifest?

If you want to offer your users an immersive experience, you should consider serving a Web App Manifest file on your website. It's not a very complicated step and involves no risk. Furthermore, this file can help you customize your website's display in the browser, add it to the user's home screen, and provide offline access to the website. 

In any case, 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. In short, there is generally no reason to go without a Web App Manifest.

What information is shared in a Web App Manifest?

Various sources provide a complete reference on the Web App Manifest file and its properties, such as the Mozilla Developer Network. Here is a list of the most common properties found in a Web App Manifest file:

• name: The name of the web application.
• short_name: A short name for the web application. It should generally 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 be used for the web application.
• theme_color: The color of the browser's user interface when the web application is launched.
• background_color: The color of the splash screen when the web application is launched.
• display: The display mode for 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 app can navigate to.
• orientation: The default orientation for the web application (e.g., portrait, landscape).
• related_applications: A list of related applications that provide similar functionality to the web application, such as native apps.

The great thing is that defining a Web App Manifest file is a fairly simple task, as it's just a JSON file that you need to create and serve on your website. The hardest part is defining the right properties to offer the best experience to your users.

We offer a free Web App Manifest validator to check the compliance of your manifest file.

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

Installing this recipe on your website requires the following steps:

1. Configure the Web App Manifest file path: Define the path to 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 host the file in a subfolder, but it is preferable to use the .webmanifest extension.
2. Define the manifest content: In the "Web App Manifest content" field, you can define the content to be served for the Web App Manifest file. This content must be a valid JSON object that contains the properties you want to define for your web application. You can use the MDN documentation as a reference to define the properties of the Web App Manifest file.
3. Click "Install on my website": Install the recipe to create two rules in "draft" mode: the first one to expose the manifest file, and the second one to insert a <link> tag into your web pages to inform the browser of the manifest's existence.
4. Publish the rules: after reviewing both rules, you can publish them to your site. The manifest will be functional a few seconds later.