IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

El manifiesto de aplicaciones web proporciona información sobre una aplicación (como nombre, autor, icono y descripción) en un documento simplificado. Su principal propósito es crear progressive web apps: aplicaciones web que se pueden instalar desde la pantalla principal de un dispositivo sin necesidad de hacerlo a traves de una app store (y otras ventajas como disponibilidad offline y enviar notificaciones push cuando cambia el contenido de la aplicación.)

Estàndard:

https://w3c.github.io/manifest/

Introducció

Per afegir un manifest a una aplicació web cal posar la etiqueta HTML link a la secció head del document:

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

El nom del fitxer sol ser manifest.json però podeu posar el nom que desitgeu.

Generadors

Vegeu el Manifest Generator

http://brucelawson.github.io/manifest/

i Web Manifest validator

https://manifest-validator.appspot.com/

Exemples

De https://github.com/google/web-starter-kit/blob/master/app/manifest.json :

{
"name": "Web Starter Kit",
"short_name": "WSK",
"icons": [
{
"src": "images/touch/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/touch/apple-touch-icon.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/touch/ms-touch-icon-144x144-precomposed.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/touch/chrome-touch-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}

Podeu trobar un exemple de fitxer de manifest a Web Starter Kit and over in the Google Chrome samples

start_url

Si no es proporciona aquest paràmetre s'utilitzarà la pàgina actual com la pàgina que es mostrarà al iniciar la app (no sempre serà el que volem). Podem indicar explícitament quina és la URL:

"start_url": "/?utm_source=homescreen"

theme_color

Des de la versió 39 de Chrome for Android es pot utilitzar el meta tag theme-color. Per exemple color or HTML5Rocks orange:

<meta name="theme-color" content="#db5945">

Podeu visitar des del vostre mòbil Android les webs:

Vegeu també Add to home screen.

Icones

Les icones es poden definir al Web App Manifest però també com a etiquetes HTML link:

Exemple:

<link rel="icon" sizes="192x192" href="nice-highres.png">

La mida mínima és 192×192px i en format PNG però per a les Splash Screen també es recomanen versions més grans de la icona. Vegeu també Add to home screen.

Teniu diverses eines per ajudar-vos a generar les icones de diferents mides:

I també es pot integrar al procés de construcció de la aplicació amb Gulp o Webpack utilitzant el mòdul npm:

https://github.com/haydenbleasel/favicons

Resources:

Orientation

Opcions:

  • none|portrait|landscape

Resources:

Tipus aplicació

Puedes hacer que tu app web oculte la IU del navegador si configuras el tipo de display en standalone:

"display": "standalone"

Si consideras que los usuarios preferirían ver tu página como un sitio normal en un navegador, puedes configurar el tipo de display en browser:

"display": "browser"

Full screen

Sites served over https can start full-screen. You can tell Android to start your site full-screen like any other app, or in “true fullscreen” like a game, hiding everything but your app.

  • Standalone (Show operating system features such as the top bar, but not browser features such as an address bar or back buttons. Good for utility applications.)
  • Really fullscreen? (Good for games.)
  • Show as a browser (Show all browser features such as the address bar.)

Add to Homescreen

La funcionalitat Add To Homescreen permet crear el que es coneix com installable web apps. Un exemple:

voice-memos.jpg

Exemple de banner instal·lació:

https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/?hl=es

Chrome (recordeu que ens referim només a Chrome per Android és a dir que cal obrir la app des de un mòbil Android i amb Chrome) mostrarà automàticament el banner d'instal·lació de quan la aplicació cumpleixi amb els següents criteris:

  • Té un fitxer manifest. Vegeu Web App Manifest amb la següent informació:
  • un short_name (s'utilitza a la pantalla d'inici)
  • un name (utilitzat al banner)
  • Una icona de tipus png de 144 x 144;
  • Una start_url que carregi correctament.
  • Contenir un service worker registrat.
  • Utilitzar HTTPS ( requisit per als Service Workers).
  • Rebre al menys dos visites al web amb un màxim de 5 minuts de diferència entre les visites (es mostra el banner a la segona visita)

Vegeu també com funciona Splash_Screen#Web_Apps

Resources:

Splash Screen

Vegeu Splash_Screen#Web_Apps

Vegeu també

Enllaços externs