React: transforme sua aplicação web em uma PWA

Construindo uma Progressive Web App (PWA) - Apresentação

Quer saber como transformar sua página web com React em um aplicativo que pode ser instalado no seu computador ou dispositivo móvel? Você está no lugar certo!

Boas-vindas a este curso, onde vamos transformar a aplicação do Jornada Milhas em uma PWA (Progressive Web App). Eu sou o Neilton Seguins e irei te acompanhar ao longo dessa jornada.

Audiodescrição: Neilton se descreve como um homem negro de pele clara, cabelos cacheados escuros e curtos, e olhos também escuros. Ele veste uma camisa amarela, usa óculos de armação retangular prateada, e está sentado em uma cadeira preta em frente a uma parede clara iluminada em gradiente de azul e rosa.

O que vamos aprender?

A partir de uma base de código em React, nosso objetivo será fazer com que essa aplicação seja instalável na nossa máquina. Na barra de endereços do navegador, à direita, há um ícone de um monitor com uma seta para baixo, bem ao lado dos botões de favorito e zoom.

Ao posicionar o cursor sobre ele, é exibido o nome "Instalar Jornada Milhas". O objetivo será fazer justamente isso, mas como? Nesse momento, entra o que vamos aprender: os conceitos de PWA.

Além do próprio conceito de Progressive Web App, aprenderemos o que são Service Workers, entenderemos o ciclo de vida deles, e trabalharemos com estratégias de cache. Para construir os Service Workers de maneira descomplicada, utilizaremos a biblioteca Workbox do Google.

Com esse conhecimento, será possível utilizar estratégias de caches para fornecer recursos da aplicação, como imagens, scripts, e até estilos de modo offline, oferecendo uma melhor experiência para as pessoas usuárias que irão utilizar essa aplicação.

Pré-requisitos

Para acompanhar este curso, você precisa apenas ter um bom domínio de React e de JavaScript.

Conclusão

Vamos começar? Te aguardamos no próximo vídeo!

Construindo uma Progressive Web App (PWA) - Verificando requisitos com Lighthouse

Você já acessou algum site ou aplicação web e pensou: "Seria interessante se houvesse um aplicativo para isso"? Isso é mais comum do que parece.

Geralmente, as empresas optam por ter um site e um aplicativo que pode ser baixado da Play Store ou da Apple Store. No entanto, existe outra modalidade em que instalamos um aplicativo apenas clicando em um ícone no navegador. Isso é o que chamamos de Progressive Web App (PWA).

Imagine que trabalhamos com a aplicação do Jornada Milhas e recebemos uma demanda para transformar essa aplicação em um PWA, ou seja, um aplicativo instalável.

Você pode estar se perguntando: como fazer isso? Como transformar um site em um aplicativo que pode ser instalado no celular ou no computador e utilizado? É isso que vamos descobrir agora!

Verificando requisitos com o Lighthouse

Começaremos com o navegador aberto na aplicação do Jornada Milhas, uma agência de viagens. O que seria vantajoso para essa agência de viagens em ser transformada em um PWA?

Geralmente, as pessoas utilizam muito o celular para navegar na internet. Se você é uma pessoa que gosta de viajar, com certeza quer saber das promoções e pacotes que o Jornada Milhas oferece. Uma das vantagens do Jornada Milhas como PWA seria a facilidade para chegar até a pessoa usuária.

Conhecendo o Lighthouse

Ainda no navegador, vamos te apresentar o Chrome DevTools, ferramenta de desenvolvimento do Google Chrome. Podemos ter um conjunto de ferramentas e vamos utilizá-las bastante neste curso para ter insights sobre a aplicação.

Após clicar com o botão direito do mouse, vamos selecionar "Inspecionar" para abrir o Chrome DevTools. Inicialmente, estaremos na aba "Elementos", mas a que nos interessa é a "Lighthouse".

Na parte superior do Chrome DevTools, há uma barra de menu onde podemos navegar por abas como "Elementos", "Aplicativo", "Lighthouse", "Console", "Fontes", "Rede", entre outras.

Caso a aba "Lighthouse" não apareça para você, vá até o final desse menu. Há um ícone de duas setas para a direita chamado "Mais guias" onde você consegue encontrar mais opções.

O Lighthouse gera um relatório sobre a página. Podemos avaliar diversas categorias, como, por exemplo, "Desempenho", "Acessibilidade", "Práticas recomendadas", e até "SEO".

Por enquanto, queremos apenas saber se a página está classificada para ser PWA, então vamos marcar somente a opção "App Web Progressivo" e clicar em "Analisar o carregamento de página".

Verificando requisitos da página

O Lighthouse fará uma auditoria da página, verificando o que falta e o que contém na página para essa aplicação se tornar um PWA. Como resultado, o Lighthouse diz que a aplicação não está apta a ser um PWA, pois necessita de alguns recursos específicos. Por exemplo:

PODE SER INSTALADO

• O manifesto do app da Web ou o service worker não atendem aos requisitos para instalação.

OTIMIZADO PARA PWA

• Não foi configurado para uma tela de apresentação personalizada.
• Não foi definica uma cor de tema para a barra de endereços.
• O manifesto não tem um ícone mascarável.

Um ponto certo é que utilizamos a tag <meta>, que é importante. Além disso, o conteúdo está no tamanho correto, ou seja, o site está responsivo para diversos dispositivos.

Já podemos tirar alguns insights a partir dessas informações. Primeiramente, é importante que a aplicação seja responsiva. Também precisamos criar o manifesto do app da web.

Mais adiante no curso, entenderemos melhor o que é esse manifesto e como ele funciona, bem como os Service Workers. Além deles, existem várias outras opções que podemos configurar para a aplicação ser um PWA, isto é, um aplicativo instalável em qualquer tipo de dispositivo.

O que é PWA?

O que é PWA e quais são as vantagens ao utilizar esse recurso?

Um PWA (Progressive Web App), como o nome já sugere, é um aplicativo da web progressivo, ou seja, é um aplicativo criado com as APIs modernas da web.

Nesses casos, temos uma única base de código, que é a aplicação da web, e podemos instalar esse aplicativo em qualquer dispositivo através de um botão no navegador.

Quais as vantagens de utilizar um PWA?

Existem alguns casos reais de uso de PWA, por exemplo, empresas grandes como o Spotify, o Twitter e a Uber. Todas elas utilizam o PWA.

Eles têm seus sites, os aplicativos nas lojas Apple Store e Play Store, mas também têm a opção de PWA. Com isso, eles conseguiram reduzir em 97% o tamanho do aplicativo.

O app da Uber, por exemplo, tem um tamanho específico na loja, e quando instalamos o PWA dele, o tamanho é bem reduzido, cerca de 10 vezes menor que o da loja.

A aplicação do Spotify é muito utilizada em dispositivos móveis, não tanto em navegadores. Essa é outra vantagem: as pessoas usuárias passam mais tempo no celular. Inclusive, hoje em dia, o celular é o dispositivo onde as pessoas mais acessam a internet. Portanto, é muito mais fácil essas empresas interagirem e aumentarem o engajamento com as pessoas usuárias.

Conclusão

A partir do relatório do Lighthouse, começaremos a entender como funciona o manifesto, como podemos configurá-lo na aplicação, e como isso adianta muito o trabalho de transformar a aplicação em um PWA. Nos encontramos em breve!

Construindo uma Progressive Web App (PWA) - Criando o manifesto

Agora que entendemos o que é um PWA e quais as vantagens para o nosso negócio, precisamos entender como configurar a nossa aplicação para ser uma PWA.

Criando o manifesto

No navegador, temos aberta a página final do relatório do Lighthouse. Esse relatório informa que não temos uma série de elementos no nosso aplicativo para ele ser um PWA.

Um desses elementos é o manifesto do aplicativo da web. Sendo assim, precisamos criar esse arquivo de manifesto do aplicativo da web na nossa aplicação.

Criando o arquivo manifest.json

No Visual Studio Code, dentro da pasta "public", criaremos um novo arquivo chamado manifest.json. Feito isso, podemos começar a preencher algumas instruções.

Esse arquivo, quando carregado na aplicação, será lido pelo navegador, que entenderá a sequência de instruções e preencherá uma série de requisitos para configurar a aplicação para ser um PWA, ou seja, para ser instalável. Haverá um ícone na própria aba para instalar a aplicação.

Definindo as propriedades do manifesto

A primeira propriedade que vamos declarar é um id igual a / entre aspas duplas. Esse id servirá para identificar a aplicação. Além disso, adicionaremos as propriedades name e short_name: o name será definido como "Jornada Milhas", enquanto o short_name será "Jornada".

O name será o nome da aplicação. Quando instalada, junto ao ícone, haverá "Jornada Milhas", mas em ocasiões em que não é possível mostrar o nome inteiro, veremos apenas o nome curto "Jornada".

manifest.json:

{
  "id": "/",
  "name": "Jornada Milhas",
  "short_name": "Jornada"
}

As duas próximas propriedades que vamos passar serão theme_color e background_color. Para theme_color, passaremos a cor hexadecimal #5a189a, e para background_color, a cor #09001a.

Essas duas propriedades servirão para quando a aplicação for instalada, pois ao tentar abrir, a depender do tamanho e do dispositivo em que ela é carregada, pode demorar um pouco.

Para evitar que a pessoa usuária se sinta frustrada, haverá uma tela de carregamento com essas cores definidas e o ícone da aplicação, indicando que ela está em processo de carregamento.

{
  "id": "/",
  "name": "Jornada Milhas",
  "short_name": "Jornada",
  "theme_color": "#5a189a",
  "background_color": "#09001a"
}

A próxima propriedade será a display, para configurar como a aplicação deve abrir. Iremos defini-la com o valor standalone, pois ao acessar o aplicativo, ele pode abrir em uma guia do navegador, por exemplo, ou em uma aba separada, com orientações diferentes conforme o dispositivo.

Essa propriedade definida com o valor standalone irá garantir que a aplicação seja aberta em uma aba separada do navegador, transmitindo a ideia de que é um aplicativo de fato.

{
  "id": "/",
  "name": "Jornada Milhas",
  "short_name": "Jornada",
  "theme_color": "#5a189a",
  "background_color": "#09001a",
  "display": "standalone"
}

Na sequência, vamos incluir as propriedades description e orientation. Para description, colocaremos a descrição "Site do Jornada Milhas", e para orientation, vamos escrever portrait, pois queremos que a aplicação abra em modo retrato.

Por fim, teremos uma propriedade chamada start_url, semelhante ao id, onde vamos definir o escopo da aplicação (/). Tudo que estiver depois da URL (que no modo de desenvolvimento, é http://localhost:5173/), a aplicação irá considerar, o que inclui rotas da aplicação.

{
  "id": "/",
  "name": "Jornada Milhas",
  "short_name": "Jornada",
  "theme_color": "#5a189a",
  "background_color": "#09001a",
  "display": "standalone",
  "description": "Site do Jornada Milhas",
  "orientation": "portrait",
  "start_url": "/"
}

Adicionando tags ao arquivo index.html

Uma vez salvo o arquivo manifest.json, precisamos acessar o index.html e adicionar algumas tags. Na linha 7, começaremos definindo uma nova tag meta do tipo name="description".

Em seguida, adicionaremos uma descrição, então em content, passaremos o texto "Site do Jornada Milhas" entre aspas duplas, mesma descrição configurada no arquivo manifest.json.

index.html:

<!doctype html>
<html lang="PT-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Site do Jornada Milhas"/>

<!-- código omitido -->

Após fechar a tag meta na linha 7, vamos duplicá-la com o atalho "Shift + Alt + Seta para baixo". Nessa segunda tag, vamos definir o name como theme-color, e em content, passaremos a cor desejada, que será #5a189a, mesma cor definida anteriormente no manifesto.

<!doctype html>
<html lang="PT-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Site do Jornada Milhas"/>
    <meta name="theme-color" content="#5a189a"/>

<!-- código omitido -->

Além disso, precisamos de algumas tags link. A primeira delas será o link do favicon. Para isso, basta digitar link:favicon e mudar: o atributo rel de shortcut icon para somente icon; o href de favicon.ico para favicon.svg; e o type de image/x-icon para image/svg+xml.

Por fim, adicionaremos mais uma tag link: o link do manifest. Utilizando o atalho link:manifest, já temos o atributo rel="manifest" e o href="manifest.json".

<!doctype html>
<html lang="PT-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Site do Jornada Milhas"/>
    <meta name="theme-color" content="#5a189a"/>
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="manifest" href="manifest.json">
    <title>Jornada Milhas</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Gerando um novo relatório com o Lighthouse

Após salvar o arquivo index.html, vamos voltar ao navegador e deletar o relatório antigo do Lighthouse. Para isso, há um botão na parte superior chamado "Remover tudo".

Feito isso, podemos analisar o carregamento da página novamente. O Lighthouse fará uma nova auditoria e identificará o que adicionamos de novo no código da aplicação.

Ainda são retornados alguns erros, mas também aparecem coisas boas. Por exemplo: um item verde diz que "Foi definida uma cor de tema para a barra de endereços". Além disso, o requisito da tag meta mencionado no vídeo anterior também foi atendido após as alterações.

Agora já temos o manifesto solicitado, o que é um ponto positivo, embora faltem algumas configurações. Porém, ele reclama que ainda faltam ícones na aplicação.

Outra forma de visualizar o arquivo manifest.json é acessando a aba "Aplicativos" do Chrome DevTools. Com essa aba aberta, verificamos que há um arquivo chamado manifest.json.

Ao clicar para abrir ele, conseguimos visualizar o que adicionamos em código no VS Code. Sendo assim, já temos o manifesto configurado. Faltam apenas algumas configurações finais.

Nessa aba, encontramos uma seção de erros e avisos, por exemplo, falando sobre a interface de instalação de PWA mais avançada não estar disponível e sobre a maioria dos sistemas operacionais exigirem ícones quadrados.

Também há uma seção chamada "Instabilidade" indicando que faltam ícones no manifesto, mas as outras coisas que configuramos aparecem em "Apresentação", como a cor do tema e a cor do plano de fundo, por exemplo.

Conclusão

O próximo passo será adicionar os ícones da aplicação, bem como entender para que eles servem e por que eles são importantes. Nos encontramos no próximo vídeo!

Sobre o curso React: transforme sua aplicação web em uma PWA

O curso React: transforme sua aplicação web em uma PWA possui 116 minutos de vídeos, em um total de 46 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Construindo uma Progressive Web App (PWA)
• Implementando cache com VitePWA
• Entendendo service workers
• Explorando estratégias de cache
• Conhecendo o workbox