PF-Matteo alla fine credo basti una cosa del genere aggiunta nella head di ogni pagina:
<link rel="manifest" href="/my/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My PianetaFibra">
<link rel="icon" type="image/png" sizes="192x192" href="/package/assets/images/logo-icon-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="My PianetaFibra">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" sizes="57x57" href="/package/assets/images/logo-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/package/assets/images/logo-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/package/assets/images/logo-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/package/assets/images/logo-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/package/assets/images/logo-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/package/assets/images/logo-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/package/assets/images/logo-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/package/assets/images/logo-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/package/assets/images/logo-icon-180x180.png">
<link rel="apple-touch-icon" sizes="192x192" href="/package/assets/images/logo-icon-192x192.png">
<meta name="msapplication-TileImage" content="/package/assets/images/logo-icon-144x144.png">
<meta name="msapplication-TileColor" content="#2962FF">
<meta name="msapplication-tap-highlight" content="no">
<meta name="theme-color" content="#2962FF">
e questo nel /my/manifest.json
:
{
"name": "My PianetaFibra",
"short_name": "My PianetaFibra",
"start_url": "/my/",
"display": "standalone",
"background_color": "#fff",
"description": "PianetaFibra Portale Clienti",
"icons": [
{
"src": "/package/assets/images/logo-icon-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/package/assets/images/logo-icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/package/assets/images/logo-icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/package/assets/images/logo-icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/package/assets/images/logo-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/package/assets/images/logo-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
L'unica cosa e' che bisogna creare tutte queste dimensioni di immagini (trasparenti e quadrate) con il logo, per piacere a tutte le versioni di tutti i browser su tutti i device... 🙈
Tutto questo e' per il supporto in se', poi volendo c'e' anche del JavaScript che si puo' aggiungere per far comparire anche il popup che chiede di aggiungere l'app alla home screen, tipo https://github.com/cubiq/add-to-homescreen