LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Generatore di Web App Manifest

Idea internaManca uno strumento?

Genera un manifest.webmanifest per app web installabili

Inserisci il nome della tua app, l'URL di avvio, la modalità di visualizzazione, i colori del tema e di sfondo e l'elenco delle icone, e ottieni un file JSON manifest.webmanifest pronto all'uso che rende un sito installabile come Progressive Web App. Creato localmente nel tuo browser.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Un web app manifest è il file JSON che indica a un browser come dovrebbe comportarsi il tuo sito una volta installato: il suo nome e l'icona sulla schermata home, il colore della barra di stato, se si apre in una finestra standalone o in una normale scheda del browser, e da dove parte. Senza di esso, "Aggiungi a schermata Home" o non viene offerto oppure ricade su un semplice segnalibro invece di un'esperienza simile a un'app.

Come si usa

  1. Inserisci il nome, il nome breve e l'URL di avvio della tua app.
  2. Scegli una modalità di visualizzazione, un colore del tema e un colore di sfondo.
  3. Elenca le tue icone, una per riga, come percorso e dimensione, ad esempio "/icon-192.png 192x192".
  4. Copia il JSON in un file manifest.webmanifest e collegalo dal <head> della tua pagina con <link rel="manifest" href="/manifest.webmanifest">.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Di quali dimensioni di icone ho bisogno?
Come minimo un PNG 192x192 e uno 512x512 coprono la maggior parte delle richieste di installazione e degli usi come icona dell'app; aggiungi altre dimensioni se vuoi icone più nitide su piattaforme specifiche.
Qual è la differenza tra theme_color e background_color?
theme_color colora l'interfaccia del browser (come la barra degli indirizzi o la barra di stato) attorno alla tua app; background_color viene mostrato brevemente come sfondo della schermata di avvio mentre l'app si carica, prima che il suo contenuto venga disegnato.
Mi serve comunque se non sto creando una PWA?
Un manifest migliora anche il modo in cui l'icona e il nome di un sito appaiono quando un visitatore lo aggiunge ai preferiti o alla schermata home, anche senza supporto completo offline/service-worker.

Torna a tutti gli strumenti