Angular 5: Service Worker

Resultado de imagem para angular 5

Hoje pela manha 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 a funcionamento em modo Offline
  • Acesso à camera e galeria
  • Acesso à geolocalização
  • Acesso à os 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/[email protected] -g

Assim que o comando a cima 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 no nosso terminal:

ng new angular5-pwa --service-worker 

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

angular-cli.json

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

app.module.ts

No nosso AppModule devemos registrar o módulo ServiceWorkerModule:

app.module.ts

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 que possamos testar a nossa APP, execute o seguinte comando no seu terminal:

ng serve

Em seguida vamos utilizar a aba Chrome Developer Tools do Google Chrome, para que possamos ver 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.

Analisando Service Worker (desenvolvimento)

Para o nosso próximo passo iremos precisar de um server, podemos publicar o nosso dist no IIS, Apache ou um outro que nós ajude com o ambiente de PROD, mas para facilitar os nosso testes eu irei utilizar 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 no nosso Service Worker e em Cache Storage temos os nossos arquivos estáticos em cache. Podemos ver esse resultado na imagem abaixo:

Service Worker (production)

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

Testando PWA

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 link do projeto demonstrado nesse artigo Angular5-pwa.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard