Desenvolva Progressive Web Apps ao invés de APP para dispositivos móveis
Um estudo da Ericsson aponta que em 2020 90% das pessoas com mais de 6 anos de idade terão um dispositivo móvel. Com a popularização dos dispositivos, empresas podem planejar o desenvolvimento de seu próprio aplicativo para celular, seguindo a demanda do uso dos dispositivos pelo mercado. Por outro lado, os desenvolvedores também podem prospectar a cada dia negócios que precisem desses aplicativos. Com isso, aparentemente o desenvolvimento de APP com arquitetura nativa ou híbrida parece gerar uma oportunidade explosiva na área de desenvolvimento de software. Atualmente, estima-se que há mais de 3 milhões deles na Google Play.
Outro dia, surgiu um potencial cliente com a ideia de ter um APP de comércio eletrônico para um pequeno mercado, que fica em uma vila de uma grande cidade nordestina. O desenvolvimento do software foi descartado ao esclarecer o desinteresse dos usuários em instalar aplicativos desse tipo. Além de sua restrição de uso, há o inconveniente do uso de espaço de memória dos dispositivos e, até mesmo, por ter que consumir tráfego de dados da operadora de telefonia celular pela qual o usuário estivesse conectado. Esses sistemas instalados hoje podem fazer mais sentido para instituições financeiras, bem como empresas baseadas em software como Facebook, Uber, ifood, WhatsApp, Waze, Instagram, Popcorn Time etc.
Nesse sentido, é oportuno desenvolver os Progressive Web Apps(PWA). De acordo com a Wikepedia, o conceito foi criado por Frances Berriman e Alex Russel. As PWAs têm entre suas características a disponibilidade para todos os usuários Web, independente de navegador, ser ajustável para desktop ou dispositivos móveis, estar disponível off-line ou para baixas velocidades de acesso, parecer um aplicativo móvel com interação e navegação similares, estarem atualizadas de acordo com o negócio do proprietário, além de ser segura por usar o protocolo HTTPS. As PWAs são identificadas como aplicações de acordo com o manifesto Web da W3C, podem possuir as push notifications - um recurso que faz com que o usuário volte a eles, são instaláveis - ao permitir que seja colocado um atalho em dispositivos e são compartilhados facilmente por serem “linkáveis”.
Como são aplicações “linkáveis”, o compartilhamento das PWAs entre amigos e familiares é mais simples. Essa propaganda boca a boca pode fazer a diferença na estratégia de divulgação do aplicativo, pois ela ainda é um dos principais meios de divulgação em diversos mercados. O Gmail, por exemplo, se tornou um dos serviços de e-mail mais usados com a indicação para amigos em sua estratégia de divulgação. Hoje, a Google oferece serviço pago de e-mail e diversos aplicativos Web para empresas, concorrendo com a Microsoft.
Uma tática para reforçar o engajamento é o uso de notificações, chamadas de push notifications. Com isso pode-se fazer com que o usuário volte a usar a aplicação de acordo com seus interesses. Casos como de um carrinho de compras abandonado, por exemplo, possibilitam uma comunicação mais pessoal, assertiva.
As PWAs devem ser tanto responsivas quanto de carregamento rápido. A responsividade se tornou essencial e, com a baixa velocidade de tráfego de dados nas redes de telefonia celular, o cuidado com o desempenho também é crucial, passando pela otimização das imagens e o uso de recurso de “minificação” das Single Page Application(SPA). Frameworks como Angular, React e Vue podem ser adequados em PWAs. O bloqueio de carregamento de página provocado por JavaScript deve ser evitado, colocando-se uma chamada para esses scripts em local adequado na página- próximo à tag HTML </body>. O teste de desempenho, por sua vez, deve fazer parte do processo de desenvolvimento.
Para o PWA funcionar, você vai precisar da denominada shell de aplicativos, ou seja, uma SPA que carrega de forma confiável e instantânea na tela do usuário, semelhante ao que se vê em aplicativos nativos. Observe que a SPA irá trazer uma referência ao service worker <script src=”app.js” async></script>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App Shell</title>
<link rel="manifest" href="/manifest.json">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Shell</title>
<link rel="stylesheet" type="text/css" href="css/inline.css">
</head><body>
<header class="header">
<h1 class="header__title">App Shell</h1>
</header> <nav class="nav">
...
</nav> <main class="main">
...
</main> <div class="dialog-container">
...
</div> <div class="loader">
<!-- Aqui é um espaço para o conteúdo da PWA-->
</div> <script src="app.js" async></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('O ServiceWorker funcionou dentro do esscopo: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('O ServiceWorker falhou: ', err);
});
}
</script>
</body>
</html>
Um Service Worker é 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.
Na instalação de um service worker — lembre-se que há o pré-requisito de ele usar o protocolo HTTPS, inicie o processo registrando-o em sua página. Isso informa ao navegador onde reside o arquivo JavaScript do service worker. Você precisa conhecer as promisses, que são estratégicas aqui. Também tenha cuidado de informar corretamente quais os arquivos que vão fazer parte do cache, como é apresentado no código abaixo, caso contrário todos arquivos serão descartados do cache. Enfim, se a promisses falham, você não tem uma PWA funcional.
var CACHE_NAME = 'meu-site-cache-v0';
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});De acordo com o site caniuse.com , em 05/02/2018 o service worker já era suportado por praticamente todos os browsers, como mostra a tabela abaixo:
Manifesto: como a PWA é exibida
O manifesto é um json obrigatório, controla a exibição do PWA para o usuário, define o ícone para ver aplicativo no aparelho, quais as funcionalidades estarão disponíveis etc. Veja um exemplo de manifesto, que foi declarado na SPA acima para fazer com que ela seja instalável em um dispositivo:
{"short_name": "Meu Site","name": "APP web de Helder Rangel","icons": [{"src": "launcher-icon-1x.png","type": "image/png","sizes": "48x48"},{"src": "launcher-icon-2x.png","type": "image/png","sizes": "96x96"},{"src": "launcher-icon-4x.png","type": "image/png","sizes": "192x192"}],"start_url": "index.html?launcher=true"}
Para criar seu manifesto, você também pode usar a Web App Manifest. Já com com a PWA Builder você ainda faz o manifesto, o service worker e publica a PWA.
Veja um exemplo de PWA desenvolvido por Sérgio Lopes, professor na Caelum.com.br. Foi uma palestra dele que motivou o texto. No site PWA Rocks também há diversos aplicativos disponíveis.
Algumas ferramentas importantes
Há várias ferramentas relacionadas à PWA. O Lighthouse, plugin do Chrome ou executado por linha de comando aprimora a qualidade de apps da Web. Ao informar ao Lighthouse um URL que você quer auditar, ele fará testes na página e vai gerar um relatório sobre o desempenho da página, como mostra a figura acima. Nesse relatório, você poderá usar os testes que apresentaram falha como indicadores do que deve ser feito para aprimorar o aplicativo, além de checar algo crucial, se todos os arquivos necessários para o carregamento offline , informados pelo service worker, estão presentes na aplicação.
A Google disponibiliza funcionalidades para geração do service works para recursos dinâmicos chamadas de API (Interface de Programação de Aplicativos), é o Service Worker Toolbox. No momento, ferramenta para geração de service worker de conteúdo estático, o sw-precache, está com falha em uma biblioteca do gulp.
Outro utilitário que se destaca na área é o Projeto Polymer, que ao aproveitar os Componentes da Web, permite que você crie aplicativos avançados de última geração que sejam rapidamente carregados, respondam instantaneamente e trabalhem em qualquer lugar.
PWA e aplicações JavaScript
No mercado, há outros 3 frameworks JavaScript de destaque que podem se adequar ao PWA: Angular, React e Vue.
A PWA traz ao usuário final a possibilidade de navegar em um site mesmo sem conexão à Internet. Quando um usuário visita frequentemente um site com essa tecnologia, a instalação pode ser sugerida a ele pelo próprio navegador, que ao ser instalada pelo usuário terá o ícone em seu dispositivo, como se fosse de um aplicativo nativo instalado ali.
Dificuldades — No entanto, não faz sentido criar PWA para sites que exijam informações em tempo real, como cotações de ações da bolsa de valores, cotações de moedas etc. Como os arquivos ficam gravados no cache, as eventuais mudanças das informações tão imprescindíveis são perdidas. Outro problema é que caso o criador da aplicação progressiva atualize o seu manifesto — alterando uma cor de fundo, por exemplo, não será possível fazer o mesmo com o usuário que já estiver com ela instalada em seu dispositivo. Alguns sensores e recursos nativos do hardware não estão disponíveis ainda, caso você precise de pressão atmosférica, lanterna, sensor de proximidade, entre outros.