O que são aplicativos da Web progressivos e como instalo um?

O que são aplicativos da Web progressivos e como instalo um?

Os aplicativos dominam o seu telefone. Por muito tempo, os aplicativos não influenciavam sua área de trabalho ou navegador da mesma forma. Isso mudou nos últimos anos. Os Progressive Web Apps (PWAs) estão crescendo em estatura e alterando nossas interações com todos os tipos de sites.





Mas o que exatamente é um Progressive Web App? O que um PWA faz que um site não faz? Aqui está o que você precisa saber sobre os Progressive Web Apps.



O que é um Progressive Web App?

Os Progressive Web Apps são aplicativos da web que oferecem um site regular aos usuários, mas aparecem como um aplicativo móvel nativo. Os PWAs tentam trazer a usabilidade de um aplicativo móvel nativo para o conjunto de recursos do navegador moderno, aproveitando ao máximo os avanços em ambas as áreas de desenvolvimento.





O que define um PWA, então?

  • Universal : um PWA deve funcionar perfeitamente (bem, quase) para todos os usuários, independentemente do navegador.
  • Responsivo : Os PWAs devem funcionar com qualquer dispositivo, como laptop, tablet, smartphone e assim por diante.
  • Projeto : o design deve imitar aplicativos móveis nativos, o que significa menus simplificados e fáceis de encontrar, com interatividade simples para recursos avançados.
  • Seguro : PWAs devem usar HTTPS para manter os dados do usuário seguros.
  • Detectável: os usuários podem encontrar PWAs e são facilmente identificáveis ​​como um aplicativo (em vez de um 'site').
  • Noivado: um PWA deve ter acesso a recursos de engajamento nativos, como notificações push.
  • Atualizações: Os PWAs permanecem atualizados, servindo as versões mais recentes de um serviço ou site.
  • Instalação: permitem aos usuários 'instalar' facilmente o PWA em sua tela inicial sem a necessidade de uma loja de aplicativos.
  • Compartilhamento: Os PWAs exigem apenas um único URL para compartilhar, sem qualquer instalação.

Como você pode ver, os PWAs têm como objetivo fornecer aos usuários uma experiência completa no site com recursos simplificados e design de interface de um aplicativo nativo.



Como funciona um Progressive Web App?

A chave para os Progressive Web Apps são os trabalhadores de serviço do navegador.

Um service worker é um script executado no plano de fundo de seu navegador, 'separado de uma página da web, abrindo a porta para recursos que não precisam de uma página da web ou interação do usuário'. Você pode usar service workers como notificações push e sincronização em segundo plano no momento, mas o futuro imediato do PWA dá a esses scripts mais poder.



Como tal, os service workers formam a base do padrão PWA, usando o cache da web para resultados quase instantâneos.

Antes dos service workers, o script de cache do navegador go-to era Application Cache (ou App Cache). O App Cache apresenta uma ampla gama de serviços off-line, mas era um tanto sujeito a erros. Além disso, o App Cache tem várias limitações conhecidas, como Uma lista à parte explica.



Mas o principal problema para os desenvolvedores é a falta de interação direta com exatamente como o AppCache funciona, impedindo os desenvolvedores de corrigir problemas à medida que surgem. Por sua vez, sites e serviços com funcionalidade offline completa eram uma escolha arriscada.

Os trabalhadores de serviço, no entanto, duram apenas enquanto sua ação for necessária. Em um PWA, quando você clica em algo ou usa um recurso, um service worker entra em ação. O service worker (lembre-se, é um script) processa o evento, decidindo se o cache offline pode concluir a solicitação. A ideia é que existem vários caches offline para o PWA escolher, oferecendo uma gama muito mais ampla de funcionalidades offline.

Além disso, o cache não serve apenas para aumentar a velocidade offline. Por exemplo, você acessa um PWA, mas sua conexão é extremamente irregular. O service worker serve a um cache anterior, totalmente funcional, sem interromper sua experiência.

Suporte Progressive Web App Browser

Existem dois requisitos para usar um Progressive Web App: um navegador compatível e um serviço habilitado para PWA.

Primeiro, vamos dar uma olhada nos navegadores. Você tem duas opções para verificar o suporte do navegador PWA. O primeiro é o de Jake Archibald O Service Worker está pronto ? que exibe facilmente o status de pronto para PWA dos principais navegadores, além da Internet da Samsung.

Para uma visão geral mais detalhada do suporte do navegador PWA, você deve verificar Eu posso usar , um site especializado em listar a implementação de várias tecnologias da web e de navegador por versão de navegador. Por exemplo, se você inserir 'service workers' na barra de pesquisa, encontrará uma tabela que exibe o número da versão com o qual cada navegador implementou service workers do PWA.

A tabela Posso usar Service Workers confirma que todos os principais navegadores oferecem suporte a PWAs. Ele também ilustra o suporte do PWA para vários navegadores de desktop e navegadores móveis alternativos.

Dividindo um pouco mais:

  • Navegador de desktop (suporte completo): Chrome, Firefox, Opera, Edge, Safari
  • Navegador de desktop (suporte parcial / versão desatualizada): Navegador QQ, navegador Baidu
  • Navegador móvel (suporte completo): Chrome, Firefox, Safari, navegador UC, internet Samsung, navegador Mint, Wechat
  • Navegador móvel (suporte parcial / versão desatualizada): Navegador QQ, navegador Android, Opera Mobile

Portanto, todos os principais navegadores oferecem suporte a PWAs. Microsoft Edge e Safari são as adições mais recentes à lista completa de suporte. Por outro lado, tanto o QQ Browser quanto o Baidu Browser agora usam versões desatualizadas e, como tal, caíram para o segundo nível.

Como encontrar e instalar um aplicativo da Web progressivo

Agora que você sabe qual navegador usar, pode pensar em pesquisar e instalar um PWA. Para este exemplo, estarei usando um Samsung Galaxy S8 com Google Chrome.

Os Progressive Web Apps estão por toda parte. Muitas empresas adaptaram seus sites e serviços para oferecer uma versão do Progressive Web App. Em muitos casos, você encontrará um PWA pela primeira vez ao acessar a página inicial ou o site móvel do serviço, o que aciona o Adicionar à tela inicial caixa de diálogo.

Confira o vídeo abaixo para ver o que acontece quando você visita o Site móvel do Twitter .

Claro, visitar inúmeros sites e esperar ver o gatilho da tela inicial não é útil. Na verdade, é extremamente demorado. Felizmente, você não precisa fazer isso, pois há alguns sites dedicados a catalogar PWAs.

Primeira tentativa outweb . Ele lista uma gama bastante decente de PWAs, com novas opções aparecendo com frequência. Em seguida, experimente pwa.rocks. Ele tem uma seleção menor, mas alguns PWAs úteis que você deseja adicionar ao seu dispositivo.

Além disso, em janeiro de 2019, o Chrome 72 para Android foi lançado com Trusted Web Activity (TWA). A TWA permite que as guias do Chrome sejam abertas em um modo autônomo. Por sua vez, isso permite que os PWAs sejam apresentados na loja de aplicativos do Google Play. Os primeiros PWAs a aparecer no Google Play foram Twitter Lite , Instagram Lite e Google Maps Go , com mais definido para aparecer ao longo do tempo.

Galeria de imagens (2 imagens) Expandir Expandir Fechar

Os Progressive Web Apps substituirão os aplicativos nativos?

Os Progressive Web Apps são uma excelente etapa híbrida entre o seu navegador e um aplicativo móvel nativo. Os PWAs substituirão os aplicativos nativos inteiramente? Isso é um não difícil da minha parte. Os PWAs são ótimos como uma oferta leve, mas, como atualmente se concentram predominantemente na replicação de sites e serviços existentes, eles não substituirão os aplicativos nativos.

Pelo menos não por enquanto.

como inverter cores no photoshop

No entanto, os PWAs funcionam. Os dados disponíveis no PWA Stats também comprovam isso. Aqui estão alguns números interessantes que ilustram como os PWAs estão alterando nossas interações com sites comumente usados:

  • A Trivago observou um aumento de 150 por cento no engajamento dos usuários que adicionam seu PWA a uma tela inicial.
  • A página inicial do 'PWA' da Forbes carrega completamente em apenas 0,8 segundos, 'enquanto as impressões por visita aumentam 10 por cento. O PWA da Forbes também viu o tamanho da sessão do usuário dobrar.
  • O Twitter Lite teve um aumento de 65% nas páginas por sessão, com um aumento massivo de 75% nos tweets. Também é interativo 'em menos de 5 segundos em 3G'.
  • O Alibaba viu um aumento de 76% nas conversões de celulares.

Os PWAs ainda não são populares. Mas com a grande variedade de benefícios que eles oferecem, como economia de espaço no seu dispositivo, você ouvirá mais sobre eles no futuro.

Compartilhado Compartilhado Tweet O email Um guia para iniciantes em animação de discurso

Animar a fala pode ser um desafio. Se você estiver pronto para começar a adicionar diálogo ao seu projeto, vamos dividir o processo para você.

Leia a seguir Tópicos relacionados Sobre o autor Gavin Phillips(945 artigos publicados)

Gavin é o Editor Júnior do Windows and Technology Explained, um colaborador regular do Podcast Really Useful e um revisor regular do produto. Ele tem um BA (Hons) em Redação Contemporânea com Práticas de Arte Digital pilhadas nas colinas de Devon, bem como mais de uma década de experiência profissional em redação. Ele gosta de grandes quantidades de chá, jogos de tabuleiro e futebol.

Mais de Gavin Phillips

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever