Desenvolvendo um Aplicativo Web Progressivo Nada em 15 Minutos

O Google Play tem um aplicativo desenvolvido pelo Chilango Lab que possui mais de um milhão de downloads e uma classificação bastante alta. É chamado de Nada , que pode ser traduzido como "Nada", e é maravilhoso porque não faz absolutamente nada. É verdade que um agradável ovo de Páscoa está escondido nele, mas isso não muda o assunto. Se você analisar esse aplicativo, o tamanho é de 14 MB; durante a instalação, são de 19,24 MB.


O autor do material, cuja tradução publicamos hoje, diz que, olhando para esse aplicativo, ele se perguntou se seria possível reescrevê-lo para ocupar menos espaço.

Ele conseguiu. Nomeadamente, ele recriou a funcionalidade do Nothing usando HTML, CSS e JavaScript, transformando-o em um aplicativo da web progressivo ( PWA , Progressive Web App). Funciona sem uma conexão com a Internet, você pode chamá-lo, como um aplicativo comum, na tela principal. A principal diferença entre um aplicativo Android normal e sua cópia do PWA é o tamanho. O primeiro, lembre-se, ocupa 19,24 MB no dispositivo. O segundo - 205 Kb.


Aplicação normal e PWA

Criando ícones para nada

Antes de falar sobre o código, crie um ícone para o PWA Nothing. Para resolver esse problema, usei a excelente ferramenta de código aberto Launcher Icon Generator .


Launcher Icon Generator

Usando o Gerador de ícones do Launcher, consegui criar um ícone para a minha opção Nothing literalmente instantaneamente. O programa gera automaticamente ícones de vários tamanhos.

Pwacompat

Após a conclusão do ícone, eu precisava criar um manifesto para o aplicativo da web . Graças a isso, o navegador Chrome para Android exibirá uma tela inicial quando o PWA for inicializado. É possível fazer com que essa tela apareça em outros navegadores também? Sim, é possível, e para isso precisamos da biblioteca PWACompat, que nos permite implementar exatamente o que precisamos. Juntamente com o manifesto, é suficiente para conectar-se ao código PWA:

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script> 

Veja como é a tela inicial no Safari (iOS).


Tela inicial do Safari

Mas isso não se limita aos recursos do PWACompat. Em particular, essa biblioteca permite criar metatags para vários navegadores que descrevem como o PWA deve abrir e também define a cor do tema com base no manifesto do aplicativo Web.

Adicionando um aplicativo à tela inicial

Um dos meus recursos favoritos do PWA é chamado A2HS (Adicionar à tela inicial). Graças a isso, você pode adicionar um ícone para iniciar o aplicativo na tela principal. No entanto, começando com o Chrome 68 no Android, em vez de um banner A2HS grande, um pequeno painel de informações com uma proposta apropriada agora é exibido.


Adeus banner A2HS (Chrome 67 e versões anteriores)

De qualquer forma, o painel é uma solução intermediária, pois esse recurso será removido do Chrome. Então, eu precisava criar uma interface A2HS melhor para o PWA Nothing.


Botão Instalar (esquerda), botão Instalar e painel A2HS (centro), caixa de diálogo Adicionar à tela inicial (direita)

Nesse caso, se o navegador suportar a capacidade de adicionar um aplicativo à tela principal, ele exibirá, na parte superior da página, o botão Instalar. Quando o usuário clica nesse botão, a caixa de diálogo Adicionar à tela inicial é exibida.

Aqui está o código relevante.

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); }); 

Se o site atender aos critérios A2HS, o navegador disparará o evento beforeinstallprompt .

Ovo de Páscoa

Atenção, haverá um spoiler!


A rigor, o PWA Nothing Easter Egg é um código da Konami e um vídeo de 10 horas no YouTube .


Chamada de ovo de Páscoa (cima, cima, baixo, baixo, esquerda, direita, esquerda, direita e dois toques)

Depois que o usuário tiver completado o código, o PWA abrirá este vídeo .

Para adicionar suporte de código Konami ao meu aplicativo, usei a biblioteca Konami-JS . É pequeno, fácil de trabalhar e, entre outras coisas, suporta dispositivos móveis. Aqui está a única diferença entre o meu PWA e o aplicativo Android original. Em particular, quando eu, ao inserir o código, preciso fazer dois toques, no aplicativo original, você precisa usar o painel com botões.

Desative a atualização da página enquanto puxa

Eu, no processo de trabalhar no aplicativo, tive um pequeno problema. Quando um usuário tenta esticar uma página em um dispositivo móvel, isso causa uma atualização da página (puxar para atualizar). Eu não preciso disso


Atualização de página indesejada

Felizmente, lidar com esse problema é fácil. Tudo que você precisa é de uma linha de código CSS :

 overscroll-behavior-y: contain 

Hospedagem

O Netlify foi escolhido como hospedagem para o PWA Nothing. Esta é uma plataforma universal para projetos modernos da web. A razão pela qual decidi hospedar meu aplicativo no Netlify é porque tudo é muito fácil de configurar aqui. Além disso, tudo isso é gratuito.


Painel de Controle Netlify

Para implantar um projeto no Netlify, você pode usar um dos três métodos. Estamos falando de ferramentas de linha de comando, sobre implantação manual e sobre implantação contínua.

Tools Ferramentas de linha de comando do Netlify

Essa é uma maneira clássica de implantar projetos da web. Para usá-lo, você precisa instalar a Netlify CLI, faça login na sua conta, inicialize o projeto e implante-o. É assim:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy 

Implantação manual

Esse método é talvez o mais fácil, a implantação de aplicativos é realizada com alguns movimentos do mouse.


Implantação manual

Eu gostei tanto desse recurso que gostaria que algo assim aparecesse no Firebase. De fato, a implantação de um projeto se resume a arrastar e soltar sua pasta em uma página da web.

Deployment Implantação contínua

Agora eu uso esse método específico. Depois de vincular meu repositório GitHub ao Netlify, quando envio o código para ele, o Netlify cria e implanta automaticamente o projeto. Magia, não de outra forma.

▍HTTPS

Como os PWAs devem ser veiculados por HTTPS de uma fonte segura, eu precisava garantir que o HTTPS estivesse ativado no meu site. É verdade que não precisei fazer muito esforço nessa área, pois o Netlify fornece HTTPS gratuito para todos os domínios, incluindo seus próprios domínios de usuário.


Https

Além disso, no painel de controle do Netlify, você pode ativar a transição forçada para HTTPS ( HSTS ). Isso fornecerá proteção contínua para o site.

Análise de Projeto com Farol

O Lighthouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da web. Com sua ajuda, você pode analisar qualquer página - pública ou requer autenticação. Entre outras coisas, permite analisar o desempenho e a acessibilidade das páginas, explorar aplicativos da web progressivos.


Farol

Meu aplicativo conseguiu marcar 97 pontos em termos de desempenho e 100 pontos em outros indicadores. Aqui está o relatório completo.

Sumário

Como você pode ver, um aplicativo Web progressivo que não faz nada acaba sendo muito menor que um aplicativo Android com funcionalidade igualmente rica. Aqui você pode experimentar o PWA Nothing. E aqui você pode encontrar o código fonte.

Caros leitores! O que você acha que aplicativos Android você gostaria de recriar no formato PWA?