“Apps nativos são rápidos, mobile websites são lentos.” Há cerca de dois anos, quando o acesso web de usuários via mobile superou o acesso via desktop, a questão acima se tornou um problema real. Consequentemente, foi o tema de muitos questionamentos no mercado web.

“Apps nativos são rápidos, mobile websites são lentos.” Há cerca de dois anos, quando o acesso web de usuários via mobile superou o acesso via desktop, a questão acima se tornou um problema real. Consequentemente, foi o tema de muitos questionamentos no mercado web. Neste artigo, você verá como os Progressive Web Apps (PWA) surgiram como uma solução à essa questão.
A necessidade de prover uma melhor experiência web a usuários mobile culminou em algumas iniciativas para a melhoraria da performance das aplicações web. Em 2015, Google e Twitter, e outras centenas de gigantes da comunicação (The Guardian, The Washigton Post, UOL dentre outros) iniciaram o Accelerated Mobile Pages Project (AMP &#8211; www.ampproject.org). O propósito era de entregar páginas estáticas de rápido carregamento.
Paralelamente, frameworks para a “hibridização” como Cordova, Ionic e PhoneGap se popularizaram entre desenvolvedores. Eles promoviam, de certa forma, a aproximação entre a experiência nativa e a web.
Contudo, tais abordagens, apesar de válidas, são na verdade um remendo para um problema mais sistêmico. Os Websites e web applications, fundamentalmente, não são feitos para smartphones e tablets.
Felizmente, as ferramentas disponíveis para o desenvolvimento web estão em constante evolução. Recentemente, uma série de princípios e funcionalidades têm se popularizado. Além disso, elas prometem diminuir o gap entre a experiência proporcionada por um app nativo e um web app.
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#As-Progressive-Web-Apps-PWA">1 As Progressive Web Apps (PWA)</a><ul><li><a href="#Para-que-isso-ocorra-sua-construcao-baseia-se-em-alguns-principios">1.1 Para que isso ocorra, sua construção baseia-se em alguns princípios:</a></li></ul></li><li><a href="#Service-Workers">2 Service Workers</a></li><li><a href="#Application-Shell-Architecture-ASA">3 Application Shell Architecture (ASA)</a><ul><li><a href="#Progressive-Web-Apps-no-mundo-real">3.1  Progressive Web Apps no mundo real</a></li></ul></li><li><a href="#Outros-exemplos-de-PWAs-no-mundo-real">4 Outros exemplos de PWAs no mundo real</a></li><li><a href="#Entao-Ja-posso-desenvolver-meus-PWAs">5 Então? Já posso desenvolver meus PWAs?</a><ul><li><a href="#Como-se-destacar-da-concorrencia">5.1 Como se destacar da concorrência?</a></li></ul></li></ul></div>
<h2 class="western" align="JUSTIFY">As Progressive Web Apps (PWA)</h2>
Basicamente, as Progressive Web apps são aplicações que se tornam progressivamente mais &#8220;app-like&#8221; à medida que os usuários as utilizam, começando pelas abas do navegador. Isso culmina no ponto em que você simplesmente adiciona o Web App à sua página inicial e pronto. Ele passa a adquirir funções que antes eram exclusivas de aplicativos nativos, como geolocalização, notificações, uso offline, etc.
Os PWAs utilizam as capacidades dos navegadores modernos para entregar ao usuário uma experiência tão boa quanto à de um aplicativo nativo. Para o usuário, a principal vantagem é a de não precisar se comprometer a baixar um aplicativo antes mesmo de saber se valerá a pena ou não. Esse é um dos maiores problemas dos apps nativos de hoje.
<h3 class="western" align="JUSTIFY">Para que isso ocorra, sua construção baseia-se em alguns princípios:</h3>
<ul>
<li>
Aprimoramento progressivo: a construção de uma página deve partir de uma base comum que garanta a execução nos mais diversos navegadores. Para depois, acrescentar melhorias que só funcionem em navegadores modernos.
</li>
<li>
Responsividade: deve se adequar a qualquer dispositivo, seja ele desktop, mobile, tablet, ou outro.
</li>
<li>
Independência da conectividade: utilização de cache e service workers para permitir boa utilização sob conexões de baixa qualidade ou até mesmo offline.
</li>
<li>
App-like: Utilização de <a href="https://developers.google.com/web/fundamentals/architecture/app-shell/">App Shell Architecture</a> para prover a “sensação” de utilizar um app nativo, tanto na navegação quanto nas interações.
</li>
<li>
Atualizável: o usuário não precisa “baixar uma atualização do app” de tempos em tempos. Ou seja, a nova versão estará disponível, assim que o usuário abrir a web novamente.
</li>
<li>
Identificação como aplicação: Utilização de web manifest para permitir a identificação da PWA como uma “aplicação” pelos search engine e pelos browsers
</li>
<li>
Segurança: Servida necessariamente via protocolo TLS.
</li>
</ul>
A idéia que norteia a construção de uma PWA é que o próprio app favoreça o estreitamento da relação entre usuário e aplicativo. Para isso, ao utilizar continuamente a aplicação, o usuário deve se beneficiar de recursos que agreguem valor à sua experiência. Por exemplo: carregamento mais rápido (por meio de <a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers">service workers</a>), recebimento de <a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">notificações</a> relevantes, ter a possibilidade de <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android">instalação do app</a> e exibição em <a href="https://developers.google.com/web/fundamentals/native-hardware/fullscreen/">tela cheia</a>.
<img fetchpriority="high" decoding="async" class="alignnone wp-image-1102 size-large" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2017/04/PWA-1024x627.png" alt="Exemplos de Progressive web apps" width="1024" height="627" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2017/04/PWA-1024x627.png 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2017/04/PWA-300x184.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2017/04/PWA-768x470.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2017/04/PWA.png 1298w" sizes="(max-width: 1024px) 100vw, 1024px" />
Tecnicamente, o funcionamento das Progressive Web Applications baseia-se, principalmente, em duas estruturas: a Application Shell Architecture e os Service Workers.
<h2 class="western" align="JUSTIFY">Service Workers</h2>
Service Workers são scripts, que rodam em background, capazes de interceptar e responder a diversos eventos. Como por exemplo, chamadas http. Eles são instalados pela própria aplicação e permanecem ativos mesmo que a aplicação não esteja aberta no browser.
Por meio dos SWs é possível, por exemplo, tratar falhas na conexão de rede do usuário. Um service worker pode realizar o cache de requisições específicas. E, dependendo do caso, pode retornar tanto respostas pré-programadas (de erro, por exemplo) quanto respostas que estejam em cache. Esse mecanismo permite acelerar o carregamento da página como um todo ou até mesmo o uso off-line do app. Por rodarem ainda que a web app não esteja aberta no browser, eles também são uteis para o tratamento de notificações push.
<h2 class="western" align="JUSTIFY">Application Shell Architecture (ASA)</h2>
A Aplication Shell Architecture está diretamente relacionada à capacidade dos service workers de interceptar, armazenar e retornar recursos para a aplicação. Na ASA, o service worker é responsável por fazer, durante a primeira visita do usuário, o cache (via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache/">Cache API</a>) da estrutura básica da aplicação, como imagens, arquivos HTML, CSS e JavaScript. Inclusive, ele pode requisitar e armazenar arquivos não acessados pelo usuário naquele momento. Ao acessar novamente o site/aplicação, o carregamento do mesmo torna-se muito mais rápido, uma vez que o SW será capaz de disponibilizar esses arquivos instantaneamente.
Já a application shell pode ser imaginada como os quadros nas paredes da escola de magia de Hogwarts. A estrutura básica está sempre ali, imutável, enquanto os personagens estão livres para se mover, sair e voltar como desejarem. O quadro é estático, enquanto os personagens são dinâmicos.
Na Application Shell Architecture, o “quadro” estático é servido pelo Service Worker, enquanto o conteúdo é dinamicamente construído a partir de requisições a uma API ou mesmo pelo próprio service worker. Como por exemplo, no caso de falhas de conexão.
<h3 class="western" align="JUSTIFY"> Progressive Web Apps no mundo real</h3>
Pegando o site do <a href="https://developer.chrome.com/devsummit/">Chrome Dev Summit 2016</a> como exemplo é possível ver todo o fluxo de uma PWA:
<ol>
<li>
O site inicia como uma aba normal do browser. À primeira vista é um site como outro qualquer, sem nenhum “super poder”. Porém, foi construído utilizando algumas premissas de PWAs como TLS, Service Workers, Manifests, e Design Responsivo.
</li>
<li>
A segunda (ou terceira, ou quarta) vez em que o site for visitado – a grosso modo, quando o browser identificar que o site é acessado com frequência – um banner será apresentado perguntando se o usuário deseja adicionar o aplicativo á tela inicial.
</li>
<li>
Quando iniciado a partir da tela inicial, o app é incorporado ao ambiente do dispositivo: a exibição ocorre em tela cheia e o funcionamento do app ocorre mesmo sem conexão de rede.
</li>
</ol>
<h2 class="western" align="JUSTIFY">Outros exemplos de PWAs no mundo real</h2>
<ul>
<li>
<a href="https://twitter.com/">https://twitter.com/</a>
</li>
<li>
<a href="https://m.pt.aliexpress.com/">https://m.pt.aliexpress.com/</a>
</li>
<li>
<a href="https://flipboard.com/">https://flipboard.com/</a>
</li>
<li>
<a href="https://app.ft.com/index_page/home">https://app.ft.com/index_page/home</a>
</li>
</ul>
<h2 class="western" align="JUSTIFY">Então? Já posso desenvolver meus PWAs?</h2>
Na web, é comum que ferramentas poderosas surjam e cresçam sem alarde, tornando-se lugar comum para alguns e quase desconhecida para outros. Infelizmente, esse é um processo inevitável. A necessidade de desenvolver aplicações que rodem em diversos ambientes, assim como, o processo assíncrono de modernização dos browsers afasta desenvolvedores de funcionalidades não “padronizadas”. Todavia, é fundamental a qualquer desenvolvedor ao menos conhecer o que tem surgido na indústria.
No caso das tecnologias relacionadas aos PWAs, nem todos os navegadores suportam todas as funcionalidades necessárias para que um PWA funcione a 100% de suas capacidades. Entretanto, é uma questão de tempo até que essa tecnologia esteja difundida. Afinal, toda tecnologia acaba empurrando os limites das plataformas onde ela roda.
Todavia, não espere para dar o próximo passo em direção ao futuro da web móvel. O potencial oferecido pelas Progressive Web Apps é inegável, e quanto mais cedo você as adotar, mais cedo poderá colher os benefícios. Aproveite a crescente convergência entre browsers e apps para impulsionar sua presença online e oferecer experiências excepcionais aos usuários.
<h3>Como se destacar da concorrência?</h3>
Adotar as PWAs pode ser uma estratégia decisiva para destacar-se da concorrência, melhorar o engajamento do usuário e aumentar a satisfação do cliente. Essas aplicações proporcionam maior alcance, pois podem ser acessadas por qualquer dispositivo, independentemente do sistema operacional. E o melhor de tudo é que, ao investir em PWAs, você não precisa sacrificar o desempenho em prol da compatibilidade, pois essas tecnologias são projetadas para se aprimorarem progressivamente, proporcionando uma experiência ágil e eficiente em qualquer plataforma.
Portanto, não deixe as oportunidades passarem despercebidas. Este é o momento ideal para abraçar as Progressive Web Apps e conquistar o público em potencial. Entre em contato com a dti e descubra como nossa equipe de especialistas pode ajudá-lo a criar PWAs personalizados e alinhados com os objetivos do seu negócio. Potencialize sua presença digital, ofereça uma experiência única aos seus usuários e esteja à frente da curva da inovação no universo da web móvel. O futuro está aqui, e as PWAs são o caminho para chegar lá!​
Questões à parte, uma coisa é certa: as fronteiras entre browser e app estão cada vez menores. Para o bem de usuários, designers e desenvolvedores.
Para saber como criar PWA&#8217;s adequados ao seu negócio, entre em <a href="contato@dtidigital.com.br">contato</a> com a dti!
Créditos: Marco Túlio Ferreira

PWA – Progressive Web Apps

Desbloqueie o futuro do seu negócio

Confira outros artigos