1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: Web App Manifest (Manifesto da Aplicação da Web)
slug: Web/Manifest
tags:
- Aplicação
- Manifest
- Manifesto
- Referencia
- Web
translation_of: Web/Manifest
---
<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div>
<div>{{SeeCompatTable}}</div>
<p>Manifestos de aplicação da Web são parte de uma coleção de tecnologias da Web chamadas de <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a> (PWAs), que são sites da Web que podem ser instalados num ecrã inicial do dispositivo sem uma loja de aplicações. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular <a href="/en-US/docs/Web/API">Web APIs</a>.</p>
<p>The web app manifest provides information about a web application in a <a href="/en-US/docs/Glossary/JSON">JSON</a> text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).</p>
<div class="hidden">
<p>Can PWA manifest contain comments?<br>
It is a <a href="/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="Membros">Membros</h2>
<p>Web manifests can contain the following keys. Click on each one to link through to more information about it:</p>
<p>{{ListSubpages("/en-US/docs/Web/Manifest")}}</p>
<h2 id="Manifest_exemplo"><em>Manifest</em> exemplo</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": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}]
}</pre>
<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Deploying a manifest</h2>
<p>Web app manifests are deployed in your HTML pages using a {{HTMLElement("link")}} element in the {{HTMLElement("head")}} of a document:</p>
<pre class="brush: html"><link rel="manifest" href="/manifest.webmanifest"></pre>
<div class="note">
<p><strong>Note</strong>: The <code>.webmanifest</code> extension is specified in the <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification (the response of the manifest file should return <code>Content-Type: application/manifest+json</code>). Browsers generally support manifests with other appropriate extensions like <code>.json</code> (<code>Content-Type: application/json</code>).</p>
</div>
<div class="note">
<p><strong>Note</strong>: If the manifest requires credentials to fetch - the <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> attribute must be set to <code>"use-credentials"</code>, even if the manifest file is in the same origin as the current page.</p>
</div>
<ul>
</ul>
<h2 id="Splash_screens">Splash screens</h2>
<p>In Chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. This splashscreen is auto-generated from properties in the web app manifest, specifically:</p>
<ul>
<li><code><a href="/docs/Web/Manifest/name">name</a></code></li>
<li><code><a href="/docs/Web/Manifest/background_color">background_color</a></code></li>
<li>The icon in the <code><a href="/docs/Web/Manifest/icons">icons</a></code> array that is closest to 128dpi for the device.</li>
</ul>
<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ções">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName("Manifest")}}</td>
<td>{{Spec2("Manifest")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
<p>{{Compat("html.manifest")}}</p>
|
