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 la tua applicazione React sul proprio dispositivo.

Houssein Djirdeh

Nota: se non sai come funzionano i file manifest dell'app web, consulta prima la guida Aggiungere un file manifest dell'app web.

Create React App (CRA) include un manifest dell'app web per impostazione predefinita. In fase di modifica potrai modificare la modalità di visualizzazione dell'applicazione una volta installata sul dispositivo dell'utente.

Perché è utile?

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

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

La documentazione MDN copre tutte le proprietà che possono essere modificate in dettaglio.

Modifica 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 vedere i dettagli predefiniti dell'applicazione. Il file HTML, public/index.html, include un elemento <link> per caricare il file manifest.

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

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

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

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

Conclusione

1. Se stai creando un sito che pensi non debba essere installato su una dispositivo, rimuovi il file manifest e l'elemento <link> nel file HTML che vi rimanda.
2. Se desideri che gli utenti installino l'applicazione sul proprio dispositivo, modifica il file manifest (o crearne uno se non utilizzi CRA) con che preferisci. La Documentazione MDN spiega tutti gli attributi obbligatori e facoltativi.