Como construir uma aplicação WEB progressiva (PWA) do zero com conhecimento básico de programação? Guia passo a passo

0 995 9 minutos lidos

Forbes, Twitter, Uber, Le Equipe, Telegram ou Instagram são alguns dos gigantes que deram um passo à frente e criaram seus próprios PWAs, ou aplicativos progressivos, como são comumente chamados. Este cenário sugere a possibilidade de os sites convencionais serem esquecidos .

É normal, os sites como os conhecemos evoluíram cada vez mais para réplicas menos poderosas do que os aplicativos nativos. Um PWA é essencialmente o produto desta evolução , que agora encontrou uma maneira de oferecer uma experiência semelhante à de um aplicativo móvel em qualquer navegador.

Se você não quer ser arrastado pelo clima, lá é importante que você comece a pensar em tornar seu site progressivo, ou pelo menos o mais próximo possível disso , porque isso vai começar a pesar no ranking o mais rápido possível.

O que é um aplicativo da web progressivo e como ele difere de um aplicativo nativo?

Um aplicativo escalável é uma ferramenta programada e escrita em linguagens da web como como HTML5, JavaScripts e CSS, mas que se comporta como um aplicativo móvel , preservando as características destes como ter um espaço de armazenamento no dispositivo, o que permite que ele seja usado sem conexão com a Internet.

Não há muitas diferenças entre progressivo e nativo, já que o primeiro está tentando se parecer com o segundo , mas podemos identificar vários o que nos faz preferir um ao outro:

Multi plataforma: a principal diferença entre um e outro é o fato de que o aplicativo nativo só pode ser usado no dispositivo em que está instalado, então para usá-lo em outro terá que baixá-lo do zero. A aplicação web, por sua vez, é multiplataforma, pois você pode acessá-la de qualquer navegador como se fosse um site.
Peso: atualmente você pode encontrar aplicativos nativos tão pesados quanto um programa de computador, portanto, depende da potência. Por outro lado, sites progressivos raramente excedem 1 MB de peso.
Atualizações rápidas: se um aplicativo for muito grande, cada atualização levará alguns minutos. Um aplicativo progressivo é mais versátil nesse sentido porque, por ser tão leve, suas atualizações são feitas em segundos.

Componentes de um PWA O que é necessário para criar um?

Uma aplicação progressiva é basicamente composta por quatro partes; manifesto, técnicos de serviço, ícone e servidor. Cada um deles tem um papel fundamental na estrutura de toda a ferramenta .

Manifesto do aplicativo

O manifesto de um Aplicação PWA é um arquivo JSON no qual todas as meta-informações do aplicativo são especificadas . É aqui que a cor do tema, nome, cor de fundo, ícone e esses detalhes são mostrados.

Trabalhador de serviço

Este é talvez o elemento mais importante. Como mencionamos anteriormente, este é um elemento programático que oferece soluções para a troca de informações entre a rede e o cache do navegador. . Além disso, eles também gravam informações a serem carregadas quando houver uma conexão, o que permite que o aplicativo seja executado sem a internet.

ícone

O ícone nada mais é do que a imagem que identificará sua aplicação entre outras aplicações web do mercado, você tem que projetar você mesmo porque será a peculiaridade da web .

HTTPS

Finalmente, você precisará de um servidor seguro com seu certificado SSL correspondente. Os navegadores nunca executarão um PWA hospedado por HTPP como muitos sites hoje. O mais importante sobre um aplicativo progressivo é sua segurança, e os navegadores garantem isso. .

O que precisamos para programar este aplicativo da web progressivo?

Estamos chegando ao momento da verdade em que teremos que começar a trabalhar para criar nosso aplicativo da web escalonável. Não passará de um simples meteorologista que lhe dirá a temperatura, umidade e pressão atmosférica. .

Para criá-lo, será necessário primeiro cumprir alguns requisitos importantes que precisaremos atender antes de iniciar a programação. Estes são os seguintes:

Uma chave de API Dark Sky : os dados para nosso aplicativo de clima virão diretamente dessa API, então você precisa obter uma chave dela. Eles são totalmente gratuitos para pequenos projetos sem fins lucrativos como o que iremos criar.
Conhecimento de programação : não vamos te enganar, para entender o que vamos te dizer, você deve pelo menos entender programação web e o mais essencial das linguagens HTML5, CSS e JavaScripts.

Etapas para criar um aplicativo da Web progressivo que funcione com e sem a Internet

Chegamos onde queríamos ir. É hora de você começar a programar seu primeiro aplicativo progressivo , uma Formulário on line muito simples que lhe dará o conhecimento para criar um mais completo e poderoso no futuro. Preste atenção e siga todas as etapas com atenção:

Obtenha a API Dark Sky

Como mencionamos anteriormente, a primeira coisa a fazer é obter uma chave de API Dark Sky , que fornecerá os dados meteorológicos para nosso aplicativo progressivo. Para fazer isso, você deve ir diretamente para https://darksky.net/dev Você registrar e solicitar a chave.

Depois de obtê-lo, você precisa verificar se está funcionando perfeitamente. Para fazer isso você precisa pegar o seguinte link e substituir o lugar onde diz "ClaveAqui" pela chave API que você acabou de adquirir. Se tudo correr bem, você poderá ver a previsão de Nova York sem problemas.

https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319

Obtenha o código do aplicativo

Na verdade, este é um laboratório de teste, então buscamos um repositório diretamente do Google Developers para você executar este teste guiado. Para obter este repositório, você precisa usar o Glitch, uma plataforma muito útil que permite aos desenvolvedores trocar informações sem problemas.

O que você precisa fazer é o seguinte:

ir a Glitch. com e no canto superior direito da tela, clique "Novo projeto" então onde diz "Clone de Git Repo ”.
Isto iráabrir uma pequena janela na qual vocêprecisa de colar o seguinte endereço https://github.com/googlecodelabs/your-first-pwapp.gite clique em "CERTO".

Neste repositório estão todas as informações de que você precisa. Agora você precisa ir para o arquivo .env e alterar onde diz DARKSKY_API_KEY = "Chave aqui" e coloque sua chave de API Dark Sky onde diz "Chave aqui".

Agora você deve clicar em "Ver seu aplicativo" para ver o aplicativo em ação.

Auditoria com farol

Basicamente, com este código, o PWA é finalizado, mas ainda existem alguns bugs que devemos corrigir nós mesmos e que iremos descobrir graças a esta auditoria . Esta ferramenta possui uma seção especialmente projetada para realizar auditorias progressivas de sites como o que estamos criando e para isso temos que fazer o seguinte:

Abra seu projeto em uma nova guia no navegador Chrome.
Então abra chromedevtools e vá para a guia Auditorias. Aqui, a plataforma exibe uma lista de categorias de auditoria que você deve deixar tudo habilitado.
A próxima coisa a fazer é clicar em Realizar auditorias e depois de alguns segundos, o Lighthouse fornece um relatório da página.

Nesse caso, vamos nos concentrar apenas nos resultados da seção PWA, que é o que nos interessa. Isso certamente causará os seguintes problemas:

❗ FALHOU: A página atual não responde com 200 quando está offline.
❗FALHADO:start_url não responde com 200 quando está offline.
❗ FALHOU: não grava um técnico serviço que controla a página estart_url
❗ FALHA: o manifesto do aplicativo da web não atende aos requisitos de instalação.
❗ FALHA: não configurado para uma tela de boas-vindas personalizada.
FALHA: não define uma cor de tema para a barra de endereço.

Agora nossa missão no próximo tutorial é fazer com que tudo isso seja aprovado, para que possamos fazer nosso Web progressiva com e sem conexão com a internet, ser instalável e ter um manifesto de app decente .

Crie um manifesto de aplicativo

O motivo da falha do aplicativo no manifesto é que basicamente não há um, então teremos que criá-lo embora, no seu caso, você apenas tenha que modificar o código base de um manifesto que preparamos para você .

{
 "name": "Clima",
 "short_name": "Clima",
 "icons": [{
  "src": "/images/icons/icon-128x128.png",
   "sizes": "128x128",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-152x152.png",
   "sizes": "152x152",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-256x256.png",
   "sizes": "256x256",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }],
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#3E4EB8",
 "theme_color": "#2F3BA2"
}

Para adicionar este manifesto ao seu aplicativo. privativa, precisamos informar o navegador de nosso manifesto adicionando <link rel="manifest"... em todas as páginas do nosso aplicativo. Agora adicione a seguinte linha ao elemento <head>no arquivo index.html.

 
  rel = "manifesto"  href = "/manifest.json" >

Mais tarde, você precisará adicionar uma meta descrição ao nosso aplicativo . Para isso é simplesmente necessário adicione a seguinte linha de código ao cabeçalho do aplicativo:

  nome = "Descrição"  conteúdo = "Um aplicativo meteorológico simples" >

Por fim, definimos a cor da barra de endereço de nosso aplicativo progressivo , para o qual você deve copiar a seguinte linha de código no de seu aplicativo.

 
  nome = "cor do tema"  conteúdo = "# 2F3BA2"  />

Coloque a web offline

Agora vem uma das partes mais complicadas de todo o guia, porque vamos entrar em uma programação difícil e rápida para criar corretamente nosso service worker , algo que mencionamos anteriormente como essencial para qualquer aplicação progressiva.

O que todos os usuários esperam de um aplicativo é que ele possa ser usado sem uma conexão com a Internet, para que seja fácil acessarmos o conteúdo sem estar em uma rede . Isso é igualmente importante em um aplicativo progressivo, por isso é imperativo que o dinossauro Chrome nunca pare.

O que vamos fazer aqui é uma página offline personalizada. Então, quando alguém entra no aplicativo e não tem conexão, é aquele que aparece no lugar do dinossauro chato. Para isso, criaremos nosso primeiro service worker .

Se você não os conhece muito bem, recomendamos que o faça. É um mundo totalmente novo no mundo da programação para você, então é muito conveniente para você se especializar nele. Desta forma, você crescerá profissionalmente aprendendo conhecimentos de ponta que o manterão um passo à frente de sua guilda. .

“ATUALIZAÇÃO ✅ Você precisa construir um aplicativo da web progressivo do zero e não sabe como fazê-lo? ⭐ ENTRE AQUI ⭐ e descubra como ✅ FÁCIL e RÁPIDO ✅ ”

A primeira coisa que faremos é registrar o service worker, para o qual você precisará adicionar a seguinte linha de código ao arquivo de índice progressivo do aplicativo :

// CODELAB: cadastrar o técnico de serviço. 
if  ( 'serviceWorker' no navegador )  { 
 janela . addEventListener ( 'carregar' ,  ()  =>  { 
  navegador . trabalhador de serviço . cadastre-se ( '/service-worker.js' ) . então (( reg ) => { 
     consolá . log ( 'Trabalhador de serviço registrado.' , reg ); }); }); }

Agora você precisa dizer ao técnico de serviço qual página exibir quando estiver off-line. No repositório, já criamos uma página offline personalizada em ( public/offline.html). O que você precisa fazer é apenas entrar em Public/service-worker.js no repositório e na seção const "FILES_TO_CACHE = [
]; " incluir valor “Offline.html”. Deve ser parecido com a imagem:

Agora, a próxima coisa que precisamos fazer é adicionar esta linha de código ao evento "Instalar" dizer ao técnico para Serviço de correção progressiva offline da Web:

evt . espere até ( 
  caches . aberto ( CACHE_NAME ). então (( esconderijo )  =>  { 
   consolá . log ( '[ServiceWorker] Pre-caching offline page' ); retorno esconderijo . addall. ( FILES_TO_CACHE ); }) );

Até agora, estamos no meio do caminho. A próxima coisa a fazer é fazer com que nosso service worker limpe o cache para que nenhum dado antigo seja deixado para trás. É por isso que precisamos adicionar este código à pasta public / service-worker.js :

// CODELAB: remove dados armazenados em cache antigos do disco. 

evt . espere até ( 

  caches . chaves (). então (( lista de chaves )  =>  { retorno Promessa . todos os ( lista de chaves . mapa, (( chave ) => { if ( chave ! == CACHE_NAME ) { 

     consolá . log ( '[ServiceWorker] Excluir cache antigo' , chave ); devolva-os caches . excluir