---
title: Web App Manifest
slug: Web/Manifest
tags:
  - App
  - Manifest
  - Reference
  - Web
translation_of: Web/Manifest
---
<p>O manifesto do aplicativo web fornece informações sobre uma aplicação (como nome, autor, icone, e descrição) em um arquivo de texto. O propósito do manifesto é instalar aplicações web na tela inicial de um aparelho, propiciando aos usuários um acesso mais rápido e uma experiência enriquecida.</p>

<p>Os manifestos dos aplicativos web fazem parte de um acervo de tecnologias de rede chamadas <a href="/pt-PT/docs/Web/Apps/Progressiva">aplicativos web progressivos</a>, sendo estes aplicativos web que podem ser instalados na tela inicial de um aparelho sem obrigar um usuário a passar por uma loja de aplicativos, dispondo também de outros superpoderes como estar disponíveis offline e apresentando aos usuários notificações push quando houverem mudanças de conteúdo do aplicativo.</p>

<div class="hidden">
<p>Can PWA manifest contain comments?</p>

<p>It is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON">JSON</a>-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
</div>

<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Implementando um manifesto</h2>

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

<pre class="brush: html">&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</pre>

<div class="note">
<p><strong>Note</strong>: A extensão <code>.webmanifest</code> está especificada na sessão de <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> da especificação, mas no geral os navegadores suportam manifestos em outras extensões apropriadas como <code>.json</code></p>
</div>

<div class="note">
<p><strong>Note</strong>: Se o manifesto precisa de credenciais para ser buscado, você <a href="https://github.com/w3c/manifest/issues/186#issuecomment-43939505">deve</a> adicionar o atributo <a href="/en-US/docs/Web/HTML/CORS_settings_attributes"><code>crossorigin</code></a> mesmo que o arquivo de manifesto esteja na mesma origem da página atual.</p>
</div>

<h2 id="Exemplo_de_manifesto">Exemplo de manifesto</h2>

<pre class="brush: json">{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>#fff<span class="pl-pds">"</span></span>,
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}</pre>

<h2 id="Métodos">Métodos</h2>

<p>Manifest can contain the following keys:</p>

<p>{{ListSubpages("/en-US/docs/Web/Manifest")}}</p>

<h3 id="background_color">background_color</h3>

<p>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.</p>

<pre class="brush: json">"background_color": "red"</pre>

<div class="note">
<p><strong>Note</strong>: O membro <code>background_color</code> tem o único intuito de melhorar a experiência de usuário enquanto o site apontado está carregando, e não deve ser usado pelo agente de usuário como o {{cssxref("background-color", "background color")}}  quando a folha de estilo do aplicativo web progressivo (PWA) estiver disponível.</p>
</div>

<h3 id="description">description</h3>

<p>Fornece uma descrição geral do que a aplicação faz.</p>

<pre class="brush: json">"description": "O aplicativo que ajuda você a encontrar a melhor comida na cidade!"</pre>

<h3 id="dir">dir</h3>

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

<pre class="brush: json" dir="rtl">"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"</pre>

<p>Pode ter um dos valores a seguir:</p>

<ul>
 <li><code>ltr</code> (left-to-right)</li>
 <li><code>rtl</code> (right-to-left)</li>
 <li><code>auto</code> (hints to the browser to use the Unicode bidirectional algorithm to make a best guess about the text's direction.)</li>
</ul>

<div class="note">
<p><strong>Note</strong>: When the value is omitted, it defaults to <code>auto</code>.</p>
</div>

<h3 id="display">display</h3>

<p>Define o modo de exibição preferido do desenvolvedor para a aplicação.</p>

<pre class="brush: json">"display": "standalone"</pre>

<p>Valid values are:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Member</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>sizes</code></td>
   <td>A string containing space-separated image dimensions. </td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>The path to the image file. If <code>src</code> is a relative URL, the base URL will be the URL of the manifest.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>A hint as to the media type of the image. The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.</td>
  </tr>
  <tr>
   <td><code>purpose</code></td>
   <td>
    <p>Defines the purpose of the image, for example that the image is intended to serve some special purpose in the context of the host OS (i.e., for better integration).</p>

    <p>The <a href="https://w3c.github.io/manifest/#purpose-member">purpose member</a> can have the following values:</p>

    <ul>
     <li>"<strong>badge</strong>": A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon.</li>
     <li>"<strong>maskable</strong>": The image is designed with <a href="https://w3c.github.io/manifest/#icon-masks">icon masks and safe zone</a> in mind, such that any part of the image that is outside the safe zone can safely be ignored and masked away by the user agent.</li>
     <li>"<strong>any</strong>": The user agent is free to display the icon in any context (this is the default value).</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note</strong>: You can selectively apply CSS to your app based on the display mode, using the <a href="/docs/Web/CSS/@media/display-mode">display-mode</a> media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon.</p>
</div>

<h3 id="icons">icons</h3>

<p>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 <abbr title="operating system">OS</abbr>'s task switcher and/or system preferences.</p>

<pre class="brush: json">"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"
  }
]</pre>

<p>Objetos de imagens podem conter os seguintes valores:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Member</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>sizes</code></td>
   <td>A string containing space-separated image dimensions. </td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>The path to the image file.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>A hint as to the media type of the image.The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.</td>
  </tr>
 </tbody>
</table>

<h3 id="lang">lang</h3>

<p>Specifies the primary language for the values in the <code>name</code> and <code>short_name</code> members. This value is a string containing a single language tag.</p>

<pre class="brush: json">"lang": "en-US"</pre>

<h3 id="name">name</h3>

<p>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.</p>

<pre class="brush: json">"name": "Google I/O 2015" </pre>

<h3 id="orientation">orientation</h3>

<p>Defines the default orientation for all the web application's top level {{Glossary("Browsing context", "browsing contexts")}}.</p>

<pre class="brush: json"><code>​​"orientation": "portrait-primary"</code></pre>

<p>Orientation pode ser um dos seguintes valores:</p>

<ul>
 <li><code>any</code></li>
 <li><code>natural</code></li>
 <li><code>landscape</code></li>
 <li><code>landscape-primary</code></li>
 <li><code>landscape-secondary</code></li>
 <li><code>portrait</code></li>
 <li><code>portrait-primary</code></li>
 <li><code>portrait-secondary</code></li>
</ul>

<h3 id="prefer_related_applications">prefer_related_applications</h3>

<p>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.</p>

<pre class="brush: json">"prefer_related_applications": false</pre>

<div class="note">
<p><strong>Note</strong>: If omitted, the value defaults to <code>false</code>.</p>
</div>

<h3 id="related_applications">related_applications</h3>

<p>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.</p>

<pre class="brush: json">"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"
  }]</pre>

<p>Application objects may contain the following values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Member</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>platform</code></td>
   <td>The platform on which the application can be found.</td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>The URL at which the application can be found.</td>
  </tr>
  <tr>
   <td><code>id</code></td>
   <td>The ID used to represent the application on the specified platform.</td>
  </tr>
 </tbody>
</table>

<h3 id="scope">scope</h3>

<p>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. </p>

<pre class="brush: json">"scope": "/myapp/"</pre>

<h3 id="short_name">short_name</h3>

<p>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.</p>

<pre class="brush: json">"short_name": "I/O 2015"
</pre>

<h3 id="start_url">start_url</h3>

<p>Specifies the URL that loads when a user launches the application from a device. </p>

<pre class="brush: json">"start_url": "./?utm_source=web_app_manifest"</pre>

<h3 id="theme_color">theme_color</h3>

<p>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).  </p>

<pre class="brush: json">"theme_color": "aliceblue"</pre>

<h2 id="Splash_screens">Splash screens</h2>

<p>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: <code>name</code>, <code>background_color</code>, and the icon in the <code>icons</code> array that is closest to 128dpi for the device.</p>

<h2 id="Mime_type">Mime type</h2>

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

<h2 id="Especificação">Especificação</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('Manifest')}}</td>
   <td>{{Spec2('Manifest')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(39.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>32.0</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(39.0)}}</td>
  </tr>
  <tr>
   <td><code>background_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(46.0)}} [1]</td>
  </tr>
  <tr>
   <td><code>theme_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(46.0)}} [1]</td>
  </tr>
  <tr>
   <td><code>icons</code>, <code>name</code>, <code>short_name</code>, and <code>theme_color</code> used for <a href="https://support.mozilla.org/en-US/kb/how-add-shortcut-website-android">Add to home screen</a> feature.</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(53)}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>display</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(47)}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(39.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Does not support <code>lang</code> or <code>scope</code>.</p>

<p>[2] The <code>icons</code>, <code>name</code>, <code>short_name</code>, and <code>theme_color</code> fields of the <a href="/en-US/docs/Web/Manifest">Web App Manifest</a> (if present) can now be as the source of the homescreen/apps window icons, apps window title, homescreen icon title, and apps window color (respectively) for "Add to home screen" (Firefox Mobile only; see {{bug("1234558")}}). Experimental support for this feature is available behind the boolean flag <code>manifest.install.enabled</code> in <code>about:config</code>.</p>

<p>[3] Only the <code>browser</code> value of <code>display</code> was supported in 47. <code>minimal-ui</code>, <code>standalone</code> , and <code>fullscreen</code> were added in Firefox 57.</p>