Desafios de PWA

Esse projeto contém um site estático bem simples. A ideia é transformá-lo em uma PWA e aplicar algumas APIs bacanas pelo caminho.

0

Clone o projeto e disponibilize a pasta num servidor HTTP local. (file:// não vai permitir a gente fazer algumas coisas)

1

Criar um manifest.json e um ServiceWorker vazio. Faça a instalação dele via o arquivo install.js. O <link> já está em todos os arquivos HTML pra facilitar.

Com isso, você já deve conseguir instalar a PWA no device.

2

Implementar ServiceWorker servindo conteúdo estático offline. Aproveite o ARQUIVOS.TXT que já tem uma lista de todos os arquivos padrões do projeto pra você cachear.

(Bônus: usar o novo WorkboxJS do Google)

3

Transformar numa SPA com navegação Ajax e History API.

Faça isso no arquivo spa.js. Dá pra fazer com jQuery basicão. Mas fique a vontade pra usar algum framework.

4

Fallbacks para iOS: meta tags da Apple & AppCache.

As meta tags faça apenas na home, pelo index.html.

O AppCache já possui a chamada em todos os HTML pra facilitar. Use o nome do arquivo como appcache.manifest

5

Faça uma análise pelo Chrome Dev Tools na aba Application. Por lá, você vê o manifesto, dispara a instalação e analisa o service worker.

Instale também o Lighthouse no seu Chrome e faça uma análise da PWA.

6

Desabilite o pagamento se estiver offline.

Pra pensar: O que é "estar offline"? Usar timeouts? Pesquise a Network Info API.

7

Implemente uma notificação do sistema na página de confirmação de pagamento ao invés do alert no pagamento.js. Use a Notifications API.

8

Use a Payment Request API na tela de pagamento.

Algumas dessas coisas estão funcionando no repositório oficial do projeto. Você pode também acessar direto no dispositivo.