Lembra quando o primeiro iPhone foi lançado? Não existia App Store: a aposta da Apple eram as aplicações para a web. Os desenvolvedores, no entanto, se frustraram e insistiam em uma alternativa que permitisse mais desempenho e acesso a mais recursos do aparelho. Atendendo aos pedidos, a Apple lançou a App Store no ano seguinte.

Sabemos agora que essa mudança estratégica causou uma revolução e fomentou o crescimento do mercado de aparelhos móveis. O slogan There’s an app for that resume muito bem o tom neste período de ascensão dos smartphones. Já falamos aqui sobre como decidir desenvolver um app.

Apesar da explosão dos apps, novidades importantíssimas também chegaram à plataforma web. Em 2005, a Apple liberou o código do seu motor de renderização WebKit. Em 2008 a Google lançou o Chrome, também baseado no WebKit, reacendendo a guerra dos browsers. A empresa liderou um grande incentivo ao uso da especificação HTML5, o que permitiu a gradual obsolescência do Flash, incentivou melhoras na execução de Javascript, e criou padrões como o AMP (Accelerated Mobile Pages), o que culminou num renascimento da plataforma e um novo foco em aparelhos móveis.

Agora, mais uma vez, a web aparece como uma solução para unificar as interfaces e agilizar o desenvolvimento. Vamos conhecer os recursos que podem tornar a experiência de WebApps quase indistinguível do uso de aplicativos nativos no iOS e Android.

A plataforma web hoje

Dados recentes chamam a atenção em vários aspectos. O uso de telas verticais está aumentando, assim como o acesso web feito exclusivamente via dispositivos móveis. O tempo total gasto no consumo de mídia digital online dobrou entre 2008 e 2015. Em 2014, dispositivos móveis ultrapassaram os PCs e hoje contabilizam mais de 50% do tempo total entre adultos americanos, segundo relatório da comScore. E mais: a audiência da web móvel é três vezes maior que a de aplicativos, e cresce duas vezes mais rápido, embora retenha o usuário por menos tempo, segundo dados de 2016.

growth-mobile-vs-desktopç

Dados da comScore mostrando a evolução do uso de mídia digital em desktops e plataformas móveis.

Outro dado importante é a mudança no varejo online. Nesta atividade, a proporção de usuários multiscreen (aqueles que alternam seu acesso à internet entre desktops e dispositivos móveis), já chega a 57%. Segundo o relatório, a tendência é de aumento deste número, assim como deve aumentar o número de usuários que acessam a web exclusivamente por smartphones e tablets. Enquanto isso, o acesso somente por PCs cai ano a ano.

multi-platadorm-retal

Segundo relatório da comScore de 2014, em apenas 6 meses, a proporção de usuários multiscreen fazendo compras online foi de 54% para 57%.

De qualquer forma, ainda pode ser precipitado se agarrar ao conceito mobile first de forma muito literal. Embora o crescimento das plataformas móveis seja explosivo, e a transição para a chamada era pós-PC parece inevitável, o computador pessoal ainda é extremamente relevante. Entre os usuários da internet, 91% têm PC, 80% têm smartphones, e 47% têm tablets. Considerando que o uso multiplataforma da web é a norma para 76% dos adultos americanos, uma estratégia muito focada em sistemas móveis pode não alcançar toda a audiência.

mobile-vs-web-audience

Crescimento da audiência da web móvel e de apps nos últimos 2 anos.

Tendo em vista a necessidade de atender os usuários da melhor forma e garantir um desenvolvimento mais eficiente, faz sentido trabalhar em um WebApp responsivo, ou não? Eis as vantagens e desvantagens em relação ao app nativo.

Webapps vs Apps Nativos

webapps-appnativo

Atualmente já é possível utilizar recursos bastante avançados dependendo basicamente de HTML, CSS e Javascript. Câmeras, geolocalização, notificações push, utilização offline, 3D e realidade virtual, entre outros, são todos disponíveis através de padrões abertos implementados diretamente pelo browser, o que garante, em tese, que seja necessário apenas um código para atender todos os formatos e plataformas.

Sem contar que as plataformas móveis iOS e Android já oferecem boa integração com o sistema. É possível adicionar atalhos de uma página da web à tela inicial, salvar dados no aparelho para que o usuário utilize offline, e configurar sua interface para que se pareça com um app nativo (figura abaixo).

progressive-web-app

Aparência de um WebApp configurado para utilizar os recursos de integração ao sistema Android.

A vantagem de um aplicativo desenvolvido com esses cuidados, chamado por técnicos de progressive web app (PWA), é que o usuário comum dificilmente nota que se trata de apenas um site. Alguns exemplos de destaque são o Google I/O WebApp, Google Spaces, Telegram, Flipboard, Flipkart e até um clone do jogo Flappy Bird, o Progressive Web Flap.

Vale frisar, no entanto, que o app nativo ainda apresenta algumas vantagens, como maior integração a funções do sistema e desempenho superior em aplicações mais complexas são aspectos críticos que devem ser considerados.

Frameworks e outros recursos

webapps-coding

Para tirar proveito de funcionalidades avançadas na web, os desenvolvedores utilizam conjuntos de ferramentas que adicionam funções que a plataforma ou os navegadores não fornecem. Entre os frameworks mais utilizados podemos citar Angular.js, React.js e Ember.js. São ótimas soluções, mas o custo pode ser alto: embora ofereçam enormes benefícios, eles podem tornar as aplicações pesadas. Isso pode fazer muita diferença em um cenário onde o aparelho tem desempenho limitado e conexão lenta, que é a realidade de uma parcela importante da população, e do próximo bilhão de usuários.

Em 2011 a W3C anunciou o padrão Web Components, que traz um poder sem precedentes para o WebApp. As novas especificações visam padronizar a implementação de recursos avançados. A ideia é que um webapp seja composto de vários elementos independentes e reutilizáveis, que têm funções bem definidas e comunicam dados entre si de forma padronizada. Já existem bibliotecas de apoio, como Polymer, X-Tag, Bosonic e SkateJS, que facilitam a implementação e também preenchem lacunas no suporte dos navegadores.

A diferença aqui é que essas bibliotecas não são obrigatórias, e são interoperáveis. Ou seja, pode-se escolher desenvolver um elemento que fornece acesso à câmera usando Polymer e importar um elemento X-Tag disponibilizado livremente na web para aplicar filtros na imagem. It just works. Ok, nem sempre…

Na prática, a especificação final da primeira versão dos Web Components ficou pronta no meio de 2016, e a demora e indefinição em relação a alguns aspectos atrasou a adoção do padrão em todos os navegadores. Mas o cenário é extremamente positivo. As versões mais recentes de Chrome e Safari já suportam a maior parte do padrão, enquanto Firefox e Edge também atendem os requisitos experimentalmente.

É simples acompanhar o status de suporte. O site caniuse.com fornece uma maneira fácil de verificar o estado de suporte de qualquer API (application programming interface, métodos de acesso a recursos específicos) em todos os navegadores, de acordo com suas versões.

Conclusões

O que parece claro no cenário atual é que os apps nativos não vão sumir tão cedo, mas a plataforma web não pode ser ignorada. Com a tecnologia disponível e a tendência de crescimento, é importante considerar a opção de apostar num WebApp bem desenvolvido, que pode otimizar a experiência e ampliar a audiência.

A One Day Testing pode ajudar com o desenvolvimento do seu novo WebApp, garantindo o melhor desempenho em todas as telas. Vamos falar sobre isso tomando um café? Me mande um e-mail em julio.viegas@sofist.com.br ou ligue em (19) 3291-5321 para conversarmos.