Progressive Web Apps – o que é?

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.

Progressive Web Apps

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/

Artigos relacionados

Sobre Nuno Fonseca

Licenciado em Engenharia Informática pelo Instituto Superior de Engenharia do Porto. Instrutor CISCO. Formador de TI na ATEC e CEASE.

Veja também

Ligar remotamente um PC

Como ligar remotamente um PC?

Deixo aqui uma dica de como ligar remotamente um PC, para depois aceder remotamente ao …

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.