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

Per impostazione predefinita, in Create React App è incluso un manifest dell'app web che consente a chiunque di installare l'applicazione React sul proprio dispositivo.

Houssein Djirdeh

Per impostazione predefinita, Create React App (CRA) include un manifest dell'app web. La modifica di questo file ti consentirà di cambiare il modo in cui l'applicazione viene visualizzata 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 tutte le proprietà che possono essere modificate in dettaglio.

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"
}

Ciò consente a chiunque di installare l'applicazione sul proprio dispositivo e di visualizzare alcuni dettagli predefiniti dell'applicazione. Il file HTML public/index.html include anche un elemento <link> per caricare il file manifest.

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

Ecco un esempio di applicazione creata con CRA con 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 Schermo intero .
• Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
• Fai clic sulla scheda Applicazione.
• Nel riquadro Applicazione, fai clic sulla scheda Manifest.

Conclusione

1. Se stai creando un sito che ritieni non debba essere installato su un dispositivo, rimuovi il file manifest e l'elemento <link> dal file HTML che rimanda al sito.
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 di MDN illustra tutti gli attributi obbligatori e facoltativi.