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 una Progressive Web App (PWA).

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

Crea una PWA installabile

Per trasformare la tua applicazione Angular in una PWA, devi solo eseguire un 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 come deve comportarsi la tua app quando viene 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 dell'app nella directory src/assets.

Per impostazione predefinita, la registrazione del service worker dovrebbe avvenire entro pochi secondi dal primo caricamento pagina. In caso contrario, valuta la possibilità di modificare il registrationStrategy.

Personalizzare la PWA

Il post Memorizzazione anticipata nella cache con il service worker Angular spiega come configurare il service worker Angular. Lì puoi trovare come specificare le risorse che vuoi che il service worker memorizzi nella cache e quale strategia deve 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. Scopri l'insieme completo di proprietà che puoi impostare nel post Aggiungere un manifest dell'app web.

Dai un'occhiata al file manifest generato dalla CLI 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 file manifest con un elemento link in index.html. Una volta trovato il riferimento, il browser mostrerà il prompt Aggiungi a schermata Home:

Un prompt di installazione dell&#39;app web progressiva

Poiché gli schemi ng-add aggiungono tutto il necessario per rendere la tua app installabile, generano alcune icone di scorciatoia che vengono mostrate una volta che l'utente aggiunge l'app al desktop:

Icona di scorciatoia di un&#39;app web progressiva

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

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 al tuo progetto.
  3. Aggiorna le icone nella directory src/assets/icons in base al tuo progetto.
  4. (Facoltativo) Modifica theme-color in index.html.