Web App Manifest generator

Provides a short human-readable name for the application.

This is intended for use where there is insufficient space to display the full name of the web application.

"short_name": "SeoChecker"

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

"name": "SeoChecker web app"

Provides a general description of what the web application does.

"description": "The web app that helps developers"

Specifies the primary language for the values in the name and short_name members.

This value is a string containing a single language tag.

"lang": "en_US"

Specifies the URL that loads when a user launches the application from a device.

If given as a relative URL, the base URL will be the URL of the manifest.

"start_url": "/?utm_source=homescreen"

Specify background color using the appropriately named background_color property.

Browser uses this color the instant the web app is launched and the color remains on the screen until the web app's first render

"background_color": "#000000"

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS (e.g., on Android's task switcher, the theme color surrounds the application).

"theme_color": "#e3e3e3"

Specifies the primary text direction, it can help provide the correct display of languages:

• "lrt": left-to-right
• "rtl": right-to-left
• "auto": make a best guess about the text's direction

"dir": "ltr"

Defines the developer's preferred display mode for the web app

• "fullscreen": all of the available display area is used and no user agent chrome is shown
• "standalone": the application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.
• "minimal-ui": The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.
• "browser": The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.

"display": "standalone"

Defines the default orientation for all the web application's top level browsing contexts.

• "any": append portrait-primary, portrait-secondary, landscape-primary and landscape-secondary to orientations.
• "natural": append portrait-primary or landscape-primary to orientations such as the associated current orientation angle is 0.
• "landscape": depending on platform convention, append landscape-primary, or landscape-secondary, or both to orientations.
• "landscape-primary": append landscape-primary to orientation.
• "landscape-secondary": append landscape-secondary to orientation.
• "portrait": depending on platform convention, append portrait-primary, or portrait-secondary, or both to orientations.
• "portrait-primary": append portrait-primary to orientation.
• "portrait-secondary": append portrait-secondary to orientation.

"orientation": "portrait"

Specifies a boolean value that hints for the user agent to indicate to the user that the specified related applications (see below) are available, and recommended over the web application. This should only be used if the related native apps really do offer something that the web application can't do.

If omitted the defaults value is false.

"prefer_related_applications": "false"

Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.

"related_applications":[
  {
   "platform": "play",
   "url": "https://play.google.com/store/apps/details?id=com.example.app1",
   "id": "com.example.app1"
  },
  {
   "platform": "itunes",
   "url":"https://itunes.apple.com/app/example-app1/id123456789"
  }
]

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied.

If the user navigates the application outside the scope, it returns to being a normal web page.

If scope URL is the empty string, then return undefined.

If the scope is a relative URL, the base URL will be the URL of the manifest.

"scope": "/myapp/"

Specifies an array of image objects that can serve as application icons in various contexts.

For example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an OS's task switcher and/or system preferences.

"icons": [
  {
   "src":"icon/icon128x128.png",
   "size":"128x128",
   "type":"image/png"
  },
  {
   "src":"icon/icon144x144.png",
   "size":"144x144",
   "type":"image/png"
  },
  {
   "src":"icon/icon152x152.png",
   "size":"152x152",
   "type":"image/png"
  },
  {
   "src":"icon/icon192x192.png",
   "size":"192x192",
   "type":"image/png"
  },
  {
   "src":"icon/icon48x48.webp",
   "size":"48x48",
   "type":"image/webp"
  },
  {
   "src":"icon/icon.ico",
   "size":"72x72 96x96 128x128 256x256"
  }
]