WebApps: A facilidade de desenvolvimento

Prévia do material em texto

WebApps
APRESENTAÇÃO
A utilização de WebApps cresce a cada dia no mercado mobile mundial. O crescimento é 
devido, por um lado, ao incentivo de grandes empresas, como, por exemplo, a Microsoft, que 
viu nos WebApps a oportunidade de se posicionar novamente no mercado mobile, e, por outro, à 
facilidade e à praticidade de desenvolvimento.
Essa praticidade está relacionada ao fato de os WebApps serem desenvolvidos com a mesma 
tecnologia que a dos websites normais, sendo possível usar o mesmo desenvolvimento, com 
pequenas adaptações, para os dois fins.
Nesta Unidade de Aprendizagem, você vai conhecer o que são WebApps e algumas tecnologias 
que podem ser utilizadas no seu desenvolvimento, além de aprender como transformar o seu site 
em um WebApp.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Descrever aplicativos WebApps.•
Identificar as tecnologias para o desenvolvimento de WebApps.•
Ilustrar o desenvolvimento de uma WebApp.•
DESAFIO
Muitas empresas já têm websites desenvolvidos e, com o advento dos aplicativos para 
dispositivos móveis, acabam perdendo clientes se não aderirem à prática de ter o seu próprio 
aplicativo. Contudo, contruir um aplicativo do zero não é uma missão fácil nem rápida. Por isso, 
investir em WebApps se torna uma opção viável.
Acompanhe o caso a seguir:
 
Será necessário que você elabore um checklist para compartilhar com sua equipe, elencando o 
que vocês precisam fazer para que o website se torne um WebApp. Além de descrever o passo a 
passo, você deve sugerir para a sua equipe tecnologias e linguagem de programação que podem 
ser utilizadas em cada uma das etapas realizadas para transformar o site em WebApp e descrever 
brevemente cada etapa.
INFOGRÁFICO
WebApps, também chamados de PWAs, são desenvolvidos com as mesmas tecnologias 
utilizadas para o desenvolvimento de websites. Contudo, eles agregam características específicas 
de aplicativos para dispositivos móveis. Desse modo, apresentam uma mistura dos dois 
conceitos.
No Infográfico, você acompanhará a diferença entre um aplicativo, um WebApp e um site 
responsivo.
CONTEÚDO DO LIVRO
WebApps ou PWAs são uma alternativa que facilita a criação de aplicativos, permitindo a 
utilização de tecnologias antes empregadas apenas na criação de sites para a criação de 
aplicativos.
No capítulo WebApps da obra Programação mobile, você aprenderá sobre as principais 
características de um PWA, conhecerá tecnologias utilizadas no desenvolvimento desses 
aplicativos e saberá como transformar um site em um aplicativo.
Boa leitura.
PROGRAMAÇÃO 
MOBILE
Aline Zanin
WebApps
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
  Descrever aplicativos WebApps.
  Identificar as tecnologias para o desenvolvimento de WebApps.
  Ilustrar o desenvolvimento de uma WebApp.
Introdução
A utilização de aplicativos é constante no dia a dia de todos, seja para reali-
zação de atividades profissionais ou de lazer. Os aplicativos ganham espaço 
por serem uma alternativa rápida e facilitada, além de um contraponto aos 
websites. Muitos websites não estão preparados para serem executados 
em dispositivos móveis, apresentando tempo alto de carregamento, ne-
cessidade de abrir o navegador e, muitas vezes, um leiaute distorcido. Os 
WebApps surgem para unir estes dois mundos, permitindo a facilidade de 
um aplicativo para dispositivo móvel em uma arquitetura essencialmente 
web, resolvendo os problemas aqui citados e permitindo que exista apenas 
uma aplicação para mobile e para web.
1 O que são Progressive WebApps?
O desenvolvimento de aplicativos para dispositivos móveis pode ser frequente-
mente contraposto pelo desenvolvimento de Progressive WebApps (PWA). Este 
contraponto surge porque os dois podem, da mesma maneira, ser visualizados pelo 
usuário como um aplicativo, acessível através de um clique na tela do smartphone. 
Em síntese, esse tipo de aplicativo nada mais é do que um site responsivo e adaptado 
que se comporta como um aplicativo. Ele pode ser acessado de qualquer tipo de 
navegador e funciona nos mais diversos tamanhos de tela, sendo possível criar 
um atalho para ele, que fi cará na tela do dispositivo simulando um aplicativo.
Ao utilizar um PWA, o usuário somente perceberá que não está utilizando 
um aplicativo nativo se prestar muita atenção. Isto porque atualmente a maioria 
dos recursos que um aplicativo nativo pode agregar também pode ser agregado 
pelos PWA. Este cenário não é o mesmo visto nos primórdios destes aplicativos 
baseados na web, onde não era possível, por exemplo, interagir com o Global 
Positioning System (GPS). Mas se a maioria dos recursos está disponível também 
para PWA, como os usuários percebem que estão diante de um PWA? Isso é 
percebido principalmente devido a problemas de performance que se manifestam 
especialmente nos dispositivos que não têm uma grande capacidade de memória.
Se este tipo de aplicativo tem uma limitação conhecida de performance, 
então por que seguimos desenvolvendo e dando espaço para PWA? Algumas 
das vantagens de um PWA são as seguintes:
  é uma boa alternativa para que as empresas consigam se posicionar no 
mercado digital;
  tem um custo mais barato, porque pode ser desenvolvido apenas uma 
vez e disponibilizado para a web e para todas as plataformas mobile;
  tem manutenção facilitada por ser um único software para todas as 
plataformas.
Um PWA possui algumas características bem específicas, destacando-se 
as seguintes (RICHARD, LEPAGE, 2020; JUSTEN, 2018):
  progressivo: deve funcionar para qualquer navegador; 
  responsivo: deve ser adaptável a qualquer computador desktop, celular, 
tablet independentemente do tamanho de tela destes;
  independente de conectividade: embora se baseie na web, deve permitir 
trabalhar off-line ou em redes de baixa qualidade.
Para Justen (2018, documento on-line), o WPA deve apresentar também 
estas características:
- semelhante a aplicativos: deve ser parecido com um aplicativo nativo com 
interações e navegação similares a aplicativos nativos;
- seguro: deve utilizar o protocolo HTTPS para evitar invasões e garantir que 
o conteúdo não seja adulterado;
- reenvolvente: facilita o reengajamento com recursos como notificações push;
- instalável: permite que os usuários criem atalhos para o aplicativo sem 
precisar acessar uma loja de aplicativos; e
- linkável; deve permitir compartilhamento por URL, não requer instalação 
complexa.
WebApps2
2 Tecnologias utilizadas para WebApp
Muitas tecnologias estão envolvidas na criação de um PWA, sendo que, em 
geral, são as mesmas tecnologias envolvidas na criação de um website normal. 
Iniciamos destacando HTML e o CSS. O HTML5 é a linguagem de marcação 
que está por trás de todas as páginas da web e, consequentemente, por trás de 
uma PWA. É com o HTML que é desenvolvida a estrutura dos sites. O CSS, 
por sua vez, permite tratar o leiaute das páginas e é utilizado para “modelar” 
a responsividade e a adaptabilidade do site através de confi gurações de cores, 
tamanhos e mudanças de leiaute, conforme o tamanho da tela em que o site 
está sendo exibido.
Somadas a estas duas tecnologias, que são básicas, estão os frameworks, 
que auxiliam na utilização destas, e as linguagens de programação uti-
lizadas no backend das PWAs, uma vez que não basta ter um leiaute 
responsivo; as PWAs precisam ter inteligência para, por exemplo, interagir 
com o banco de dados, e isto só é possível fazendo uso de linguagens 
de programação.
Algumas tecnologias utilizadas por WebApps se aplicam a qualquer fra-
mework utilizado e precisam ser destacadas. Falaremos um pouco sobre: 
armazenamento no lado-cliente, notificações push e service workers. 
  Armazenamento no lado cliente (client-side storage): a maioria 
dos sites trabalham com o armazenamento de dados em servidor, 
de forma que as suas informações que trafegam pelo aplicativo são 
salvasem um servidor remoto, e não na sua máquina. Nos PWAs se 
utiliza, além de servidor armazenamento local, o armazenamento 
do cliente. É isso que permite, por exemplo, que você feche um 
aplicativo de compras com produtos no carrinho e, ao reabri-lo, os 
produtos ainda estejam ali.
  Notificações de push (push notification): é uma notificação que se difere 
das demais porque é exibida sem interferência ou desejo do usuário; 
é uma espécie de popup para dispositivos móveis. Nos smartphones 
com sistema Android, as push notification surgem na tela de bloqueio, 
e ao clicar sobre elas o usuário é direcionado para o aplicativo que a 
gerou — isto acontece, por exemplo, quando chega uma mensagem em 
um aplicativo de mensagens instantâneas.
3WebApps
  Service Worker: o service worker é uma característica importante 
dos aplicativos para web. É um script que executa separado de seu 
site, mas agregando funções importantes a ele. O service worker 
tem como uma das suas principais funções interceptar requisições 
para que, em casos onde o site está fora do ar, o service worker possa 
responder dando ao usuário a impressão de que o aplicativo web está 
operando normalmente.
A ferramenta Lighthouse permite qualificar aplicações web em relação aos requisitos de 
melhoria progressiva. Seu principal objetivo é gerar um relatório avaliando requisitos de 
performance, acessibilidade e o quão progressiva é uma aplicação. Ela é uma extensão 
do Google Chrome. Instale e teste os seus aplicativos.
3 Transformando um site em um WebApp
Como comentamos no início do capítulo, todo PWA é primeiramente um site, 
e a primeira premissa é que este site precisa estar no protocolo HTTPS e com 
leiaute responsivo. Aqui, não falaremos de responsividade, pois este conceito 
está associado a outros campos de estudo, focaremos em, após termos um site 
responsivo pronto, como transformá-lo em PWA.
Todo projeto de site que se torna um PWA precisa ter um arquivo chamado 
manifest.json. O propósito do arquivo manifest é transformar uma 
aplicação web em algo instalável (LIMA, 2017). Este arquivo contém infor-
mações que são básicas para o aplicativo, como por exemplo: a cor de fundo 
do aplicativo, a tela que será exibida enquanto o aplicativo carrega, o logotipo 
do aplicativo, entre outras configurações que dizem respeito ao aplicativo e 
não à página web em si. 
Existem algumas ferramentas gratuitas que podem auxiliar no processo 
de criação do arquivo manifest — alguns exemplos são o WebApp 
Manifest Generator e o PWA Builder (LIMA, 2017). A Figura 1, a seguir, 
WebApps4
traz o exemplo de um manifest.json que foi criado para uma aplicação 
específica, que é um aplicativo para implementação do jogo de planning 
poker, uma prática utilizada por equipes ágeis no planejamento de uma 
sprint. Neste trecho de código, o manifest.json é configurado para exibir 
uma tela de apresentação (splash screen) no momento em que a aplicação 
é carregada.
Figura 1. Arquivo manifest.json.
Fonte: Lima (2017, documento on-line).
Em seguida, você precisa ter um Service Worker. “Um Service Worker, 
como já foi descrito, é um script que seu navegador executa em segundo plano, 
separado da página da Web, possibilitando recursos que não precisam de 
uma página da Web ou de interação do usuário” (JUSTEN, 2018, documento 
on-line); é o service worker que permite que o aplicativo seja acessível off-
-line (LIMA, 2017). Na criação de um Service Worker, algumas coisas bem 
específicas precisam ser feitas, sendo elas:
5WebApps
Instalar o Service Worker — Durante esta etapa é adicionado ao cache do 
aplicativo todos os arquivos estáticos, que são gerados no build fi nal, isto é, os 
arquivos que serão carregados de forma estática quando um acesso off -line é 
feito no aplicativo. Este cache é versionado através da variável CACHE_NAME, 
para que seja possível controlar a adição de novas funcionalidades estativas 
ao site. Este processo é feito dentro de um arquivo novo. Este processo pode 
ser visto na Figura 2.
Figura 2. Instalar o Service Worker.
Fonte: (Lima (2017, documento on-line).
Ativar o Service Worker — É a continuação do mesmo arquivo criado 
anteriormente. Como sugere o nome, este trecho de código permite que o 
service worker seja ativado. Ou seja, o service worker pode estar instalado 
e não ativo, e pode ser ativado a partir de um comando específi co, como 
por exemplo, quando a cache é alterada. Este processo pode ser visto na 
Figura 3.
WebApps6
Figura 3. Ativar o Service Worker.
Fonte: Lima (2017, documento on-line).
Interceptar requisições — Utilizado antes de se fazer um request, buscar 
as informações no cache, para que seja feito um request apenas quando não 
existe no cache. Esse código é continuação, inserido no mesmo arquivo que 
o item anterior, processo que pode ser visto na Figura 4.
Figura 4. Interceptar requisições.
Fonte: Lima (2017, documento on-line).
7WebApps
Adicionar no arquivo index.html — É preciso, por fi m, associar o service 
worker ao site através da inserção do service worker no arquivo index.html 
da sua aplicação, conforme pode ser visto na Figura 5.
Figura 5. Adicionar no index.html.
Fonte: Lima (2017, documento on-line).
Esses passos permitem que o seu site responsivo seja transformado em 
um aplicativo, contudo eles não são os únicos passos. Eles permitirão instalar 
o aplicativo no dispositivo, que seja exibida uma página de apresentação, 
um ícone para o aplicativo e, quando off-line, que o aplicativo ainda esteja 
disponível. Contudo para que seu webapp seja realmente competitivo quando 
comparado a um aplicativo nativo, você deve adicionar progressivamente 
outros elementos, como por exemplo, as push notification que foram descritas 
acima, interação com GPS e com câmera. 
É importante enfatizar, além disso, que um bom PWA precisa ter um 
backend tão bem desenvolvido quanto um front-end, e no caso de PWAs o 
ideal é basear o backend em serviços, por exemplo, API REST, isto porque 
torna o aplicativo mais leve e fácil de manter.
WebApps8
JUSTEN, W. Como fazer seu site funcionar offline com PWA. 2018. Disponível em: https://
willianjusten.com.br/como-fazer-seu-site-funcionar-offline-com-pwa/. Acesso em: 
26 abr. 2020.
LIMA, M. Como criar seu primeiro Progressive Web App do Zero. 2017. Disponível em: 
https://medium.com/tableless/como-criar-seu-primeiro-progressive-web-app-do-
-zero-a7e6ca5fb21e. Acesso em: 26 abr. 2020.
RICHARD, S.; LEPAGE, P. What makes a good Progressive Web App? 2020. Disponível em: 
https://web.dev/pwa-checklist/. Acesso em: 26 abr. 2020.
Leitura recomendada
PONTES, G. Progressive Web Apps: construa aplicações progressivas com React. São 
Paulo: Casa do Código, 2018.
Os links para sites da web fornecidos neste capítulo foram todos testados, e seu fun-
cionamento foi comprovado no momento da publicação do material. No entanto, a 
rede é extremamente dinâmica; suas páginas estão constantemente mudando de 
local e conteúdo. Assim, os editores declaram não ter qualquer responsabilidade 
sobre qualidade, precisão ou integralidade das informações referidas em tais links.
9WebApps
DICA DO PROFESSOR
Nem todo website pode ser transformado em um WebApp. Para que isso seja possível, o website 
precisa ter algumas características específicas no que diz respeito à responsividade.
Como saber se o site está responsivo suficiente para ser um WebApp? Descubra a resposta na 
Dica do Professor. 
Conteúdo interativo disponível na plataforma de ensino!
EXERCÍCIOS
1) WebApps estão no mercado mobile para preencher uma lacuna deixada pelos 
aplicativos nativos de dispositivos móveis no que diz respeito à portabilidade e à 
facilidade de desenvolvimento. Sobre WebApps, site responsivo e aplicativos nativos, 
assinale a alternativa correta:
A) Site responsivo e WebApp são a mesma coisa, mas o WebApp permite criar atalhos.
B) Sites responsivos e WebApps não são acessíveis off-line.
C) WebApps se assemelham a aplicativos, mas não interagem com elementosnativos dos 
dispositivos (ex: câmera e GPS).
D) Aplicativos nativos são acessíveis em qualquer navegador e em qualquer tamanho de tela.
E) WebApps são aplicativos que são disponíveis off-line e interagem com componentes 
nativos dos dispositivos.
Um recurso que pode ser adicionado ao seu aplicativo web é push notification. Esse 2) 
tipo de notificação está disponível na maioria dos aplicativos comerciais. Sobre essas 
notificações, assinale a alternativa correta:
A) Um exemplo de push notification são as mensagens exibidas para confirmar ou cancelar 
uma ação, por exemplo, ao fechar o aplicativo.
B) Push notification são mensagens agendadas pelo usuário que, posteriormente, são 
exibidas, como, por exemplo, um despertador.
C) É possível inserir push notification em PWA. Contudo, para isso, é necessário fazer uso de 
um emulador.
D) Push notification é um resurso exclusivo do sistema operacional Android.
E) Um exemplo de push notification são notificações de chegada de mensagens.
3) Um site responsivo já construído pode ser utilizado como porta de entrada para o 
desenvolvimento de um WebApp. Para isso, algumas ações precisam ser tomadas. 
Sobre essas ações, assinale a alternativa correta:
A) É necessário criar um arquivo manifest.json, que é usado para disponibilizar o aplicativo 
nas lojas, por exemplo, no Google Play.
B) É necessário criar um arquivo service worker para que seja exibida uma mensagem para o 
usuário instalar o aplicativo no dispositivo.
C) O icone que será utilizado pelo aplicativo é informado no arquivo manifest.json.
D) O arquivo manifest.json é utilizado para, antes de fazer um request, buscar as informações 
no cache para que seja feito um request apenas quando não existe no cache.
E) É preciso, por fim, associar o manifest.json no site por meio da inserção de uma referência 
ao manifest.json no index.htm da sua aplicação.
4) Um WebApp também pode ser chamado de PWA. Porém, para ser considerado um 
PWA, o site precisa ter algumas características bem específicas. Sobre elas, assinale a 
alternativa correta:
A) Progressivo: deve ser adaptável a qualquer computador desktop, celular e tablet, 
independente do tamanho de tela.
B) Responsivo: deve funcionar para qualquer navegador.
C) Reenvolvente: facilita o reengajamento com recursos nativos do dispositivo como, por 
exemplo, notificações push.
D) Localizável: deve permitir compartilhamento por URL; não requer instalação complexa.
E) Seguro: deve utilizar o protocolo HTTP para evitar invasões e garantir que o conteúdo não 
seja adulterado.
5) Uma das principais características de um PWA é estar sempre disponível mesmo off-
line; para que isso seja possível, é necessário efetuar a programação de um 
componente específico no seu PWA, chamado de Service Worker. Assinale a 
alternativa que contém a descrição correta de alguma característica desse 
componente:
A) Service Worker é um script executado pelo navegador em segundo plano.
B) Os Service Workers não incluem recursos de notificações push.
O Service Worker atua para que não seja possível interceptar e tratar solicitações de rede, C) 
respondendo com cache.
D) O Service Worker tem uma versão chamada CACHE_VERSION, que é utilizada para 
versionar o cache do aplicativo.
E) O Service Worker precisa ser linkado ao site no arquivo propert.xml.
NA PRÁTICA
Algumas empresas descobrem nos WebApps uma estratégia para atingir novos mercados, para 
serem localizadas na Web e acompanhar as tendências do universo mobile.
Neste Na Prática, você vai conhecer o case de uma empresa que atingiu excelentes números 
com a criação de um WebApp.
SAIBA MAIS
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do 
professor:
O que são Progressive WebApps?
Este site traz uma visão geral do que são PWAs e suas formas de utilização, vantagens e 
desvantagens.
Conteúdo interativo disponível na plataforma de ensino!
Seu primeiro Progressive WebApp
Este site apresenta uma descrição para criar o seu primeiro PWA a partir de um website, bem 
como das características para as WebApps.
Conteúdo interativo disponível na plataforma de ensino!
Guia básico sobre Progressive WebApps
Este site contém um guia com diversas informações sobre características, tendências e 
justificativas do porquê criar um WebApp.
Conteúdo interativo disponível na plataforma de ensino!
Wilson
Máquina de escrever
https://brasil.uxdesign.cc/o-que-s%C3%A3o-progressive-web-apps-86e1b5306051
Wilson
Máquina de escrever
https://developers.google.com/codelabs/pwa-training/pwa03--going-offline?hl=pt-br#0
Wilson
Máquina de escrever
https://waldyrfelix.com.br/guia-b%C3%A1sico-sobre-progressive-web-apps-4eaa42f17f63?gi=f9d0579fabf