O Progressive Web App (PWA) é uma nova classe de site que fornece experiências de aplicativo nativo usando um navegador. Os recursos do PWA são vantagens que os tornam a escolha certa em relação aos sites nativos e clássicos.
PWAs funcionam mesmo quando o dispositivo está desligada. Eles fazem uso total dos recursos modernos da web, incluindo notificação push, cache e conexões seguras para fornecer experiências ricas com base na Web.
Eles combinam a funcionalidade de aplicativos nativos com a disponibilidade da web, usando a web mais recente e recursos do navegador para criar melhores experiências do usuário.
Como são distribuídos pela web, eles elimine a frustração criada para marcas e consumidores nas App Stores.
Se você tem ouvido o que está acontecendo na web e em dispositivos móveis nos últimos anos, provavelmente ouviu falar de Progressive Web Apps . Você pode ter lido ou ouvido falar sobre eles e seus recursos.
Eu ouvi e li esses artigos também. Infelizmente, parece haver muita confusão e declarações enganosas propagadas tanto para o desenvolvedor quanto para a comunidade empresarial. Pensei em revisar os recursos do Progressive Web Application hoje para garantir que todos tenham um bom entendimento básico.
A plataforma da web passou por um renascimento de mudanças nos últimos anos, à medida que os padrões da web surgiram para os navegadores implementarem. Isso tornou as coisas muito mais fáceis para os desenvolvedores criarem experiências de usuário de plataforma cruzada melhores.
Recursos principais do Progressive Web App
- Instalável como um aplicativo
- Seguro por padrão
- Service Worker
- Funciona offline/confiável
- Fast By Design
- Integrado com a plataforma
- Sem censura da App Store
- Visível nos mecanismos de pesquisa
- Mais barato para o mercado
- Atualizações imediatas
- Multiplataforma
- Menor espaço em disco
- Fácil de compartilhar
- Mais fácil de desenvolver e manter do que o nativo
Alguns dos esses aprimoramentos recentes incluem novas APIs e funcionalidades como service workers e o arquivo de manifesto da web. Mas a história é mais complexa à medida que mais e mais APIs de plataforma e hardware se tornam acessíveis no navegador.
Os Progressive Web Apps são essencialmente um novo e melhor site da Web. Além de oferecerem os recursos tradicionais de alcance e engajamento que a web oferece há várias décadas, eles aproveitam as vantagens desses novos recursos de plataforma para equilibrar o campo de jogo com suas contrapartes de aplicativos nativos.
Para as partes interessadas de negócios, os PWAs oferecem muito retorna para menos investimento. Eles são mais baratos de criar, manter, estender e implantar. Os custos de marketing também são muito mais baixos do que os nativos.
Os PWAs também são atraentes para os desenvolvedores porque muitos desenvolvedores têm pelo menos um conhecimento útil de como codificar para a web. Os aplicativos nativos exigem conhecimento de pelo menos três plataformas e linguagens centrais diferentes, como Java, Objective-C, C # e sua marcação e suas sintaxes de renderização exclusivas. Os Progressive Web Apps são desenvolvidos usando padrões da web e as linguagens familiares HTML, CSS e JavaScript.
O que é um Progressive Web App?
Os Progressive Web Apps são, na verdade, sites que aproveitam os recursos modernos do navegador e as melhores práticas de desenvolvimento para oferecer experiências do usuário tão boas quanto se não melhores do que os aplicativos nativos.
Eles fazem isso porque tiram proveito do serviço cache de trabalho, notificações push, design responsivo e melhores práticas de desempenho. Eles têm tanto a ver com a implementação de recursos quanto com a entrega de ótimas experiências de usuário, semelhantes a aplicativos.
Em poucas palavras, os PWAs são sites que se comportam como aplicativos nativos.
Web progressiva Os aplicativos são independentes de plataforma. Isso significa que você pode servir seu PWA de qualquer servidor web, CMS ou infraestrutura web como ASP.NET, PHP, etc. para qualquer plataforma do lado do cliente. As plataformas de cliente incluem qualquer dispositivo móvel ou navegador. Mesmo que o navegador do usuário não ofereça suporte a APIs modernas, um PWA normalmente muda para experiências tradicionais, o que significa que todos estão incluídos.
Ofereça uma boa experiência progressiva de aplicativo da web e sua empresa poderá crescer muito mais rápido e com economia do que se pudesse no passado, por meio da web ou de aplicativos nativos.
Requisitos mínimos do aplicativo da Web progressivo
PWAs exigem seu site para usar HTTPS, um arquivo de manifesto da web válido e service worker registrado. Estes três requisitos técnicos são uma introdução.
- HTTPS
- Manifesto da web
- Service Worker com cache offline
Qualquer site que não esteja usando HTTPS está praticamente morto atualmente. A maioria dos sites tem, o que é ótimo. TLS (comumente conhecido como SSL) fornece uma camada de criptografia em torno dos dados enviados entre o navegador e o servidor. Isso significa que os malfeitores não podem espionar suas informações ou, pior ainda, alterar os dados enviados de um lado para outro.
Os aplicativos da Web progressivos exigem HTTPS não apenas porque APIs modernas, como os service workers, exigem HTTPS, mas porque é a melhor prática. Ele fornece uma melhor experiência do usuário e os visitantes apreciam isso.
O manifesto da web é um arquivo JSON simples que o navegador carrega em segundo plano. Ele contém metadados sobre seu site que o navegador e a plataforma usam para direcionar a adição à experiência de tela inicial . Aqui você pode definir o URL de início padrão, o esquema de cores, como seu aplicativo é iniciado e os ícones usados para representar seu aplicativo na tela inicial.
O requisito técnico final é um trabalhador de serviço registrado com um manipulador de eventos fetch. Eu adicionei esse último detalhe porque o Chrome começou a verificar se há pelo menos um manipulador de eventos fetch antes de acionar o fluxo de trabalho add to homescreen.
O motivo pelo qual ele verifica o manipulador de eventos fetch tentando ver se o serviço trabalhador pode permitir que o aplicativo funcione offline. Não existe um teste decisivo absoluto para determinar se um PWA funciona offline. Quer dizer, você pode ter um manipulador de eventos fetch e alguns ativos em cache localmente, mas isso não significa que o aplicativo funcione offline.
Ele ainda pode falhar, quando estiver offline. É aqui que é importante ter um desenvolvedor de serviço qualificado envolvido na criação de seu Progressive Web App. Criar uma estratégia de armazenamento em cache e um fluxo de trabalho sólidos se torna mais complicado quanto mais um aplicativo faz.
Sempre digo aos novos clientes e desenvolvedores adicione esses três recursos ao seu site existente e comece por aí. Não seja muito extravagante com o funcionário do serviço.
Requisitos de experiência do usuário do PWA
Atender aos três requisitos técnicos básicos para ser um aplicativo da web progressivo é uma coisa, mas o que realmente significa ser um PWA?
É mais sobre como fornecer uma experiência de usuário de primeira linha. Infelizmente, é aqui que a maioria dos aplicativos e sites nativos ficam aquém. Gosto de pensar que os PWAs nos dão uma nova oportunidade de acertar em um sentido amplo.
Assim como as lojas de aplicativos têm diretrizes de qualidade, você pode pensar nesta seção como uma revisão de alto nível de diretrizes de qualidade de aplicativos da web. Para proprietários de empresas, esta é uma linha de base para definir suas expectativas de entrega.
Rápido
A página da web média agora leva mais de 19 segundos para carregar em um telefone comum. Os aplicativos nativos não são muito melhores, pois eu fico olhando para as telas por mais tempo do que qualquer um deveria. Pessoalmente, acho que as telas iniciais nunca devem ser vistas porque a página/tela deve apenas carregar e renderizar.
Integrado
Esta é a ideia que os usuários não deveriam ter. alcance através de uma guia do navegador para acessar seu aplicativo ou site. Eles não deveriam se preocupar com o fato de estarem mesmo na web. Eles devem apenas ser capazes de tocar no seu ícone e iniciar seu aplicativo. Eles esperam que seu PWA se pareça e se comporte como qualquer aplicativo.
Além da adição à experiência da tela inicial, APIs da web mais recentes, como os Pagamentos da Web, permitem que os usuários passem pelo checkout sem lidar com os fluxos de trabalho tradicionais de checkout. Isso torna o comércio muito mais fácil em dispositivos móveis.
Outro exemplo é a reprodução de mídia. A API de sessão de mídia permite não apenas reproduzir mídia como áudio com a tela de bloqueio. Na verdade, você pode fornecer metadados sobre o áudio que aparece na tela de bloqueio, como música nativa e aplicativos de podcast.
Confiável
A percepção comum é a web interrompe quando a rede está indisponível. O cache do Service Worker e os PWAs permitem que a web não apenas carregue instantaneamente, mas torne a rede um aprimoramento progressivo.
Agora, off-line não é uma preocupação. Depende de você criar um fluxo de trabalho de cache offline adequado e uma experiência do usuário para seu aplicativo. Obviamente, sites maiores podem ser limitados quanto ao conteúdo que podem armazenar em cache para experiências off-line. Mas você pode criar uma experiência funcional que forneça aos usuários uma experiência offline útil.
Envolvente
É aqui que você usa os recursos certos no momento certo para criar um experiência deliciosa. Claro, isso é um tanto subjetivo, mas existem etapas que você pode seguir para garantir que seu nível de envolvimento seja alto.
Isso inclui o uso responsável de notificações push, atualizações em segundo plano e muito mais.
Por exemplo, algumas companhias aéreas começaram a usar push com seus aplicativos progressivos da web para alertar os passageiros sobre atrasos de voos. Tenho pensado em adicionar push ao Love2Dev para que você saiba quando eu tiver um novo artigo. Não se preocupe, não vou incomodá-lo com muita frequência 😋.
Recursos do PWA sobre sites tradicionais e Aplicativos nativos
Não soe bem os aplicativos progressivos da Web!
Acho que sim.
Mas você pode estar se perguntando como eles se comparam aos sites tradicionais e aplicativos nativos. Quer dizer, os aplicativos nativos estão na moda desde que o iPhone foi lançado, certo?
Bem, o entusiasmo em torno dos aplicativos nativos diminuiu nos últimos anos. Os consumidores estão cansados de usar aplicativos. Hoje, o usuário médio de celular não baixa um aplicativo ao longo de um mês. Pior ainda, o tempo de tela do aplicativo é limitado a um pequeno conjunto de grandes players de mídia social, não às empresas comuns.
Como você verá, os aplicativos progressivos da web são aprimoramentos dos sites tradicionais. Você não perderá uma única vantagem do site ao atualizar para um PWA. Você só o torna melhor. Muito melhor, a maioria é melhor do que suas contrapartes nativas.
Detectabilidade
93% da atividade online começa com um mecanismo de pesquisa, não um aplicativo ou uma loja de aplicativos. Esta é uma das muitas razões pelas quais oferecemos serviços de otimização de mecanismo de pesquisa para nossos clientes.
O super poder da web é seu alcance e descoberta e mecanismos de pesquisa como Google e Bing são o canal nº 1 para envolver os clientes, não lojas de aplicativos.
Se você já tentou promover um aplicativo nativo, é uma batalha árdua e difícil. É caro. Tenho visto análises do setor relatando que o custo médio para adquirir uma única instalação de aplicativo entre US $ 8-30.
Um bom programa de otimização de mecanismo de pesquisa renderá milhares a milhões de visitantes todos os meses gratuitamente. A publicidade paga na web pode custar menos de um níquel por visitante.
Isso torna a web mais econômica para se envolver com clientes novos e estabelecidos do que aplicativos nativos.
É quase impossível para direcionar o tráfego direto para uma tela de aterrissagem em um aplicativo nativo, especialmente se o cliente não tiver passado pelas 6-8 etapas necessárias para instalar um aplicativo nativo. Mas você pode direcionar grandes quantidades de tráfego para qualquer página de destino por meio de canais de pesquisa ou pagos.
O outro problema que as lojas de aplicativos nativas criam é a indexação deficiente. É muito difícil encontrar aplicativos para um nicho porque a maioria não é bem indexada. Mas o mais importante é estudar quais aplicativos os consumidores instalam.
A realidade é que a única empresa com tração nativa real é o Facebook. Entre o Facebook, Facebook Messenger, Instagram e WhatsApp, eles possuem cerca de 90% dos aplicativos instalados e usados nos dispositivos.
Na verdade, em 2015, a maioria dos usuários havia se direcionado para o topo três aplicativos para cerca de 80% de sua tela ativa Tempo. Esses três aplicativos principais são de marcas do Facebook.
Os jogos são outra categoria em que o uso de aplicativos é alto, mas segmentado principalmente para crianças. Não vou tentar adivinhar como é o mercado de jogos porque não jogo nesse nicho (trocadilho, risos). Eu sei que a aquisição de clientes para jogos custa US $ 20/download. Novamente, não é um mercado atraente para eu entrar.
Para empresas, os aplicativos nativos não são atraentes porque não alimentam funis de vendas de forma eficaz e, para a maioria, não oferecem funcionalidades que a web não pode oferecer.
Sem imposto sobre vendas
As lojas de aplicativos recebem uma parte que deixa a máfia com inveja, 30%. Além disso, você também pode ser cobrado apenas pelo privilégio de usar seu SDK e publicar em sua plataforma.
As margens do comércio eletrônico são mínimas, qualquer negócio de varejo opera com margens mínimas. Quando a plataforma de distribuição sofre um corte de 30%, obter lucro é muito difícil. É por isso que a maioria das tentativas de aplicativos falham.
A web tem sido capaz de conduzir transições online por mais de 20 anos. A Amazon aceitou seus primeiros pagamentos online em 1994 e, sim, lembro-me de quando eles começaram!
Aceitar pagamentos online é mais fácil hoje do que nunca. Os bancos normalmente cobram 2 a 3% de uma transação, cerca de 10% das taxas de transação da loja de aplicativos. Serviços como Stripe e PayPal tornaram a aceitação de pagamentos muito mais fácil. Mas existem vários serviços de gateway disponíveis para negócios online. Trabalhei com pelo menos meia dúzia ao longo dos anos.
Sem censura na App Store
Escrevi alguns meses atrás sobre a Apple removendo um grande número de aplicativos porque eles não os consideravam’semelhantes a aplicativos’. Eles citaram a seção 4.2.6 de suas diretrizes de qualidade.
Isso deixou muitas empresas sem presença móvel tangível, uma vez que haviam investido muito no canal de aplicativo nativo.
O único censor com que a web precisa se preocupar são os mecanismos de pesquisa. Um SEO honesto se resume em fornecer a melhor resposta e a melhor experiência para os clientes. Nesse ponto, cabe a você conduzi-los por meio de seus funis de engajamento e vendas para fortalecer o relacionamento. Estabeleça um bom relacionamento e eles adicionarão seu PWA à tela inicial e assinarão notificações push e seu boletim informativo por e-mail.
Nesse ponto, você terá uma maneira direta de se conectar com esses clientes sem medo de terceiros deixando você sem avisar ou rejeitando uma atualização do seu aplicativo.
Immediate Update Deployment
Ao contrário dos aplicativos nativos, a web sempre foi fácil de atualizar e distribuir rapidamente as alterações aos visitantes. Agora que os PWAs podem ser’instalados’no dispositivo de um usuário, essas atualizações podem ser feitas antes mesmo de eles abrirem o site.
As App Stores exigem que você carregue as atualizações mais recentes em sua plataforma, uma para cada plataforma que você aplica é distribuído, o que significa pelo menos três para a maioria dos aplicativos. Em seguida, passa por um processo de revisão, que resultará na rejeição ou na aprovação dos censores da plataforma. Esse processo pode levar vários dias.
Ele então vai para a fila de distribuição, o que pode levar até três semanas antes que os clientes recebam a atualização.
Se acontecer de você quebrar algo em seu aplicativo, você pode não saber por várias semanas e, em seguida, distribuir uma correção pode levar mais algumas semanas. Esse tanto de tempo significa que a maioria dos clientes não está mais engajada e não vai voltar.
A web está livre dessa latência. Quando você atualiza um site e o implanta em seu servidor, ele fica imediatamente disponível para os usuários. Se acontecer de você quebrar o aplicativo, como eu fiz esta manhã LOL, você pode implantar correções o mais rápido que puder.
Se você usar notificações push, pode até usar este canal para avisar o usuário para permitir que seu service worker atualize as respostas em cache em segundo plano. O cliente nem precisa abrir seu aplicativo!
Não é legal?
Multiplataforma
Os aplicativos da web progressivos são verdadeiramente multiplataforma. Isso porque eles são os primeiros sites que se tornam progressivamente semelhantes a um aplicativo.
A melhor notícia é todos os navegadores modernos oferecem suporte a service workers , a tecnologia-chave que impulsiona o PWA.
O Chrome tem a vantagem de ser o pioneiro com a história de suporte mais madura, mas a Microsoft, FireFox, Samsung e até a Apple são rápidos fileiras de fechamento. A maioria tem alguma forma de adicionar à experiência da tela inicial. Mas mesmo quando não o fazem, você ainda pode solicitar ao usuário que marque o site. No iPhone e no iPad, adicione o site à tela inicial usando a funcionalidade de aplicativo da web móvel tradicional do iOS.
menor pegada de disco
Aplicativos nativos são gordos. Isso significa que eles ocupam uma parte significativa do armazenamento limitado em dispositivos móveis. Sei que meu iPad 2 quase não tem aplicativos agora porque só há espaço em disco suficiente para o sistema operacional e não muito mais.
O principal motivo é que os aplicativos iOS ficaram inchados, principalmente devido aos gráficos retina. Os aplicativos do Android não são muito melhores e não me ensinam a começar com o Windows.
Concedido, a página da web comum é muito gorda atualmente. Eles não precisam ser, na verdade, a maioria dos aplicativos da web progressivos que crio requerem apenas algumas centenas de kilobytes de armazenamento. Isso pode variar de acordo com a quantidade de imagens necessárias, mas o tamanho adequado da imagem e as políticas de armazenamento em cache as mantêm no mínimo.
Isso significa que os consumidores têm mais espaço para tirar fotos, vídeos e todos os tipos de”diversão”coisas que eles adoram.
Ocupe muito espaço sem oferecer um valor atraente e seu aplicativo certamente será excluído.
Compartilhamento mais fácil
Sei que os aplicativos nativos costumam utilizar recursos de compartilhamento nativo. Mas você realmente olhou para o que é compartilhado?
É um URL ou um endereço para uma página da web. Por que adicionar uma etapa extra ao processo?
A web permite que os usuários compartilhem a página exata que estão visualizando com seus amigos e seguidores nas redes sociais.
Aqui está um segredinho sujo, isso pode ser feito sem qualquer JavaScript! Basta verificar os botões de compartilhamento na parte inferior deste artigo. E enquanto você estiver lá, compartilhe-o com seus seguidores!
Existe um padrão da web emergente para integração com APIs de compartilhamento de plataforma, mas suspeito que ainda falte pelo menos um ano para obter um suporte amplo.
Otimização de mecanismos de pesquisa
A vantagem da web é a capacidade de vincular, facilitando a conexão de pontos distintos. Alex Russel declarou essa capacidade a superpotência da web .
No ano passado, atualizei meu Habilidades e interesse em SEO , em grande parte porque PWAs são ótimos para SEO . Aumentei a exposição do Love2Dev significativamente nos últimos anos. Tanto é verdade que adicionei SEO às ofertas de serviço da Love2Dev.
A grande vantagem aqui é que a pesquisa orgânica é gratuita, mais ou menos. Tive que fazer esforços intencionais para melhorar não apenas os aspectos técnicos do site, mas também aprender a escrever de forma diferente. Eu também precisava aprender sobre o link building moderno e muitos outros detalhes. Exceto por algumas ferramentas de pesquisa, não gasto dinheiro neste canal de marketing.
Os aplicativos nativos não têm essa vantagem. Muitos apontam as lojas de aplicativos como uma forma de os clientes descobrirem seu aplicativo ou marca. Eles estão errados. As lojas de aplicativos têm uma funcionalidade de pesquisa terrível Encontrar aplicativos é quase impossível, mesmo quando você sabe o nome do aplicativo. Desisti várias vezes.
Além disso, os aplicativos não oferecem capacidade de descoberta profunda. A força da construção de uma marca está na cauda longa. Isso significa ser uma das melhores respostas para quantas perguntas os clientes possam ter em seu nicho. Os volumes de pesquisa são baixos, mas bilhões dessas pesquisas são feitas a cada dia. Isso oferece muito mais oportunidades para você alcançar os clientes.
Nenhum aplicativo tem a capacidade de alguém descobrir quando está procurando por’móveis de vime branco’.
Para registro esse termo obtém cerca de 1.000 pesquisas mensais e tem uma intenção de compra alta. Profissionais de marketing, vocês sabem o que isso significa. Ninguém terá o trabalho de baixar seu aplicativo nativo para ver quais móveis de vime branco você tem a oferecer.
Mais fácil de desenvolver do que Aplicativos nativos
Os custos de desenvolvimento são importantes. Não vou mentir: um ótimo aplicativo de e-commerce, mesmo quando construído usando o Shopify ou Magento não é barato. O mesmo vale para um bom site promocional que funciona.
Mas os investimentos financeiros são muito menores do que os aplicativos nativos. Eu identifico três razões principais:
- Mais ferramentas
- Base de desenvolvedores mais ampla
- Com base em padrões da Web, não em linguagens proprietárias e APIs
Um site pode ser construído usando o Bloco de notas ou qualquer editor de texto. Eu e milhões de outros desenvolvedores (incluindo muitos no Google) usamos o Visual Studio Code da Microsoft. VS Code é um ambiente de desenvolvimento integrado gratuito que pode ser usado para vários idiomas e plataformas. Essas ferramentas tornam a web mais fácil de configurar e executar para os desenvolvedores.
Existem literalmente milhões e milhões de desenvolvedores versados em um conjunto mínimo de habilidades de desenvolvimento web. Isso significa que você tem um grupo maior para selecionar.
Finalmente, a web é construída em um conjunto de padrões independentes. Cada navegador então implementa esses padrões. Os desenvolvedores não precisam se preocupar com implementações específicas da plataforma ou APIs proprietárias. Isso significa que você pode escrever um e o site pode ser executado em qualquer lugar.
Aplicativos nativos exigem que os desenvolvedores aprendam iOS, Android e Windows. Cada plataforma é única e aprender todas as três é um desafio até mesmo para os melhores desenvolvedores.
Resumo
Aplicativos da web progressivos são as melhores experiências da web em sala de aula. Não são apenas os melhores sites que oferecem experiências do usuário em paridade com as contrapartes de aplicativos nativos. Eles oferecem muitas vantagens para as empresas se envolverem com os clientes que os aplicativos nativos não podem alcançar.
Os PWAs podem trabalhar offline, devem carregar instantaneamente e fornecer novos canais para reconquistar os visitantes e construir relacionamentos com a marca. Os desenvolvedores gostam deles porque oferecem a eles um novo playground com os recursos que os prestadores de serviço oferecem.
Tanto para desenvolvedores quanto para as partes interessadas da empresa, os aplicativos da Web progressivos são os vencedores. você é novo em aplicativos da web progressivos e quer saber mais. Tenho um novo livro, Desenvolvimento progressivo de aplicativos da web por exemplo e um curso online: Progressive Web Apps From Beginner to Expert disponível para ajudar os desenvolvedores a começar para acelerar.
Para o lado comercial, oferecemos serviços de consultoria e desenvolvimento progressivo de aplicativos da Web .
De qualquer forma, certifique-se de adicionar Love2Dev à sua tela inicial para que você não perca nenhum conteúdo sobre Progressive Web Apps e SEO que publicaremos no futuro.
