Criar um Progressive Web App com a CLI Angular

Você quer tornar o app Angular que pode ser instalado? 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 Progressive Web App (PWA).

O exemplo de código deste guia está no GitHub (em inglês).

Criar um PWA instalável

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

ng add @angular/pwa

Esse comando fará o seguinte:

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

Por padrão, seu service worker é registrado alguns segundos após o primeiro carregamento de página. Se não estiver, modifique o registrationStrategy.

Personalizar seu PWA

A postagem Pré-armazenamento em cache com o service worker do 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 precisa usar para fazer isso.

O arquivo de manifesto do app permite especificar o nome, nome curto, ícones, 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.

Dê uma olhada no 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 faz referência ao arquivo de manifesto com um elemento link em index.html. Quando o navegador encontrar a referência, ele vai mostrar a solicitação Adicionar à tela inicial:

Uma solicitação de instalação de Progressive Web App

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

Um ícone de atalho do Progressive Web App

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

Conclusão

Para criar um app Angular instalável:

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