Generatore di  Web App Manifest

Generatore di Web App Manifest

Genera il tuo json Web App manifest e migliora i dati del sito

Il generatore di Manifest permette di aggiungere facilmente il manifest.json nelle tue pagine web

Costruttori e generatori

3.8 Condividi

Compila il modulo

Short name

Fino a 40 caratteri

Name

Fino a 60 caratteri

Description

Fino a 200 caratteri

Background color

 

Colore del tema

 

Inserisci URL
Direzione

Direzione del testo per smartphone

Display

Modalità di visualizzazione dello smartphone

Orientamento

Modalità di orientamento dello schermo

Applicazione correlata

Istruzione booleana

Carica immagine
Carica immagine
Language

 

JSON Web App Manifest

Un documento JSON che fornisce metadata per le Progressive Web App

Il web app manifest è un file JSON che fornisce informazioni su siti web e app, e permette agli utenti un accesso più veloce garantendo un'esperienza migliore (ad esempio, è utile per i siti Web presenti sulla schermata iniziale di un dispositivo).

Il Web App Manifest da la possibilità di salvare i bookmark di un sito, sulla schermata iniziale del dispositivo tramite la specifica dei metadata base delle estensioni, come il nome e la versione. I file Json inoltre determinano gli aspetti delle funzionalità dell'estensione, come lo sfondo e i contenuti script.

Quando il sito si avvia :

  • Ha un'icona ed un nome unici (l'utente può riconoscerli dagli altri siti web).
  • Visualizza gli elementi agli utenti (le risorse sono scaricate o ripristinate dalla cache).
  • Presenta le caratteristiche di visualizzazione predefinite del browser, riducendo la transizione improvvisa rispetto a quando le risorse del sito diventano disponibili.

Questo avviene grazie il semplice meccanismo dei metadati in un file di testo. E questo è il web app manifest.

Chrome richiede un file manifest per mostrare il comando "Aggiungi alla schermata Home"

I browser che supportano il file manifest sono i sequenti:

Supporto Browser
Chrome 79 supported
Chrome 78 supported
Chrome 77 supported
Chrome 76 supported
Chrome 75 supported
Chrome 74 supported
Chrome 73 supported
Chrome (Android) 75 supported
Edge 76 supported
Supporto Browser
Firefox (Android) 67 almost supported
Safari (iOS) 13 almost supported
Safari (iOS) 12.2-12.3 almost supported
Safari (iOS) 12.0-12.1 almost supported
Safari (iOS) 11.3-11.4 almost supported
Opera (Android) 46 almost supported
Samsung int. 9.2 almost supported
Samsung int. 4-8.1 almost supported
QQ browser 1.2 almost supported
Supporto Browser
Edge 18 no support
Edge 17 no support
Edge 16 no support
Firefox 70 no support
Firefox 69 no support
Firefox 68 no support
Firefox 67 no support
Safari 13 no support
Safari 11.1-12.1 no support

Componenti del manifest

Tuffiamoci nei componenti del web app manifest

la tabella sottostante fornisce una spiegazione dettagliata ed esempi per ogni componente del manifest. Per saperne di più, dai un'occhiata ai link nella sezione risorse correlate in fondo.

Short name

Indica un nome per l’applicazione breve e leggibile.

È pensato per quando non c'è spazio sufficiente per visualizzare il nome completo dell'applicazione web.

"short_name": "SeoChecker"

Name

Indica un nome per l’applicazione facilmente leggibile destinato ad essere visualizzato dall'utente, ad esempio in mezzo ad un elenco di altre applicazioni o come label di un'icona.

"name": "SeoChecker web app"

Description

Indica una descrizione generale di cosa fa l'applicazione.

"description": "The web app that helps developers"

Lang

Specifica la lingua principale per i valori dei componenti name e short_name.

Questo valore è una stringa che contiene un singolo language tag.

"lang": "it_IT"

Start URL

Specifica l'URL caricato quando un utente avvia l'applicazione da un dispositivo.

Se indicato come relative URL, l'URl di base sarà l'URL del manifest.

"start_url": "/?utm_source=homescreen"

Background

Specifica il colore di sfondo utilizzando la proprietà background_color, opportunamente denominata.

Il browser utilizza questo colore nell'istante in cui l'applicazione web viene avviata, il colore rimane sullo schermo fino alla prima renderizzazione dell'applicazione web.

"background_color": "#000000"

Theme color

Definisce il colore del tema predefinito per un'applicazione. A volte influisce sul modo in cui l'applicazione viene visualizzata dal sistema operativo (ad esempio, nel task switcher di Android, il colore del tema circonda l'applicazione).

"theme_color": "#e3e3e3"

Direction

Specifica la direzione primaria del testo, aiuta a fornire la corretta visualizzazione del testo. :

  • "lrt": left-to-right
  • "rtl": right-to-left
  • "auto": seleziona l'ipotesi più idonea per la direzione del testo.
"dir": "ltr"

Display

Definisce la modalità di visualizzazione preferita dallo sviluppatore per l'applicazione web.

  • "fullscreen": Tutta l'area di visualizzazione disponibile è utilizzata e non viene mostroto lo user agent di chrome.
  • "standalone": L'applicazione avrà l'aspetto di un'applicazione indipendente. Può avere una finestra diversa, una propria icona nel programma di avvio, ecc. In questa modalità, lo user-agent (l'interprete) esclude gli elementi dell'interfaccia utente per il controllo della navigazione, ma può includere altri elementi dell'interfaccia utente, come la barra di stato.
  • "minimal-ui": L'applicazione avrà l'aspetto di un'applicazione indipendente, ma avrà un det minimo di elementi dell'interfaccia utente per controllare la navigazione. Gli elementi varieranno a seconda del browser.
  • "browser": L'applicazione si apre in una scheda del browser convenzionale o in una nuova finestra, a seconda del browser e della piattaforma. Questa è l'impostazione predefinita.
"display": "standalone"

Orientation

Definisce l'orientamento predefinito per tutti i contesti di navigazione di primo livello dell'applicazione web.

  • "any": aggiunge portrait-primary, portrait-secondary, landscape-primary e landscape-secondary agli orientamenti.
  • "natural": aggiunge portrait-primary o landscape-primary agli orientamenti in modo che l'angolo di orientamento corrente associato sia pari a 0.
  • "landscape": a seconda delle convenzioni della piattaforma, aggiunge o landscape-primary, o landscape-secondary, o entrambi gli orientamenti.
  • "landscape-primary": aggiunge landscape-primary all'orientamento.
  • "landscape-secondary": aggiunge landscape-secondary all'orientamento.
  • "portrait": a seconda delle convenzioni della piattaforma, aggiunge portrait-primary, o portrait-secondary, o entrambi gli orientamenti.
  • "portrait-primary": aggiunge portrait-primary all'orientamento.
  • "portrait-secondary": aggiunge portrait-secondary all'orientamento.
"orientation": "portrait"

Prefer application

Specifica un valore booleano (vero o falso) che suggerisce allo user agent di indicare all'utente quale delle applicazioni correlate specificate (vedi sotto) sono disponibili e consigliate per l’applicazione web. Dovrebbe essere utilizzato solo se le applicazioni native correlate offrono davvero qualcosa che l'applicazione web non può fare.

Se omesso il valore predefinito è false.

"prefer_related_applications": "false"

Related application

Specifica un array di "application objects" che rappresentano applicazioni native installabili o accessibili alla piattaforma sottostante - ad esempio un'applicazione nativa android disponibile tramite il Google Play Store. Queste applicazioni sono intese come alternative alle applicazioni web che fornisco funzionalità simili o equivalenti - come la versione nativa dell'applicazione web.

"related_applications":[
  {
   "platform": "play",
   "url": "https://play.google.com/store/apps/details?id=com.example.app1",
   "id": "com.example.app1"
  },
  {
   "platform": "itunes",
   "url":"https://itunes.apple.com/app/example-app1/id123456789"
  }
]

Scope

Definisce l'ambito di navigazione del contesto (scope) applicativo dell’ applicazione web. Limita quali pagine web possono essere visitate mentre il Manifest è utilizzato.

Se l'utente naviga al di fuori dell'ambito dell'applicazione, questa ritorna ad essere una normale pagina web.

Se l'ambito dell'URL è una stringa vuota, ritornerà.undefined.

Se l'ambito è il relativo URL, l'URL di base sarà l'URL del manifest.

"scope": "/myapp/"

Icons

Specifica un array di "image objects" che possono servire come icone dell'applicazioni in vari contesti.

Ad esempio, possono essere utilizzate per rappresentare l'applicazione web in mezzo ad una lista di altre applicazioni, oppure per integrare l'applicazione web con un task switcher del sistema operativo e/o preferenze di sistema.

"icons": [
  {
   "src":"icon/icon128x128.png",
   "size":"128x128",
   "type":"image/png"
  },
  {
   "src":"icon/icon144x144.png",
   "size":"144x144",
   "type":"image/png"
  },
  {
   "src":"icon/icon152x152.png",
   "size":"152x152",
   "type":"image/png"
  },
  {
   "src":"icon/icon192x192.png",
   "size":"192x192",
   "type":"image/png"
  },
  {
   "src":"icon/icon48x48.webp",
   "size":"48x48",
   "type":"image/webp"
  },
  {
   "src":"icon/icon.ico",
   "size":"72x72 96x96 128x128 256x256"
  }
]

Specifiche tecniche

In Chrome 47 e versioni successive, la schermata introduttiva per l'avvio di un'applicazione web viene visualizzata da una schermata home. La schermata introduttiva viene generata automaticamente utilizzando le proprietà web app manifest, in particolare: nome, colore di sfondo, l'icona nell'array di icone più vicina ai 128dpi del device.

I Manifest dovrebbero essere fatti usando il tipo MIME application / manifest+json. Tuttavia, è facoltativo.

Condividi questo strumento

Ti è piaciuto? Condividilo!

Condividi questo strumento

Prova gli Strumenti correlati!

Generatori, builder e validatori per migliorare le tue performance di ottimizzazione SEO e web

Home Back to top of the page