Vivemos num mundo cada vez mais rápido, dinâmico e em constante mudança. As inovações incrementais que têm impacto nas pessoas seguem umas às outras, com um foco cada vez mais claro em:
- desempenho, pense nos dispositivos cada vez mais poderosos que usamos todos os dias ou nas tarefas que nos permitem fazer mais rapidamente;
- experiência, para eliminar qualquer fricção no uso de software/hardware;
- inteligência, com algoritmos que agora funcionam numa perspectiva preditiva.
Itá nesta direção, focando principalmente no desempenho e Experiência do Usuário para o usuário final, que vai para o desenvolvimento Progressive Web App (PWA), uma solução que quer combinar o melhor dos aplicativos nativos e da tecnologia Web.
A Progressive Web App (PWA) é um aplicativo que usa capacidades Web modernas para oferecer aos usuários uma experiência muito semelhante (se não melhor) a um aplicativo nativo.
Aplicativos não semelhantes aos aplicativos tradicionais, os aplicativos web progressivos são um híbrido entre páginas web regulares e aplicativos móveis. O termo “progressivo” refere-se ao fato de que eles introduzem novas funcionalidades e, do ponto de vista da experiência do usuário, eles são inicialmente percebidos como sites normais, mas progressivamente se comportam mais como aplicativos móveis, entre outras coisas multiplataforma.
- Pros e contras da aplicação Web Progressiva
- A importância dos Manifestantes e Trabalhadores de Serviços
- Quais são as tecnologias mais utilizadas para PWA?
- Como escolher entre um PWA ou uma solução nativa
- As diferenças no processo de instalação: PWA vs aplicação nativa
- Os principais exemplos de um aplicativo Web Progressivo
- Então o futuro é “progressivo”?
Pros e contras da aplicação Web Progressiva
As principais características são:
- Progressiva – Funcionam para cada usuário, independentemente do navegador escolhido, pois são construídos na base com princípios de melhoria progressiva.
- Responsive – Adaptam-se aos vários tamanhos de tela: desktop, móvel, tablet ou dimensões que mais tarde podem ficar disponíveis.
- App-like – Comportam-se com o usuário como se fossem aplicativos nativos, em termos de interação e navegação.
- Updated – A informação está sempre atualizada graças ao processo de atualização de dados oferecido pelos funcionários do serviço.
- Seguro – Exposição sobre protocolo HTTPS para evitar que a conexão exiba informações ou altere o conteúdo.
- Pesquisável – São identificados como “aplicativos” e são indexados pelos mecanismos de busca.
- Reativável – Facilita a reativação do aplicativo graças a capacidades como notificações web.
- Instaláveis – Permitem ao usuário “salvar” as aplicações que ele considera mais úteis com o ícone correspondente na tela do seu terminal móvel (tela inicial) sem ter que enfrentar todos os passos e problemas relacionados ao uso da loja de aplicações.
- Ligáveis – Facilmente compartilhados via URL sem instalações complexas.
- Offline – Mais uma vez trata-se de colocar o usuário antes de tudo, evitando a habitual mensagem de erro em caso de conexão fraca ou sem conexão. O PWA é baseado em duas particularidades: primeiro o ‘esqueleto’ do aplicativo, que lembra a estrutura da página, mesmo que seu conteúdo não responda e seus elementos incluam o cabeçalho, o layout da página, assim como uma ilustração que sinaliza que a página está carregando.
Weaknesses referem-se a:
- iOS suporte da versão 11.3 em diante;
- maior utilização da bateria do dispositivo;
- não todos os dispositivos suportam toda a gama de funcionalidades PWA (mesma fala para sistemas operativos iOS e Android);
- não é possível estabelecer um forte reengagement para utilizadores iOS (esquema URL, notificações web padrão);
- suporte para execução offline é, no entanto, limitado;
- falta de presença nas lojas (não há possibilidade de adquirir tráfego daquele canal);
- não há um “corpo” de controle (como as lojas) e um processo de aprovação;
- acesso limitado a alguns componentes de hardware dos dispositivos;
- uma pequena flexibilidade quanto ao conteúdo “especial” para os usuários (por exemplo, programas de fidelidade, fidelidade, etc.)).
A importância dos Manifestantes e Trabalhadores de Serviços
As novas características dos browsers modernos que permitem que os PWAs ofereçam o melhor são “manifesto” e “trabalhadores de serviços”.
Manifest
É um simples arquivo JSON que define os parâmetros básicos do PWA, para controlar como o aplicativo deve aparecer para o usuário e definir sua aparência no lançamento: ícones, outras características básicas como cores, fontes, orientação da tela e possibilidade de ser instalado na tela inicial.
Trabalhadores de serviço
São a verdadeira chave para as experiências avançadas que um PWA pode oferecer. Um trabalhador de serviços é um script que o navegador roda em segundo plano, separado de uma página web, para usar funções que não requerem uma página web ou interação do usuário.
Hoje, os SWs já incluem recursos como notificações push e sincronização em segundo plano. No futuro, eles irão suportar funções como sincronização periódica ou geofencing. A principal função é a capacidade de interceptar e gerir pedidos de rede, incluindo a gestão programática de um cache de respostas. É uma API que suporta experiências offline, dando aos desenvolvedores o controle completo da experiência.
Com a adição de suporte aos trabalhadores de serviço na última versão do iOS, a Apple abriu a porta para os PWAs para alcançar, para todos os efeitos, todo o mercado móvel.
Quais são as tecnologias mais utilizadas para PWA?
Existem várias tecnologias para a criação de um aplicativo Web Progressivo, principalmente baseado em JavaScript, com características diferentes.
entre as principais que temos:
- Reacção
Uma poderosa biblioteca JavaScript para construir interfaces de utilizador dinâmicas e modernas - Polímero
Uma combinação de componentes, ferramentas e modelos projetados para criar PWA - Angular
Uma estrutura JavaScript para criar aplicações web dinâmicas que usam HTML como linguagem de modelo - Iônico
Uma estrutura JavaScript para criar aplicações poderosas para múltiplas plataformas usando um código básico - Páginas Móveis Aceleradas (AMP)
Um projeto de código aberto para melhorar a performance das páginas web
Como escolher entre um PWA ou uma solução nativa
O momento da escolha chega, que solução adoptar?
É preferível escolher o desenvolvimento de um AWP quando:
- O aplicativo deve ser facilmente distribuído para uma base de usuários ainda mais ampla
- O orçamento disponível não é alto
- Há pouco tempo disponível para o go-live
- A indexação de desempenho em motores de busca é importante
- Compatibilidade entre plataformas é necessária
- Mais atualizações são necessárias em um tempo apertado
É preferível, pelo contrário, desenvolver um aplicativo nativo quando:
- É necessário mover-se nas lojas
- Velocidade e capacidade de resposta são pontos chave para o sucesso do aplicativo
- O aplicativo requer um uso importante das características de hardware do dispositivo
- O modelo de negócio é baseado, por exemplo, no custo por download e/ou IAP (In App Purchase)
- O aplicativo deve ser integrado com outros aplicativos de terceiros
As diferenças no processo de instalação: PWA vs aplicação nativa
O processo geral de instalação de aplicações nativas segue este fluxo:
- Acesso à loja de referência (App Store ou Google Play)
- Procurar o aplicativo
- Clicar em “Instalar”
- Aceitação das várias autorizações
- Abrir e lançar o aplicativo
- Uso do aplicativo
Na comparação, a instalação do PWA inclui:
- Visitar o site
- Adicionar à tela inicial do dispositivo (opcional)
- Abrir o aplicativo
- Utilizar o aplicativo
Os principais exemplos de um aplicativo Web Progressivo
Já existem muitos exemplos de PWA “diferenciados” que os usuários usam em seus dispositivos e entre os principais que relatamos:
Interesse
Para saber mais:
Addy Osmani on Medium >Um Estudo de Caso de Desempenho Progressivo da Aplicação Web Pinterest
Instagrama
O PWA actual é muito semelhante à aplicação nativa e tem todas as principais características de interacção, desde notificações até à capacidade de ver Histórias.
>
Google Maps
>
Para saber mais:
A Próxima Web >O Google Maps Go é apenas uma aplicação Web Progressiva
>
Tinder
>
>>
>
>
>
>
Para saber mais:
Addy Osmani on Medium >A Progressive Tinder Web App Performance Study
>
Twitter Lite
>
Para saber mais:
Twitter Blog >Como construímos o Twitter Lite
Programadores do Google > Twitter Lite PWA aumenta significativamente o envolvimento e reduz o uso de dados
Paul Armstrong on Medium > Twitter Lite e Web Progressiva de Reação de Alto Desempenho Apps at Scale
YouPorn
A decisão de usar PWAs é principalmente para contornar as limitações que a Apple e o Google colocam ao conteúdo pornográfico nas lojas, bem como para assegurar uma melhor experiência de utilização.
Para saber mais:
YouPorn Blog >Aplicação YouPorn Experiência
VentureBeat > YouPorn vai progressivo com novas aplicações web móveis para Android e iOS
>
algumas referências para aprofundar o tema da aplicação Web Progressiva
>
Google Progressivo Web App >>https://developers.google.com/web/progressive-web-apps/
>
Google PWA Checklist >>https://developers.google.com/web/progressive-web-apps/checklist
>
Appscope, para Aplicações Web Progressivas (PWAs) > https://appsco.pe/
Então o futuro é “progressivo”?
A resposta é, como sempre, depende. A decisão de desenvolver um PWA segue análises e reflexões que devem ser feitas de tempos em tempos, de projeto para projeto, de usuário para usuário. Pelo contrário, poderíamos acrescentar uma outra complexidade: a do posicionamento no motor de busca: se gerimos tudo correctamente ou se canibalizamos o tráfego no nosso site?
Os factores que levam à escolha são muitos, como antecipado neste estudo, pelo que não existe uma receita definida e standard, mas sim aquela que dá o contexto que se enquadra correctamente na estratégia e objectivos. Vamos falar sobre isso juntos.