O que é uma “Progressive Web App” (PWA)? De uma forma muito simplista podemos dizer que é um website que se comporta como uma App instalada num smartphone ou tablet. Na realidade é mais do que isso e definir de uma forma concisa e única não é fácil.
Para um website ser usado de uma forma similar a uma aplicação, é necessário o uso de algumas tecnologias web mais recentes (service workers, cache APIs,…). A ideia é permitir ao utilizador uma experiência de utilização semelhante a uma app nativa.
O que é necessário para ser PWA
Para um website ser considerado uma PWA é necessário ter as seguintes características:
- Progressiva – Funciona para qualquer utilizador, seja qual for o navegador usado;
- Responsiva – adaptar-se a qualquer tipo de dispositivo e resolução;
- Independente de conetividade – O uso de service workers permite que possa ser usado em ligação à net;
- App-like – Procurar ter um layout semelhante a uma app nativa;
- Segurança – servidas via HTTPS de forma a proporcionar uma ligação segura;
- Detetável – a possibilidade de serem identificadas como Apps graças ao uso de ficheiros de “manifest” W3C permitindo os motores de pesquisa encontrarem;
- Atualizável – o uso de service workers deve permitir atualizar os conteúdos disponibilizados;
- Instalável – Permitir aos utilizadores “instalar” o PWA como uma app;
O que é um service worker?
Na realidade um service worker é um programa que faz parte do nosso PWA que corre em segundo plano, esse programa/script permite colocar dados em cache, permite enviar notificações e a sincronização de dados. Podemos considerar o service worker como um programa que corre independente do nosso PWA enquanto navegamos nele, o service worker realiza uma série de operações necessárias para o bom funcionamento do PWA mas sem intervenção humana.
O uso de cache é fundamental nos PWA, é dessa forma que podemos continuar a usar o PWA sem ligação à rede. Apesar de não existir ligação podemos navegar e consultar os dados existentes em cache no respetivo dispositivo que está a ser usado.
É habitual haver diferentes estratégias de caching
Caching Assets
Permite armazenar todos os elementos estáticos após o carregamento do PWA. Isso permite que pelo penos seja possível abrir o PWA de forma off-line.
Também é possível armazenar manualmente elementos e recursos, por exemplo imagens com avisos “ler mais tarde”.
Dynamic Caching
Grande parte dos PWA trabalham com caching dinâmico, que é obtida da base de dados através de uma API remota (webservice por exemplo). Para este tipo de dados, existem algumas abordagens comuns diferentes:
- Uma estratégia stale-while-revalidate retornará rapidamente uma versão em cache de um recurso enquanto acede à rede para buscar uma versão atualizada, se houver uma. Essa é uma boa estratégia para conteúdo que raramente é alterado.
- Uma estratégia apenas de cache é mais direta: ela retorna apenas o recurso armazenado em cache, não tenta aceder à rede. Isso é adequado para servir os recursos do seu PWA (logos, imagens, …) e outro conteúdo estático que é atualizado apenas quando a versão do aplicativo é atualizada.
- Rede primeiro, em caso de falha usa a cache é mais adequado para o conteúdo dinâmico (notícias). Com esta estratégia, tenta-se aceder ao conteúdo mais recente no servidor, mas recorre a uma versão em cache se falhar.
Navegadores que suportam PWA
Os PWA ainda são uma tecnologia com bastante work-in-progress e os apenas os navegadores mais recentes é que suportam PWA.
| Chrome | Safari | Firefox | Edge |
| Versão 40 | Versão 11.1 | Versão 44 | Versão 17 |
Para terminar fica uma ligação que aponta para vários Progressive Web Apps: https://pwa.rocks/
