Estudar implementação de PWA

[enzoggqs]

Descrição:

Os responsáveis devem estudar sobre a implementação de PWA, e seus subtópicos para serem batedores dos demais membros do grupo

Tarefas:

• [x] Estudo da implementação de PWA

Critérios de aceitação:

• [x] Os responsáveis terem estudado sobre, e estarem prontos para compartilhar o conhecimento com os demais membros

[enzoggqs]

Li essa página pra me introduzir no conteúdo de push notifications e vi esse vídeo que mostra como implementar push notifications na pwa

[DenysRogeres]

Li alguns artigos e assisti alguns vídeos e vou fazer uma síntese de tudo.

Há alguns requisitos para o PWA, dentre eles estão:

• Ser seguro e servido via HTTPS;
• Progressivo, ou seja, funcionar em múltiplos navegadores;
• Ter acesso OFFLINE (retornar pelo menos a URL principal offline);
• Responsivo, disponível para qualquer device;
• APP LIKE (usuário ter a sensação de estar em um app nativo);
• Instalável (adicionar à home screen);
• Atualizado (browser deve detectar atualização e instalá-las quando necessário);

Essa lista pode ser acessada de forma completa no artigo da Google, na qual está disposto todo o checklist. Para verificar se estamos cumprindo com todos os requisitos, podemos usar a ferramenta open-source Lighthouse disponibilizado também pela Google que executará uma série de testes na página e gerará um relatório sobre o desempenho da página. Nesse relatório, nós poderemos usar os testes que apresentaram falha como indicadores do que pode ser feito para aprimorar a PWA.

[DenysRogeres]

Para fazer push notifications, ser instalável e ter atualizações automáticas precisamos mexer com o Service Worker que é o core de uma aplicação PWA. Service worker é um script que seu navegador executa em segundo plano, separado da página da Web. Isso possibilita recursos que não precisam de uma página da Web ou de interação do usuário, ou seja, é uma maneira de dizer para o browser o modo que ele deve agir em determinadas situações. O passo-a-passo para instalar o service worker pode ser encontrado nessa página onde é descrito gradualmente o que se deve fazer. Nos estudos eu encontrei um template para pwa que talvez seja útil.

Vou disponibilizar alguns links apenas para fins de estudo: Milene Lacerda - Construindo PWAs com Vue.js - BrazilJS Conf 2017 O que é PWA e como criar PWA Series: Service Workers, the basics about offline Como fazer seu site funcionar offline com PWA Service Worker Introduction to Service Worker