Aplicações para Web Progressivas (PWA)

O conceito de aplicações para web progressivas (no original, Progressive Web Applications) foi criado pelo Google para caracterizar aplicações que são confiáveis, rápidas e envolventes.

Confiabilidade significa que a aplicação sempre está disponível para uso, independentemente da qualidade da conexão com a internet (conexão intermitente ou mesmo ausência de conexão).

Rapidez significa que o usuário não passa pela experiência de ficar esperando as informações serem exibidas na tela após ter realizado alguma ação. A resposta da aplicação é "imediata".

Envolvimento significa que as aplicações possuem o mesmo status que as aplicações nativas em relação à sua instalação e usabilidade. Uma PWA aparece para o usuário como um ícone na tela e ao ser clicado (tocado) a aplicação é executada, como se fosse uma aplicação nativa.

Service Workers

Do ponto de vista técnico, uma PWA está baseada no conceito de service worker, uma API presente nos navegadores.

O ambiente de execução (runtime) JavaScript é do tipo single thread, ou seja, apenas um script é executado de cada vez. Se, por exemplo, o usuário clicar em um botão de uma página e esta ação ("onclick") implicar na execução de um script então nenhum outro script poderá ser executado enquanto aquele estiver sendo executado. Os scripts ficam em uma fila aguardando a vez de serem executados, um de cada vez.

A especificação HTML 5 introduziu o conceito de web worker que permite que um script seja executado em uma thread própria, distinta daquela thread que executa os scripts associados aos eventos produzidos pelo usuário enquanto está interagindo com a página HTML.

Um service worker é um script JavaScript executado em segundo plano (background) pelo navegador e que está separado da página web (que tipicamente contém os seus scripts JavaScript). Isso é possível graças ao conceito de web worker.

A principal finalidade de um service worker é gerenciar uma cache que conterá uma cópia local de todos os recursos (páginas HTML, arquivos CSS, imagens, etc) usados pela aplicação.

De forma simplificada um service worker funciona assim: quando o navegador faz uma requisição HTTP esta é interceptada pelo service worker que analisa a URL e descobre qual recurso (página/arquivo) está sendo solicitado ao servidor. Se o service worker tiver uma cópia deste arquivo então ele imediatamente retorna gera uma resposta HTTP contendo este arquivo. Se não tiver então é feita uma requisição ao servidor que então enviará a resposta HTTP para o service worker. Este normalmente armazenará uma cópia da resposta na cache e devolverá a resposta ao navegador.

Isso permite que a aplicação funcione mesmo quando não houver conexão com a internet pois as requisições HTTP serão tratadas pelo service worker.

HTTPS

Um dos requisitos para que uma PWA funcione corretamente é que ela seja acessada via protocolo HTTPS. Isso garante que os arquivos obtidos (e armazenados em cache) pelo service worker venham do servidor que hospeda a aplicação.