Aggiungi un file manifest dell'app web con l'app Create React

Un file manifest dell'app web è incluso in Create React App per impostazione predefinita e consente a chiunque di installare la tua applicazione React sul proprio dispositivo.

Houssein Djirdeh

Create React App (CRA) include un file manifest dell'app web per impostazione predefinita. La modifica di questo file consente di cambiare la modalità di visualizzazione dell'applicazione quando è installata sul dispositivo dell'utente.

Perché è utile?

I file manifest delle app web consentono di modificare l'aspetto di un'applicazione installata sul computer o sul dispositivo mobile dell'utente. Modificando le proprietà nel file JSON, puoi modificare una serie di dettagli dell'applicazione, tra cui:

• Nome
• Descrizione
• Icona dell'app
• Colore del tema

La documentazione MDN illustra nel dettaglio tutte le proprietà che possono essere modificate.

Modificare il manifest predefinito

In CRA, un file manifest predefinito, /public/manifest.json viene incluso automaticamente quando viene creata una nuova app:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

In questo modo, chiunque può installare l'applicazione sul proprio dispositivo e visualizzare alcuni dettagli predefiniti dell'applicazione. Il file HTML, public/index.html, include anche un elemento <link> per caricare il manifest.

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

Ecco un esempio di un'applicazione creata con CRA che ha un file manifest modificato:

Per scoprire se tutte le proprietà funzionano correttamente in questo esempio:

• Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero .
• Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
• Fai clic sulla scheda Richiesta.
• Nel riquadro Application (Applicazione), fai clic sulla scheda Manifest (Manifesto).

Conclusione

1. Se stai creando un sito che ritieni non debba essere installato su un dispositivo, rimuovi il file manifest e l'elemento <link> nel file HTML che lo indica.
2. Se vuoi che gli utenti installino l'applicazione sul proprio dispositivo, modifica il file manifest (o creane uno se non utilizzi CRA) con le proprietà che preferisci. La documentazione MDN spiega tutti gli attributi obbligatori e facoltativi.