Hoje pela manhã eu precisei atualizar a minha conta na Apple para poder baixar um APP. Até ai, tudo bem, mas quando finalizei esse processo, notei que não tinha espaço suficiente no meu device para baixar o APP. Bom, pensando nisso e na onda do momento, resolvi criar uma serie de artigos sobre PWA com Angular 5, mas antes de começar, vejamos abaixo um trecho retirado da Wikipédia sobre o que é PWA.

Progressive Web App (PWA) é um termo usado para denotar aplicativos da web que usam as últimas tecnologias da web. Os aplicativos da web progressivos são páginas web (ou sites) tecnicamente regulares, mas podem aparecer ao usuário como aplicativos tradicionais ou aplicativos móveis (nativos). Este novo tipo de aplicativo tenta combinar os recursos oferecidos pela maioria dos navegadores modernos com os benefícios da experiência móvel.

Em outras palavras PWA, é uma aplicação WEB que permite aos nossos usuários terem a mesma experiência de navegação dentro de uma aplicação Web que teriam em uma APP instalada em seus devices. Nós conseguimos atingir esse resultado através de arquivos manifest e o Service Worker. Essa tecnologia nos permite trabalhar com todos os itens da lista abaixo sem a necessidade da instalação de um APP:

• Push Notification
• Ícone na tela home do smartphone
• Splash screen
• Processos rodando em background
• Suporte à funcionamento em modo Offline
• Acesso à câmera e galeria
• Acesso à geolocalização
• Acesso aos contatos

Pensando nisso e na nova release do Angular 5 que tem suporte a Progressive Web Applications (PWA), resolvi criar esse primeiro artigo.

Atualizando Angular Cli

Nosso primeiro passo será atualizar o Angular Cli. Caso você já esteja com ele atualizado, pode pular para etapa Criação do projeto. Para atualizar ele, execute o comando abaixo no seu terminal:

npm install @angular/cli@next -g

Assim que o comando acima finalizar, execute ng -v para verificar se ele atualizou corretamente. Segue abaixo uma imagem com a minha versão atualizada:

Criação do projeto

Como mencionamos no inicio do artigo, o Angular está com suporte ao PWA nessa nova release. Para criamos um projeto com ele já configurado, basta executarmos o seguinte comando em nosso terminal:

ng new angular5-pwa --service-worker

Antes de testarmos o projeto, vamos navegar por alguns arquivos da solução para vermos as configurações necessárias para nosso projeto executar com o PWA configurado corretamente.

angular-cli.json

Iniciando pelo angular-cli, podemos observar que dentro de app temos uma nova referência chamada “serviceWorker” com o valor true. Isso indica que o Angular Cli deve adicionar o Service Worker quando executar nossa aplicação.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      [...]
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "serviceWorker": true
    }
  ]

app.module.ts

Em nosso AppModule devemos registrar o módulo ServiceWorkerModule:

import { ServiceWorkerModule } from '@angular/service-worker';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],

ngsw-config.json

Esse é o arquivo mais importante da nossa APP, navegando por esse que o Angular Cli criou no scaffold nós temos duas propriedades:

• index: O arquivo de inicialização do nosso projeto.
• assetGroup: Local onde devemos registrar os arquivos que queremos que entrem no cache e a configuração do cache.

Esse sessão é dividida em duas partes:

• App: contendo os arquivos estáticos como: favicon.ico e o index.html
• Assets: com a configuração de cache de todos arquivos que estão no diretório assests.

Testando a APP

Para testarmos a nossa APP, execute o seguinte comando em seu terminal:

ng serve

Em seguida, vamos utilizar a aba Chrome Developer Tools do Google Chrome para vermos o resultado do nosso Service Worker. Abaixo, temos uma imagem indicando que o Service Worker está vazio, isso ocorreu porque, para trabalharmos com PWA, precisamos estar em um ambiente de produção.

Para o nosso próximo passo iremos precisar de um server. Podemos publicar o nosso dist no IIS, Apache ou um outro que nos ajude com o ambiente de PROD. Mas para facilitar nossos testes, utilizarei o http-server. Para instalar ele basta executar o seguinte comando no seu terminal:

npm install http-server -g

Com ele instalado, execute o comando ng build — prod — aot no seu terminal para gerar a pasta dist. Caso você não conheça o AOT eu recomendo a leituda do artigo AOT Angular onde demonstro os benefícios de se gerar uma build com ele.

Vamos agora utilizar o http-server para simular o nosso ambiente de prod. Para isso, navegue até o seu diretório dist e execute o comando: http-server. Caso tudo esteja configurado corretamente, ele irá abrir o endereço http://127.0.0.1:8080 no seu navegador.

Navegue novamente até a aba Application do seu Google Chrome e note que agora nós temos um valor registrado em nosso Service Worker e em Cache Storage temos os nossos arquivos estáticos em cache. Podemos ver esse resultado na imagem abaixo:

Agora, para testarmos se a nossa APP irá funcionar offline, desligue o http-server e de um refresh na página onde sua app está em execução. Podemos ver esse resultado na imagem abaixo:

Bom, esse foi o primeiro artigo de uma serie que eu pretendo escrever sobre esse assunto, que a cada dia vem ganhando mais relevância no mercado. Espero que tenham gostado e segue o link do projeto demonstrado nesse artigo Angular5-pwa.