Crea un'app web progressiva con l'interfaccia a riga di comando Angular

Vuoi rendere installabile la tua app Angular? Non aspettare oltre.

Minko Gechev

In questo post imparerai a utilizzare l'interfaccia a riga di comando (CLI) di Angular per creare un'app web progressiva (PWA).

Puoi trovare l'esempio di codice di questa guida su GitHub.

Nota: questo post presuppone che tu abbia già dimestichezza con le PWA e i relativi vantaggi. Se hai bisogno di un ripasso, dai un'occhiata alla raccolta Installabili.

Creare una PWA installabile

Per trasformare la tua applicazione Angular in una PWA, devi solo eseguire un singolo comando:

ng add @angular/pwa

Questo comando:

• Crea un service worker con una configurazione di memorizzazione nella cache predefinita.
• Crea un file manifest, che indica al browser il comportamento che deve avere la tua app quando è installata sul dispositivo dell'utente.
• Aggiungi un link al file manifest in index.html.
• Aggiungi il tag <meta> theme-color a index.html.
• Crea le icone delle app nella directory src/assets.

Per impostazione predefinita, il service worker dovrebbe essere registrato entro pochi secondi dal primo caricamento della pagina. In caso contrario, valuta la possibilità di modificare il file registrationStrategy.

Personalizza la tua PWA

Il post Precaching con il service worker Angular spiega come configurare il service worker Angular. Qui puoi scoprire come specificare le risorse che vuoi che il service worker memorizzi nella cache e la strategia da utilizzare per farlo.

Il file manifest della tua app ti consente di specificare il nome, il nome breve, le icone, il colore del tema e altri dettagli dell'app. Per ulteriori informazioni sull'insieme completo di proprietà che puoi impostare, consulta il post Aggiungere un file manifest dell'app web.

Dai un'occhiata al file manifest generato dall'interfaccia a riga di comando Angular:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Puoi personalizzare una qualsiasi di queste proprietà modificando il valore pertinente in manifest.webmanifest.

Una PWA fa riferimento al proprio file manifest con un elemento link in index.html. Una volta trovato il riferimento, il browser mostrerà la richiesta Aggiungi a schermata Home:

Poiché gli schemi di ng-add aggiungono tutto il necessario per rendere la tua app installabile, vengono generate alcune icone di scorciatoie che vengono visualizzate dopo che l'utente aggiunge l'app al desktop:

Assicurati di personalizzare le proprietà e le icone del file manifest prima di eseguire il deployment della PWA in produzione.

Nota: se vuoi ripristinare la tua PWA come app web standard, rimuovi il riferimento a manifest.webmanifest da index.html.

Conclusione

Per creare un'app Angular installabile:

1. Aggiungi @angular/pwa al tuo progetto utilizzando Angular CLI.
2. Modifica le opzioni nel file manifest.webmanifest in base alle esigenze del tuo progetto.
3. Aggiorna le icone nella directory src/assets/icons in base al tuo progetto.
4. Se vuoi, modifica theme-color in index.html.