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

Vuoi rendere installabile la tua app Angular? Non aspettare più!

Minko Gechev

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

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

Creare una PWA installabile

Per rendere l'applicazione Angular una PWA, devi solo eseguire un singolo comando:

ng add @angular/pwa

Questo comando:

• Crea un service worker con una configurazione predefinita di memorizzazione nella cache.
• Crea un file manifest, che indica al browser come dovrebbe comportarsi 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 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, ti consigliamo di modificare registrationStrategy.

Personalizzare la PWA

Il post Precaching con il service worker Angular spiega come configurare il service worker Angular. Qui puoi trovare come specificare le risorse che il service worker deve memorizzare nella cache e la strategia che deve utilizzare per farlo.

Il file manifest dell'app ti consente di specificare nome, nome breve, icone, colore del tema e altri dettagli dell'app. Scopri di più sull'insieme completo delle proprietà che puoi impostare nel post Aggiungere un manifest per un'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. Quando il browser trova il riferimento, mostrerà la richiesta Aggiungi a schermata Home:

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

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 progetto utilizzando l'interfaccia a riga di comando Angular.
2. Modifica le opzioni nel file manifest.webmanifest per adattarle al tuo progetto.
3. Aggiorna le icone nella directory src/assets/icons per adattarle al tuo progetto.
4. Se vuoi, modifica theme-color in index.html.