G. site.webmanifest

  • Este archivo sirve para configurar los instaladores de la aplicación.

Explicación de las propiedades

short_name

Nombre corto. Normalmente se despliega en dispositivos móviles. Máximo 20 caracteres.

name

Nombre largo. Normalmente se despliega en computadoras de escritorio. Máximo 30 caracteres.

id

Identificador del archivo de instalación. Normalmente es la ruta del archivo inicial de la app.

start_url

Ruta del archivo inicial de la app.

display

Forma de mostrar la app. El término standalone significa que no se muestra la barra de navegación del navegador web.

theme_color

Color de la barra de estado (en dispositivos móviles) o de título (en computadoras de escritorio) de la app.

background_color

Color de fondo de la pantalla desplah en dispositivos móviles.

description

Describe el propósito de la aplicación. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

screenshots

Listado de máximo 8 capturas de pantalla. Aparecen en el cuadro de diálogo que muestra el navegador al instalar la app. Debes incluir al menos una con "form_factor": "wide" y otra con "form_factor": "narrow".

  • El ancho y la altura deben ser de 320 px como mínimo y 3,840 px como máximo.

  • La dimensión máxima no puede ser más de 2.3 veces mayor que la dimensión mínima.

  • Todas las capturas de pantalla con el valor del mismo factor de forma deben tener relaciones de aspecto idénticas.

  • Solo se admiten los formatos de imagen JPEG y PNG.

  • Solo se mostrarán ocho capturas de pantalla. Si se agregan más, el usuario-agente simplemente los ignora.

  • https://web.dev/patterns/web-apps/richer-install-ui?hl=es-419

icons

Listado de íconos en distintas resoluciones para los instaladores de la app. Se selecciona el que se vea mejor según las característocas del dispositivo.

src

Url de la imagen dentro de la app.

sizes

Dimensiones en pixeles de la imagen, anchoxalto.

type

Tipo mime de la imagen.

purpose

Forma en que se usa la imagen.

maskable

La imagen puede recortarse de forma segura para tomar distintas formas, como círculos, gotas, cuadrados con esquinas redondeadas, etc. Normalmente se usa para dispositivos móviles.

any

No se puede asegurar nada sobre la imagen. Normalmente se usa para dispositivos de escritorio.

Normalmente debe proporcionarse un juego de íconos con purpose any y otro juego de íconos con purpose maskable.

form_factor

Orientación de una screenshot.

wide

La screenshot tiene una orientación horizontal. Normalmente la creenshot se usa para dispositivos de escritorio.

narrow

La screenshot tiene una orientación vertical. Normalmente la creenshot se usa para dispositivos móviles.

Debes incluir al menos una screenshot con "form_factor": "wide" y otra con "form_factor": "narrow".

label

Descripción de una screenshot. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

1{
2 "short_name": "PWA",
3 "name": "Ejemplo de PWA",
4 "id": "/index.html",
5 "start_url": "/index.html",
6 "display": "standalone",
7 "theme_color": "#cbc693",
8 "background_color": "#ffffff",
9 "description": "Ejemplos básico de PWA.",
10 "screenshots": [
11 {
12 "src": "/img/screenshot_horizontal.png",
13 "sizes": "1507x777",
14 "type": "image/png",
15 "form_factor": "wide",
16 "label": "PWA Básica"
17 },
18 {
19 "src": "/img/screenshot_vertical.png",
20 "sizes": "591x980",
21 "type": "image/png",
22 "form_factor": "narrow",
23 "label": "PWA Básica (2)"
24 }
25 ],
26 "icons": [
27 {
28 "src": "/img/maskable_icon_x48.png",
29 "sizes": "48x48",
30 "type": "image/png",
31 "purpose": "any"
32 },
33 {
34 "src": "/img/maskable_icon_x72.png",
35 "sizes": "72x72",
36 "type": "image/png",
37 "purpose": "any"
38 },
39 {
40 "src": "/img/maskable_icon_x96.png",
41 "sizes": "96x96",
42 "type": "image/png",
43 "purpose": "any"
44 },
45 {
46 "src": "/img/maskable_icon_x128.png",
47 "sizes": "128x128",
48 "type": "image/png",
49 "purpose": "any"
50 },
51 {
52 "src": "/img/maskable_icon_x192.png",
53 "sizes": "192x192",
54 "type": "image/png",
55 "purpose": "any"
56 },
57 {
58 "src": "/img/maskable_icon_x384.png",
59 "sizes": "384x384",
60 "type": "image/png",
61 "purpose": "any"
62 },
63 {
64 "src": "/img/maskable_icon_x512.png",
65 "sizes": "512x512",
66 "type": "image/png",
67 "purpose": "any"
68 },
69 {
70 "src": "/img/maskable_icon.png",
71 "sizes": "2730x2730",
72 "type": "image/png",
73 "purpose": "any"
74 },
75 {
76 "src": "/img/icono2048.png",
77 "sizes": "2048x2048",
78 "type": "image/png",
79 "purpose": "any"
80 },
81 {
82 "src": "/img/maskable_icon_x48.png",
83 "sizes": "48x48",
84 "type": "image/png",
85 "purpose": "maskable"
86 },
87 {
88 "src": "/img/maskable_icon_x72.png",
89 "sizes": "72x72",
90 "type": "image/png",
91 "purpose": "maskable"
92 },
93 {
94 "src": "/img/maskable_icon_x96.png",
95 "sizes": "96x96",
96 "type": "image/png",
97 "purpose": "maskable"
98 },
99 {
100 "src": "/img/maskable_icon_x128.png",
101 "sizes": "128x128",
102 "type": "image/png",
103 "purpose": "maskable"
104 },
105 {
106 "src": "/img/maskable_icon_x192.png",
107 "sizes": "192x192",
108 "type": "image/png",
109 "purpose": "maskable"
110 },
111 {
112 "src": "/img/maskable_icon_x384.png",
113 "sizes": "384x384",
114 "type": "image/png",
115 "purpose": "maskable"
116 },
117 {
118 "src": "/img/maskable_icon_x512.png",
119 "sizes": "512x512",
120 "type": "image/png",
121 "purpose": "maskable"
122 },
123 {
124 "src": "/img/maskable_icon.png",
125 "sizes": "2730x2730",
126 "type": "image/png",
127 "purpose": "maskable"
128 }
129 ]
130}
skip_previous skip_next