Web App Manifest

Manifesto de aplicativos web são implementados em suas páginas HTML usando uma etiqueta de link no cabeçalho do documento:

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

Manifest can contain the following keys:

Define a "cor de fundo" esperada para o website. Este valor repete o que já é disponível no CSS do site, mas pode ser usada por navegadores para desenhar cor de um atalho quando o manifesto estiver disponível antes que a folha de estilo (stylesheet) ter carregado. Isso cria uma transição suave entre a execução do aplicativo e o conteúdo do site.

"background_color": "red"

Fornece uma descrição geral do que a aplicação faz.

"description": "O aplicativo que ajuda você a encontrar a melhor comida na cidade!"

Especifica a direção primário do texto para os membros name, short_name, e description. Junto com o membro lang , ajuda a mostrar corretamente idiomas escritos da direita para esquerda.

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

Pode ter um dos valores a seguir:

• ltr (left-to-right)
• rtl (right-to-left)
• auto (hints to the browser to use the Unicode bidirectional algorithm to make a best guess about the text's direction.)

Define o modo de exibição preferido do desenvolvedor para a aplicação.

"display": "standalone"

Valid values are:

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/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

Objetos de imagens podem conter os seguintes valores:

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"

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": "Google I/O 2015"

Defines the default orientation for all the web application's top level browsing contexts (en-US).

"orientation": "portrait-primary"

Orientation pode ser um dos seguintes valores:

• any
• natural
• landscape
• landscape-primary
• landscape-secondary
• portrait
• portrait-primary
• portrait-secondary

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.

"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"
  }]

Application objects may contain the following values:

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.

"scope": "/myapp/"

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": "I/O 2015"

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

"start_url": "./?utm_source=web_app_manifest"

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": "aliceblue"

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and the icon in the icons array that is closest to 128dpi for the device.

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.