Progressive Web Apps: Aplicações web com superpoderes
Exemplo de implementação de uma PWA utilizando Workbox
A web está continuamente em crescimento e não se prevê que venha a parar, sendo possível observar a introdução de novas tecnologias a cada dia. Consequentemente, pessoas diretamente ligadas ao desenvolvimento tecnológico, têm de se manter a par das novas tendências.
A introdução de páginas web responsivas é um exemplo deste crescimento, onde mudou drasticamente a maneira como as páginas web eram pensadas e desenvolvidas. Em 2015, a Google alterou ainda mais o panorama da web com a apresentação das progressive web apps (PWA). Apesar de não ter sido imediatamente o tópico mais falado, encontra-se agora em alta com empresas como Twitter, AliBaba, a apostarem em PWA e a recolherem frutos em função disso.
Observação: Adaptado de artigo
O que é uma PWA?
Uma PWA não é nada mais do que uma comum aplicação web em conjunto com alguns padrões e tecnologias, que a tornam uma aplicação instalável no dispositivo do utilizador, oferecendo, portanto, o melhor de dois mundos, o mundo web e o mundo mobile. Assim, em conjunto com todas as vantagens da web, usufruímos de caching, push notifications, modo offline, etc.
Exemplo de desenvolvimento de uma PWA
Para entender melhor o que é uma PWA e quais as suas vantagens, nada melhor do que começar por transformar uma aplicação web simples, numa PWA. Neste exemplo, transformo uma landing page previamente desenvolvida, Omnifood, numa PWA.
O primeiro passo é usar uma ferramenta como lighthouse, para classificar a página web em diferentes métricas.
Ao gerar o relatório, são disponibilizadas as seguintes métricas:
- Performance
- Acessibilidade
- Boas práticas
- SEO
Performance
A performance de um website refere-se ao quão rápido o conteúdo é carregado e renderizado e pode ser classificada como um dos principais requisitos para uma boa experiência de utilizador. Posto isto, devemos seguir boas práticas que permitam alcançar uma melhor performance.
Existem vários problemas que levam a uma má performance, e existem otimizações que podemos fazer para atenuar uma má performance. Para saber mais, ver artigo afixado abaixo.
Acessibilidade
A acessibilidade é também uma métrica que nunca devemos ignorar, e para isso devemos seguir as Web Content Acessibility Guidelines (WCAG) 2.0.
Boas práticas e SEO
As boas práticas e SEO são também importantes para qualquer aplicação web. Para isso, devem ser seguidas as recomendações apresentadas no relatório disponibilizado pela lighthouse.
Por fim, no relatório são ainda apresentados requisitos para a aplicação web ser considerada PWA.
O primeiro requisito é definir um ficheiro manifest que contém informações relativas à aplicação web.
O segundo é o registo de um service worker.
Manifest
O manifest é um ficheiro em formato json ou webmanifest, definido na root do projeto, que contém metadata da aplicação web. Deve conter as seguintes informações:
- name: Nome da aplicação Web.
- short_name: Nome quando a aplicação é instalada.
- description: Descrição do objetivo da aplicação.
- icons: Informação de ícones, como os seus urls, tamanhos, tipos.
- start_url: Documento índex por onde a aplicação é inicializada.
- display: Formanto em que a aplicação é inicializada (Fullscreen, standalone, minimal-ui, browser).
- theme_color: Cor primária da interface.
- background_color: Cor default do background, utilizada na instalação e no ecrã splash.
Como exemplo, o manifest definido para a aplicação foi o seguinte:
O último passo é ligar o manifest à aplicação, referenciando-o como na imagem abaixo.
Nota: As meta tags não são estritamente necessárias, no entanto, é boa prática colocá-las.
Service Worker
O service worker é um trabalhador da aplicação que atua como um proxy entre a aplicação e a network, que permite fazer caching, levando a uma melhor performance, mesmo sem ou com fraca conexão.
Quando é feito um pedido na aplicação, o service worker interceta-o, e decide entre duas opções:
- Fazer um pedido a uma network externa
- Utilizar dados guardados na cache
A decisão é baseada conforme a verificação de diferentes regras que podemos customizar. Por exemplo, é possível guardar em cache ficheiros javascript, css, html, imagens, quando a página é carregada, e o service worker utiliza posteriormente estes recursos a partir da cache.
É também possível guardar respostas de uma API. Por exemplo, uma aplicação que lista filmes com paginação, pode guardar os conteúdos de cada página na cache, evitando pedidos repetidos a uma API externa. Contudo, é importante que estes dados sejam atualizados na cache de vez em quando, e para isso, tem de se costumizar as regras de decisão do service worker.
Este processo parece complexo, no entanto, existem bibliotecas que nos facilitam a vida. Um exemplo de uma biblioteca é a workbox, que para casos mais básicos como uma landing page, pode não ser preciso fazer código, e para casos mais complexos, fornece uma abordagem mais simples quando comparado com a tradicional.
No entanto, apesar da existência destas bibliotecas, tal como para utilizar uma framework de javascript devemos perceber javascript vanilla, também aqui devemos compreender as bases.
Para isso, é aconselhada a visualização do vídeo afixado, onde é desenvolvida uma PWA básica com um service worker feito de raiz.
Continuando com o exemplo, o último passo para transformar a landing page em PWA é adicionar um service worker à aplicação. Para isso, pode-se utilizar a biblioteca workbox.
1 - Instalar workbox no computador, caso ainda não esteja.
npm install workbox-cli -g2 - Correr o wizard na root do projeto e responder às perguntas que são apresentadas no terminal.
workbox wizard3 - Gerar o service worker.
workbox generateSW workbox-config.jsPara perceber com mais detalhe o que é feito no background destes comandos é recomendado assistir este vídeo.
Feitos todos estes passos, está concluída a transformação da landing page numa PWA (O código está disponível aqui).
Acendendo à PWA através do link, aparece um ícone que permite instalar a aplicação.
Nota: No chrome o ícone aparece por default, no entanto, noutros browsers pode ser necessário a instalação de plugins
Reflexão final
As PWA são com certeza uma tecnologia que veio para ficar, e com elas trazem muitas vantagens quando comparadas com uma aplicação web comum. Contudo, trazem também algumas dificuldades.
Estas dificuldades variam de aplicação para aplicação, e pode haver casos em que talvez nem faça sentido desenvolvermos uma PWA. O exemplo prático dado é um caso específico onde uma página web comum serviria perfeitamente.
Vantagens
As vantagens de uma PWA estão diretamente ligadas aos requisitos para uma aplicação ser considerada uma PWA e percebe-se facilmente porquê.
O registo de um service worker traz vantagens como:
- Páginas carregadas mais rapidamente
- Modo offline
- Push notifications
O manifest traz vantagens como:
- Melhor SEO
- Ícones que representam a aplicação
Outros requisitos, como:
- utilização de HTTPS leva a uma melhor segurança
- ser responsiva leva a utilização em diferentes dispositivos
Outra grande vantagem quando comparada com uma native app são as atualizações. Nas PWA apenas é necessário atualizar o conteúdo que foi modificado, ao contrário das native apps que por vezes têm de atualizar todo o conteúdo.
Por fim, e talvez a maior vantagem para empresas é o desenvolvimento de uma aplicação web com funcionamento web + native app, com apenas uma base de código, levando a uma grande poupança de recursos.
Desvantagens
Como qualquer tecnologia, também as PWA têm desvantagens e dificuldades. Neste caso, o registo de um service worker é conhecido por ter bugs difíceis de resolver, e tende a piorar à medida que o projeto vai crescendo.
Outra grande desvantagem é o funcionamento em iOS. Para iOS as PWA ainda apresentam alguns entraves, como existirem casos onde não é possível adicionar ao homescreen, e push notifications a partir da web ainda não funcionarem.
Conclusão
As PWA vieram certamente para ficar, e têm vindo a ser cada vez mais adotadas por grandes empresas, no entanto, possuem desvantagens que fazem reconsiderar se devem ser utilizadas. Quando estes problemas ficarem resolvidos, as PWA serão muito provavelmente um must have para qualquer empresa, podendo mesmo levar, no cenário ideal, a não ser necessário o desenvolvimento de uma native app.
Nota: O que foi falado aqui sobre PWA foi apenas o topo do iceberg, e é aconselhado a ler a documentação afixada abaixo caso pretenda aprofundar este assunto.
