Criar um Progressive Web App com a CLI Angular

Quer tornar seu app Angular instalável? Não espere mais!

Minko Gechev

Nesta postagem, você vai aprender a usar a interface de linha de comando (CLI) do Angular para criar um app da Web progressivo (PWA, na sigla em inglês).

Confira o exemplo de código deste guia no GitHub.

Criar um PWA instalável

Para transformar seu aplicativo Angular em um PWA, basta executar um único comando:

ng add @angular/pwa

Esse comando vai:

• Criar um service worker com uma configuração de armazenamento em cache padrão.
• Criar um arquivo de manifesto, que informa ao navegador como o app deve se comportar quando instalado no dispositivo do usuário.
• Adicionar um link ao arquivo de manifesto em index.html.
• Adicionar a tag theme-color <meta> a index.html.
• Criar ícones de apps no diretório src/assets.

Por padrão, o service worker precisa ser registrado em alguns segundos após o primeiro carregamento de página. Se não for, considere modificar a registrationStrategy.

Personalizar seu PWA

A postagem Armazenamento em cache com o service worker Angular explica como configurar o service worker do Angular. Nela, você encontra como especificar quais recursos quer que o service worker armazene em cache e qual estratégia ele deve usar para fazer isso.

O arquivo de manifesto do app permite especificar o nome, o nome abreviado, os ícones, a cor do tema e outros detalhes do app. Leia sobre o conjunto completo de propriedades que podem ser definidas na postagem Adicionar um manifesto de app da Web.

Confira o arquivo de manifesto gerado pela CLI do 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"
    }
  ]
}

É possível personalizar qualquer uma dessas propriedades mudando o valor relevante em manifest.webmanifest.

Um PWA referencia o arquivo de manifesto com um elemento link em index.html. Depois que o navegador encontrar a referência, ele vai mostrar o prompt Adicionar à tela inicial:

Como os esquemas ng-add adicionam tudo o que é necessário para tornar o app instalável, eles geram alguns ícones de atalho que são mostrados quando o usuário adiciona o app à área de trabalho:

Personalize as propriedades e os ícones do manifesto antes de implantar o PWA na produção.

Conclusão

Para criar um app Angular que pode ser instalado:

1. Adicione @angular/pwa ao seu projeto usando a CLI do Angular.
2. Edite as opções no arquivo manifest.webmanifest de acordo com o projeto.
3. Atualize os ícones no diretório src/assets/icons de acordo com o projeto.
4. Opcionalmente, edite a theme-color em index.html.