*Este post foi originalmente publicado no Medium pessoal do autor. Confira aqui.

No meu último post, fiz uma Introdução aos Progressive Web Apps com as motivações de se criar um PWA ao invés de um app nativo e as suas principais características. Agora que você já sabe o porquê de desenvolver um Progressive Web App vamos estudar, e entender, o como.

Sobre a aplicação

Antes de tudo vamos conhecer a aplicação na qual vamos adicionar as técnicas necessárias para que ela seja transformada em um PWA. Quem trabalha com metologias ágeis já está acostumado com um ritual chamado Planning Poker. Em resumo, ele serve para que cada membro do time consiga fazer uma estimativa das tarefas a serem desenvolvidas.

O app construído faz exatamente isso.

Essa é a tela principal:

E essa é a tela após a seleção de uma das cartas:

Para visualizar a aplicação em produção basta acessar este link e o código completo está aqui.

O arquivo manifest.json

O primeiro passo, e também o mais fácil, é adicionar o arquivo manifest.json.

O propósito do arquivo manifest é transformar uma aplicação web em algo instalável em um smartphone. Abaixo, segue um exemplo de um arquivo manifest.json válido:

Pensei em ir campo a campo e mostrar o que cada um deles significa, mas é simplesmente mais fácil mostrar o resultado final em uma imagem:

Ou seja, a sua aplicação web agora pode abrir um splash screen exatamente igual aos apps nativos com pouquíssimo esforço.

Ah, lembrando que o arquivo deve ser importado no index.html, assim:

Lembrando que você não precisa criar o arquivo manifest do zero. Existem algumas ferramentas gratuitas que fazem todo o trabalho para você. Recomendo principalmente essas duas:

– Web App Manifest Generator
– PWA Builder

Para conferir o manifest final da aplicação que construímos basta entrar no GitHub do projeto.

Outras fontes boas sobre o arquivo manifest.json:

– Google | Manifest File Format
– MDN | Web App Manifest

O que é um Service Worker?

Um problema bem comum que os usuários enfrentam desde o começo da web, e que vem aumentando com o uso dos dispositivos móveis, é a perda da conexão.

Nada é mais frustrante do que ter preenchido todos os dados para realizar uma compra e no último instante isso aparecer:

Os Services Workers vêm para tentar consertar, ou pelo menos minimizar, esse problema.

Mas vamos começar pela definição do SW:

Um Service Worker é um script que seu navegador executa em segundo plano, separado da página da Web, possibilitando recursos que não precisam de uma página da Web ou de interação do usuário.

Em resumo, o SW te dá a opção de manipular as requisições que são feitas por sua aplicação e com isso algo que nunca foi possível antes na web agora ficou extremamente fácil: o funcionamento offline.

Como criar um Service Worker

Agora que já sabemos o que é um SW e para que ele serve, vamos aprender a criar um do zero.

A primeira coisa que precisamos fazer é instalar o Service Worker. Durante a instalação, vamos adicionar ao cache todos os arquivos estáticos, que são gerados no build final:

Repare que criamos uma variável chamada CACHE_NAME. Ela serve para “versionarmos” o cache. Ou seja, se coisas novas forem adicionadas ao código, simplesmente o static-v1 vira static-v2.

Agora precisamos fazer a ativação do Service Worker. Nesse passo vamos atualizar o cache, se for necessário:

Para finalizar, vamos usar o SW para interceptar requisições. A ideia é tentar pegar o que for solicitado do cache e, se ele não existir, aí sim vamos fazer um request:

Aqui está a versão final do SW que fizemos:

Lembrando que precisamos adicionar o SW que criamos no index.html, dessa forma:

E com isso temos nosso Service Worker completo e a aplicação agora funciona em modo offline. \o/

Para saber mais sobre os Service Workers:

– Google | Service Workers: uma introdução
– MDN | Service Worker API
– Service worker: A revolução da plataforma web

Lighthouse

A forma fácil de saber se você está no caminho certo na construção do seu Progressive Web App é usar alguma ferramenta de inspeção. A que eu mais recomendo é o Lighthouse do Google.

Basta fazer o download da extensão para o Chrome, entrar no site que você deseja inspecionar e clicar no widget:

Depois basta aguardar o resultado e visualizar o feedback do Google:

Conclusão

Pra fechar, com alguns simples passos conseguimos transformar nossa aplicação em um Progressive Web App. Agora são possíveis: funcionamento offline, adicionar o app à home screen do usuário etc.

Lembrando que a experiência do usuário no ambiente mobile pode ser, e geralmente é, bem diferente do ambiente desktop, então sua aplicação tem que ser responsiva e adaptada para esse ambiente independente de ser um PWA ou não.

Agradecimentos especiais ao Flavio Nazario pelo trabalho de UX feito no AgilePoker.

Tem alguma dúvida ou perdeu algum passo? Só deixar abaixo o seu comentário. Até a próxima!

É desenvolvedor web e quer trabalhar em times multidisciplinares e em projetos desafiadores? Vem pra cá!

Sobre o Autor

Desenvolvedor de Software na Concrete Solutions. Apaixonado por Ruby, AngularJS e Elixir, fez Computação na UFF, lê 1 livro por semana e segue a dieta à risca.

cases

rio de
janeiro

Rua São José, 90
Sala 2121 - Centro
(21) 2240-2030
CEP: 20010-020

são
paulo

Av. Nações Unidas
nº 11.541 - 3º andar
(11) 4119-0449
CEP: 04578-000

belo
horizonte

Av. Getúlio Vargas, 671
Sala 800 - 8º andar
(31) 3360-8900
CEP: 30112-021