Futuro do Desenvolvimento: o que são Progressive Web Apps (PWAs)?
March 28, 2018
Fonte: https://transformacaodigital.com
O desenvolvimento de aplicativos e sites web estão cada vez mais similares. Estamos vendo sites que lançam aplicativos com os mesmos serviços da plataforma online e outros que são desenvolvidos como aplicativos web para atender usuários que acessam de dispositivos móveis.
Para acabar de vez com este problema, está surgindo um novo conceito: Progressive Web Apps. Ele promete revolucionar o mercado, transformando sites em aplicativos móveis, além de ser multiplataforma. O desenvolvimento deixará de ser exclusivo a uma plataforma.
Ficou curioso para saber o que são progressive web apps? Continue lendo e descubra.
O que são Progressive Web Apps?
O termo progressive web apps, PWA, é um conceito atual que engloba filosofias de desenvolvimento de aplicativos web. Foi introduzido pela Google em 2015 e está se mostrando importante por trazer muitas vantagens em relação aos usuários e desenvolvedores.
É um aplicativo que fornece funcionalidades adicionais ao dispositivo em que é instalado. As funcionalidades que um PWA oferece: funcionar offline, notificações push, sistemas de gerência de memória, carregamento mais rápido, visual e velocidade de apps nativos, entre outros.
Em outras palavras, um PWA é um web site que foi desenvolvido utilizando tecnologias que otimizam o seu uso em dispositivos móveis. Eles funcionam de forma mais amigável que sites responsivos, criados para serem abertos em navegadores de smartphones.
Um PWA é superior a um site responsivo a tal ponto que eles podem ser confundidos com aplicativos nativos de um dispositivo. Por exemplo, é possível ter uma experiência em tela cheia e sem ter a visibilidade de uma URL em um PWA. O usuário final não consegue distinguir o PWA de um aplicativo nativo.
Como funciona o PWA?
Os progressive web apps são desenvolvidos para serem otimizados em dispositivos móveis. Todo PWA é baseado em princípios que o definem.
Manifesto de aplicativos web
O manifesto de aplicativos web se resume a um arquivo JSON que permite os desenvolvedores controlarem como as aplicações aparecerão na tela do usuário. Com esta característica, é possível criar um atalho de um PWA em um smartphone, como se ele fosse um aplicativo instalado da loja de aplicativos.
O manifesto permite que os sites tenham uma presença maior nos dispositivos, atuando como se fosse um aplicativo. Ele permite que o site seja aberto em tela cheia, tenha controle de orientação de tela e consiga definir temas e telas splash.
Adicionar ícone na tela inicial
Os PWAs podem oferecer ao usuário a opção de adicionar um atalho para o site na tela inicial do dispositivo móvel. Isso permite que o usuário abra o PWA como se fosse um aplicativo, aumentando a sua boa experiência com o site.
Para que esta funcionalidade esteja disponível, é preciso que o site obedeça os seguintes critérios:
tenha um manifesto de aplicativos web válido;
esteja hospedado sob o protocolo HTTPS;
tenha um service worker registrado;
seja visitado duas vezes pelo mesmo usuário, com pelo menos 5 minutos de intervalo entre as visitas.
Service worker para armazenamento offline
Service worker é um script que executa em um plano de fundo, separado da página web. Ele responde a eventos, incluindo requisições de rede de outras páginas. Um service worker tem vida de execução curta.
Sua principal funcionalidade é ser um poderoso armazenador de dados offline. Além disso, ele oferece aumento de performance significativa, pois faz carregamento instantâneo na medida que o site é visitado novamente.
Notificações push
As notificações push permitem que usuários recebam atualizações em seus dispositivos quando houver conteúdo novo nos sites. Isso permite uma interação maior entre serviço e usuário, além de criar um conteúdo personalizável e envolvente.
Controle de funcionalidades avançadas
Novas funcionalidades estão chegando ao desenvolvimento de plataformas web, como sincronização em segundo plano e uso de bluetooth. Estas funcionalidades podem ser implementadas usando PWA.
No entanto, as funcionalidades avançadas ainda estão limitadas ao navegador instalado no dispositivo que faz a associação com os PWAs.
Quais são os benefícios?
Os principais benefícios do PWA em relação a aplicativos nativos e aplicativos baseados em web são:
responsivo — o site se adapta ao tamanho da tela;
design similar à de aplicativos — o site não se parece com uma página web e sim com um aplicativo;
suporte offline — páginas podem ser carregadas mesmo sem internet, aumentando a experiência de usuário;
instalável — o navegador pode instalar atalhos na tela inicial para um site PWA;
multiplataforma — não precisa de codificação específica para um dispositivo;
maior interação — as notificações push permitem que os usuários interajam com o site PWA até mesmo quando não estiverem visitando as páginas;
detectável — máquinas de busca fornecem mais alcance de usuários que lojas de aplicativos;
atualizável — sempre que o site atualiza um conteúdo, o PWA é atualizado instantaneamente;
seguro — todos os PWAs devem estar sob segurança do protocolo HTTPS;
progressivo — funciona em qualquer dispositivo, até os mais antigos;
linkável — fácil de ser linkado com outras aplicações usando URLS;
leve — aplicativos nativos podem ocupar centenas de MB de espaço, enquanto PWAs ocupam apenas centenas de KB;
menor custo de aquisição — usuários não precisam instalar nada e desenvolvedores não precisam se preocupar em desenvolver um aplicativo para cada plataforma.
E as aplicações e tendências?
PWA pode ser desenvolvido para qualquer serviço que utilize a web. Seja um blog de notícias, uma rede social ou uma rede de restaurantes. Em sua essência, um PWA é um web site, porém com funcionalidades extras que se enquadram nos princípios de desenvolvimento deste tipo de tecnologia.
O site PWA Rocks faz uma lista de empresas que construíram seus sites utilizando os princípios do PWA. Empresas famosas como a NASA, AliExpress, FlipBoard e Telegram são alguns exemplos que utilizam PWA em seus sites.
PWA tem como objetivo aumentar a experiência de usuário na web. No entanto, é importante saber que nem todo negócio precisa de PWA. Aplicativos que têm página estática, pouco conteúdo, fácil acesso e carregamento rápido são mais adequados a usarem sites tradicionais web.
No entanto, e-commerces estão entre as maiores tendências de uso de PWA. Eles providenciam uma interação de usuários maior, além de aumentar a taxa de conversão de usuários.
Um grande exemplo é o Flipkart, maior e-commerce da Índia. O Flipkart combinou a experiência de sites tradicionais com PWA para oferecer aos usuários maior interação na loja.
Como resultado, 60% dos acessos ao site é por meio do ícone da tela inicial dos dispositivos móveis dos usuários. A conversão de usuários que usaram a tela inicial chegou a 70%, um aumento de 40% comparado aos números anteriores da implementação do PWA.
O conceito de progressive web apps ainda está em seus primórdios e não é tendência mundial por enquanto. Porém, incentivos de grandes companhias, como a Google, relevam o grande potencial desta tecnologia e, certamente, será mais explorada daqui para frente.
Autor: Aldo César Gonçalves Costa
Para acabar de vez com este problema, está surgindo um novo conceito: Progressive Web Apps. Ele promete revolucionar o mercado, transformando sites em aplicativos móveis, além de ser multiplataforma. O desenvolvimento deixará de ser exclusivo a uma plataforma.
Ficou curioso para saber o que são progressive web apps? Continue lendo e descubra.
O que são Progressive Web Apps?
O termo progressive web apps, PWA, é um conceito atual que engloba filosofias de desenvolvimento de aplicativos web. Foi introduzido pela Google em 2015 e está se mostrando importante por trazer muitas vantagens em relação aos usuários e desenvolvedores.
É um aplicativo que fornece funcionalidades adicionais ao dispositivo em que é instalado. As funcionalidades que um PWA oferece: funcionar offline, notificações push, sistemas de gerência de memória, carregamento mais rápido, visual e velocidade de apps nativos, entre outros.
Em outras palavras, um PWA é um web site que foi desenvolvido utilizando tecnologias que otimizam o seu uso em dispositivos móveis. Eles funcionam de forma mais amigável que sites responsivos, criados para serem abertos em navegadores de smartphones.
Um PWA é superior a um site responsivo a tal ponto que eles podem ser confundidos com aplicativos nativos de um dispositivo. Por exemplo, é possível ter uma experiência em tela cheia e sem ter a visibilidade de uma URL em um PWA. O usuário final não consegue distinguir o PWA de um aplicativo nativo.
Como funciona o PWA?
Os progressive web apps são desenvolvidos para serem otimizados em dispositivos móveis. Todo PWA é baseado em princípios que o definem.
Manifesto de aplicativos web
O manifesto de aplicativos web se resume a um arquivo JSON que permite os desenvolvedores controlarem como as aplicações aparecerão na tela do usuário. Com esta característica, é possível criar um atalho de um PWA em um smartphone, como se ele fosse um aplicativo instalado da loja de aplicativos.
O manifesto permite que os sites tenham uma presença maior nos dispositivos, atuando como se fosse um aplicativo. Ele permite que o site seja aberto em tela cheia, tenha controle de orientação de tela e consiga definir temas e telas splash.
Adicionar ícone na tela inicial
Os PWAs podem oferecer ao usuário a opção de adicionar um atalho para o site na tela inicial do dispositivo móvel. Isso permite que o usuário abra o PWA como se fosse um aplicativo, aumentando a sua boa experiência com o site.
Para que esta funcionalidade esteja disponível, é preciso que o site obedeça os seguintes critérios:
tenha um manifesto de aplicativos web válido;
esteja hospedado sob o protocolo HTTPS;
tenha um service worker registrado;
seja visitado duas vezes pelo mesmo usuário, com pelo menos 5 minutos de intervalo entre as visitas.
Service worker para armazenamento offline
Service worker é um script que executa em um plano de fundo, separado da página web. Ele responde a eventos, incluindo requisições de rede de outras páginas. Um service worker tem vida de execução curta.
Sua principal funcionalidade é ser um poderoso armazenador de dados offline. Além disso, ele oferece aumento de performance significativa, pois faz carregamento instantâneo na medida que o site é visitado novamente.
Notificações push
As notificações push permitem que usuários recebam atualizações em seus dispositivos quando houver conteúdo novo nos sites. Isso permite uma interação maior entre serviço e usuário, além de criar um conteúdo personalizável e envolvente.
Controle de funcionalidades avançadas
Novas funcionalidades estão chegando ao desenvolvimento de plataformas web, como sincronização em segundo plano e uso de bluetooth. Estas funcionalidades podem ser implementadas usando PWA.
No entanto, as funcionalidades avançadas ainda estão limitadas ao navegador instalado no dispositivo que faz a associação com os PWAs.
Quais são os benefícios?
Os principais benefícios do PWA em relação a aplicativos nativos e aplicativos baseados em web são:
responsivo — o site se adapta ao tamanho da tela;
design similar à de aplicativos — o site não se parece com uma página web e sim com um aplicativo;
suporte offline — páginas podem ser carregadas mesmo sem internet, aumentando a experiência de usuário;
instalável — o navegador pode instalar atalhos na tela inicial para um site PWA;
multiplataforma — não precisa de codificação específica para um dispositivo;
maior interação — as notificações push permitem que os usuários interajam com o site PWA até mesmo quando não estiverem visitando as páginas;
detectável — máquinas de busca fornecem mais alcance de usuários que lojas de aplicativos;
atualizável — sempre que o site atualiza um conteúdo, o PWA é atualizado instantaneamente;
seguro — todos os PWAs devem estar sob segurança do protocolo HTTPS;
progressivo — funciona em qualquer dispositivo, até os mais antigos;
linkável — fácil de ser linkado com outras aplicações usando URLS;
leve — aplicativos nativos podem ocupar centenas de MB de espaço, enquanto PWAs ocupam apenas centenas de KB;
menor custo de aquisição — usuários não precisam instalar nada e desenvolvedores não precisam se preocupar em desenvolver um aplicativo para cada plataforma.
E as aplicações e tendências?
PWA pode ser desenvolvido para qualquer serviço que utilize a web. Seja um blog de notícias, uma rede social ou uma rede de restaurantes. Em sua essência, um PWA é um web site, porém com funcionalidades extras que se enquadram nos princípios de desenvolvimento deste tipo de tecnologia.
O site PWA Rocks faz uma lista de empresas que construíram seus sites utilizando os princípios do PWA. Empresas famosas como a NASA, AliExpress, FlipBoard e Telegram são alguns exemplos que utilizam PWA em seus sites.
PWA tem como objetivo aumentar a experiência de usuário na web. No entanto, é importante saber que nem todo negócio precisa de PWA. Aplicativos que têm página estática, pouco conteúdo, fácil acesso e carregamento rápido são mais adequados a usarem sites tradicionais web.
No entanto, e-commerces estão entre as maiores tendências de uso de PWA. Eles providenciam uma interação de usuários maior, além de aumentar a taxa de conversão de usuários.
Um grande exemplo é o Flipkart, maior e-commerce da Índia. O Flipkart combinou a experiência de sites tradicionais com PWA para oferecer aos usuários maior interação na loja.
Como resultado, 60% dos acessos ao site é por meio do ícone da tela inicial dos dispositivos móveis dos usuários. A conversão de usuários que usaram a tela inicial chegou a 70%, um aumento de 40% comparado aos números anteriores da implementação do PWA.
O conceito de progressive web apps ainda está em seus primórdios e não é tendência mundial por enquanto. Porém, incentivos de grandes companhias, como a Google, relevam o grande potencial desta tecnologia e, certamente, será mais explorada daqui para frente.
Autor: Aldo César Gonçalves Costa
Focus It News
Understand SAP Clean Core and learn how to reduce technical debt while modernizing custom code, integrations, extensions, and SAP S/4HANA architecture.
Entenda o conceito de SAP Clean Core e como reduzir dívida técnica, organizar customizações, integrações e extensões no S/4HANA com apoio do SAP BTP.
Entenda como IBS e CBS podem impactar processos fiscais, documentos eletrônicos, créditos, apurações, parametrizações e integrações dentro do SAP.
Understand how IBS and CBS may impact tax processes, electronic documents, credits, calculations, settings and integrations within SAP.
Learn why preparation for Brazil’s Tax Reform should start within the SAP environment, involving tax processes, electronic documents, settings, integrations and governance.
Entenda por que a preparação para a Reforma Tributária deve começar pelo ambiente SAP, envolvendo processos fiscais, documentos eletrônicos, parametrizações, integrações e governança.
O S/4HANA não é apenas uma atualização — é uma mudança de paradigma. Quem se adapta agora, sai na frente.
In the age of automation and data intelligence, it's common to see technology as the sole driver of business transformation. But at Focus IT, we believe that technology is just a tool. What truly drives transformation is people.
Quem está por trás das soluções SAP da Focus IT?
Na era da automação e da inteligência de dados, é comum enxergar a tecnologia como protagonista absoluta das transformações nas empresas. Mas, na Focus IT, acreditamos que a tecnologia é só uma ferramenta. O que realmente transforma são as pessoas.
