No meu último post, fiz uma Introdução aos Progressive Web
Apps
onde foquei nas motivações de se criar um PWA, ao invés de um app nativo, e em
suas principais características.
Agora que você já sabe o porquê de desenvolver um Progressive Web App vamos
estudar, e entender, o como.
Então continue a ler esse post para aprender:
- Como criar aplicações que funcionam offline
- Como fazer seu primeiro Service Worker
- O que é o arquivo manifest.json
- Como inspecionar seu PWA com o Google Lighthouse
Sobre a aplicação
Primeiramente vamos conhecer a aplicação que iremos adicionar as técnicas
necessárias para que ela seja transformada em um PWA.
Para quem trabalha com metologias
ágeis, 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:
https://agilepoker.us/
E o código completo aqui:
https://github.com/matheusml/pwa-planning-poker
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:
Para conferir o manifest final da aplicação que construímos basta entrar no
GitHub do projeto:
https://github.com/matheusml/pwa-planning-poker/blob/master/manifest.json
Outras fontes boas sobre o arquivo manifest.json:
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 vem 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 pra quê 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
pegarmos 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, no caso 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, sendo que agora são possíveis: funcionamento offline,
adicionar o app na 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.
