Cuando se está navegando por una web progresiva, debe facilitarse siempre la opción de instalarla en el dispositivo móvil.
Para ello debemos añadir un fichero manifest.json en la raíz de nuestra aplicación. Aquí se pone un ejemplo:
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
De momento los dos únicos navegadores que soportan esots ficheros manifest son Chrome y Opera mobile.
Además de crear el fichero debemos añadir esta líena al head del fichero que tenemos especificado en el manifest con el parámetro start_url: (en el ejemplo anterior: index.html)
<link rel="manifest" href="/manifest.json">
Además de ponerlo en esa página es recomendable:
- Poner el enlace al manifiesto en todas las páginas, así la aplicación será instalable independientemente de la página por la que haya entrado el usuario
- El atributo short_name es mejor que eal atributo name en Chrome
- Hay que definir sests de iconos para diferentes densidades de pantallas. Chrome intentará utilizar el icono más ddercano a 48dp por ejemplo, 96px en un dispositivo 2x y 144px en un dispositivo 3x
- Hay que incluir un icono con un tamaño sensible para la pantalla de arranque y no olvidar establecer el color de fondo.
Para que funcione en iOS:
Hay que hacer lo siguiente:
- Añadir en el final del <head> del fichero index.html este código:
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
Para que funcione en Windows phone:
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
De manera que el head quedaría de la siguiente manera:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="https://weather-pwa-sample.firebaseapp.com/final/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather PWA</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
<!-- TODO add manifest here -->
<link rel="manifest" href="/manifest.json">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
<!-- For windows -->
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
</head>
Hay más info sobre estos banners aquí:
https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/