🧘🏾 🔺 👇🏿 Aplicações web progressivas. Guia de ação 💵 🤞🏿 👩🏻‍🔧

Olá Habr! Estamos explorando a possibilidade de publicar um livro sobre PWA (Progressive Web Applications). Já existem muitas publicações sobre Habré sobre esse assunto, o material do blog da empresa RUVDS é de particular interesse , das quais citaremos a definição de PWA:

... é um aplicativo móvel que foi baixado de um aplicativo da web. Além disso, como você pode ver, para instalar um aplicativo como esse, você não precisa interagir com o Play Market. Como resultado, a instalação desses aplicativos é o mais simples possível. No entanto, isso está longe de ser o mais interessante. Ao iniciar esses programas, você tem a oportunidade de trabalhar com os dados exibidos, mesmo sem uma conexão com a Internet. Eles permitem que você interaja com páginas da web offline.

Às vezes, surge a pergunta: como os aplicativos da web progressivos se relacionam com os nativos? Vale a pena desenvolver o PWA se você já possui um nativo? Antes de tudo, essa pergunta, assim como muitas outras, é respondida pelo artigo de Jason Grigsby no site “A List Apart”, que traduzimos para você hoje. O artigo é um trecho do livro de 2018. Por favor, não esqueça de votar.

Para determinar se sua organização é sensata em desenvolver seu próprio aplicativo da web progressivo (PWA), faça duas perguntas:

Sua organização possui um site? Nesse caso, um aplicativo da web progressivo provavelmente será útil. Parece brega, mas é: é aconselhável transformar quase qualquer site em um aplicativo da web progressivo, pois eles contêm as melhores práticas da Web.
Sua organização ganha dinheiro através do site por meio de vendas eletrônicas, publicidade ou de alguma outra maneira? Nesse caso, você definitivamente precisa de um aplicativo da web progressivo, pois pode aumentar significativamente a receita.

Isso não significa que o site precise implementar todos os recursos existentes dos aplicativos da web progressivos. Pode não ser necessário fornecer funcionalidade offline, notificações por push ou até a capacidade de definir seu site na tela inicial de um dispositivo de usuário. É provável que um mínimo absoluto seja suficiente: um site seguro, um técnico de serviços que acelere seu trabalho, um arquivo de manifesto - essas coisas serão úteis em qualquer site.

Obviamente, você pode decidir que seu site pessoal ou projeto paralelo não é o recurso pelo qual vale a pena desenvolver um aplicativo da web progressivo, gastando tempo e esforço extra nele. Isso é compreensível e, a longo prazo, até sites pessoais ficarão sobrecarregados com os recursos de aplicativos Web progressivos, quando o suporte a esses recursos for adicionado aos sistemas de gerenciamento de conteúdo nos quais esses sites são baseados. Por exemplo, Magento e WordPress no momento da redação deste texto já haviam anunciado planos de adicionar recursos avançados de aplicativos da Web a suas plataformas. Outros devem seguir o exemplo.

No entanto, se você executar um site que ofereça lucro para sua organização de qualquer forma, você deve transformá-lo em um aplicativo da web progressivo e planejar como fazê-lo agora. As empresas que implantaram aplicativos avançados da Web recebem aumento de conversões, engajamento do usuário, aumento de vendas e receita de publicidade. Por exemplo, o Pinterest como resultado da introdução do PWA, o público principal aumentou 60% e a receita de publicidade gerada pelos usuários cresceu 44%. Os usuários do West Elm começaram a gastar cerca de 15 mais tempo no site, a receita de uma visita aumentou 9% .

Desenhando: Eddie Osmani, Google, escreveu um estudo de caso sobre o aplicativo da web progressivo do Pinterest, comparando-o ao site móvel antigo e ao aplicativo nativo.

Existem tantas histórias de sucesso associadas a aplicativos da Web progressivos que minha empresa, a Cloud Four, lançou um site chamado PWA Stats que os acompanha. É provável que exista um caso sobre uma organização semelhante à sua e, com este exemplo, você pode convencer os colegas da adequação de um aplicativo da web progressivo para sua empresa.

Figura : PWAstats.com contém estatísticas e histórias que atestam a eficácia dos aplicativos da web progressivos.

E esse trabalho persuasivo pode ser necessário. Apesar das vantagens óbvias dos aplicativos da Web progressivos, muitas empresas ainda não os reorganizaram, geralmente porque o gerenciamento simplesmente ainda não conhece o PWA. (Portanto, quando você começa a criar o PWA agora, pode estar ganhando tempo!)

No entanto, também existe uma séria confusão sobre o que os aplicativos avançados da Web são capazes, o que podem ser usados e como se relacionam com a Web nativa. formulários. Essa confusão provoca medo, incerteza, dúvidas e tudo isso desacelera a implementação de aplicativos da web progressivos.

Se você defende a implementação do PWA em sua organização, alguns talvez não o entendam e você pode até encontrar resistência. Então, vamos discutir alguns dos argumentos que ajudarão você a fortalecer sua posição e serão úteis ao convencer seus colegas.

Aplicativos nativos e PWA podem coexistir

Se sua organização já possui um aplicativo nativo, as partes interessadas podem contestar que, além disso, não precisam de PWA - especialmente porque a principal vantagem do PWA é a introdução de recursos e funcionalidades inerentes a aplicativos nativos.
É tentador supor que aplicativos da web progressivos competem com aplicativos nativos - como regra, eles são escritos na mídia dessa maneira. Mas, de fato, um aplicativo Web progressivo funciona independentemente de a empresa já possuir um nativo.

Faça uma pausa nas disputas "aplicativos nativos versus aplicativos da web" e concentre-se nas especificidades das interações do usuário com o site da sua organização na Internet. É aconselhável usar aplicativos avançados da Web simplesmente por causa de suas próprias vantagens: eles ajudam a expandir seu público-alvo, proteger seu site, obter lucro, fornecer interações mais confiáveis com os usuários e notificá-los sobre atualizações - tudo isso complementará os recursos do seu aplicativo nativo.

Extensão de público personalizado

Nem todos os usuários atuais têm seu aplicativo nativo instalado - e seus usuários em potencial nem sequer o têm. Provavelmente, o aplicativo nem sequer é instalado na maioria dos usuários comuns, mas aqueles que ainda o instalaram podem ir para lá de um PC.

Ao melhorar a qualidade das interações com o site, você aumenta as chances de seus usuários atuais e futuros lerem seu conteúdo ou comprarem seus produtos (ou até mesmo baixarem seu aplicativo nativo!). Você pode melhorar a qualidade de trabalhar com o site usando um aplicativo Web progressivo.

Apesar do que os blogs técnicos garantem, a Web para dispositivos móveis está crescendo mais rápido que os aplicativos nativos. O site da comScore comparou os 1000 principais aplicativos para dispositivos móveis com os 1000 sites mais colocados e concluiu que "o público da web para dispositivos móveis é quase três vezes maior que o dos aplicativos para dispositivos móveis e cresce duas vezes mais rápido . "

Embora seja verdade que as pessoas gastam mais tempo em seus aplicativos móveis favoritos do que na Web, lembre-se de que às vezes é muito difícil convencer uma pessoa a instalar seu aplicativo no dispositivo. Aproximadamente metade dos usuários de smartphones nos EUA, em regra, não instala nem um aplicativo por mês .

Se seu aplicativo nativo estiver na loja de aplicativos, isso não garante que as pessoas o instalem. O trabalho de promover o aplicativo e incentivar os usuários a instalá-lo é caro. De acordo com Liftoff, uma empresa de marketing de aplicativos para dispositivos móveis,o custo médio necessário para instalar o aplicativo por um usuário é de US $ 4,12 e sobe até US $ 8,21 por usuário, se você desejar que uma pessoa crie uma conta no seu aplicativo.

Se você tiver sorte e alguém começar a instalar seu aplicativo, surgirá o seguinte obstáculo: você precisa convencer as pessoas a não parar de usar o aplicativo. Quando um especialista, Andrew Chen, analisou dados sobre a retenção de usuários no material de 125 milhões de telefones celulares, ele descobriu que o aplicativo médio perde 77% da DAU (usuários ativos diariamente) três dias após a instalação . Em 30 dias, 90% das DAUs são perdidas. Mais de 90 dias, mais de 95% das DAUs são perdidas.

Desenhando: A lealdade do usuário móvel permanece muito curta. O aplicativo médio perde 95% de seus usuários ativos em 90 dias.

Os aplicativos da web progressivos não enfrentam esses desafios. Entender um aplicativo da web progressivo não é mais difícil para uma pessoa do que no seu site, pois esse é o seu site. Todos os recursos de um aplicativo da web progressivo também estão disponíveis imediatamente. Você não precisa executar etapas intermediárias: primeiro vá para a loja de aplicativos e faça o download do aplicativo a partir daí. A instalação é rápida: ocorre em segundo plano quando você visita o site pela primeira vez e literalmente se resume a adicionar um ícone à tela principal.

Como Alex Russell escreveu em seu artigo no Medium em 2017:

A derrapagem ao instalar o PWA é muito menor. Nossas métricas internas do Google mostram que, com volumes comparáveis de banners PWA e banners de aplicativos nativos (a comparação é quase a mesma que com maçãs e maçãs), os banners PWA oferecem uma conversão de 5 a 6 vezes mais vezes. Mais da metade dos usuários que decidiram instalar o aplicativo nativo ao navegar por esses banners não concluem o processo de instalação, enquanto a instalação do PWA ocorre quase instantaneamente.

Em resumo, uma proporção significativa e ainda crescente de seus usuários se comunica com você via web. Os aplicativos da web progressivos podem aumentar a receita, aumentar o envolvimento do usuário e também o número deles.

Proteja seu site

Se você coletar informações de cartão de crédito ou outras informações proprietárias, basta fornecer aos usuários um site bem protegido. Porém, mesmo que dados confidenciais não sejam processados em seu site, ainda faz sentido usar o protocolo HTTPS e fornecer ao usuário uma interação segura com o site. O tráfego de rede aparentemente mais inocente pode conter sinais que simplificam a identificação do usuário e a possível invasão de dados. O que podemos dizer sobre as preocupações em relação à possível vigilância estatal.

Anteriormente, a operação de um servidor seguro era cara, complicada e também (parecia) que ela é mais lenta que o normal. Hoje tudo mudou. Os certificados SSL / TLS costumavam custar centenas de dólares, mas hoje o provedor Let's Encryptos distribui gratuitamente. Muitos provedores de hospedagem trabalham com provedores de certificados, para que você possa configurar o HTTPS com um clique. Além disso, verifica-se que o HTTPS não é tão lento quanto parecia .

Os sites HTTPS também podem atualizar para uma nova versão do HTTP chamada HTTP / 2. A principal vantagem do HTTP / 2 é que ele é significativamente mais rápido que o HTTP / 1. Muitos provedores de hospedagem e redes de entrega de conteúdo (CDNs) estabelecem que, quando você muda para HTTPS, você está conectado ao HTTP / 2 sem nenhuma ação adicional da sua parte.

Mesmo que esse incentivo não seja suficiente para mudar para HTTPS, os fabricantes de navegadores usam o método cenoura e pau, pressionando os sites a introduzir mudanças. Como um "chicote"O Chrome começou a avisar aos usuários que eles estão inserindo seus dados em um site que não está equipado com HTTPS . É provável que outros navegadores sigam o exemplo e sinalizem sites que funcionam sem criptografia, para que os usuários percebam que seus dados podem ser interceptados.

Como um navegador de gengibre HTTPS, os navegadores estão começando a exigir recursos HTTPS do site como obrigatórios. Se você deseja usar as melhores e mais recentes tecnologias da Web, não pode ficar sem o HTTPS . De fato, alguns recursos que costumavam trabalhar com HTTP não seguro agora são considerados como afetando dados confidenciais. Por exemplo, é a geolocalização. No HTTPS, eles são limitados. Depois de pensar um pouco, parece que isso também é um pequeno chicote. Chicote de gengibre?

Diante de tudo isso, é aconselhável fornecer aos usuários um site seguro. Tão terríveis advertências sem sentido são imediatamente excluídas. Você obtém acesso a novos recursos do navegador. Obtenha os ganhos de velocidade fornecidos pelo HTTP / 2. E também: prepare o cenário para uma aplicação web progressiva.
Para usar os profissionais de serviço, uma tecnologia importante relacionada a aplicativos progressivos da Web, você precisa equipar o HTTPS no site. Portanto, se você quiser aproveitar todos os presentes da PWA de uma só vez, primeiro precisará fazer um trabalho preparatório sério.

Aumentar lucros

Existem inúmeros estudos que demonstram uma correlação entre a velocidade de um site e quanto tempo e dinheiro as pessoas estão dispostas a gastar nele. De acordo com a DoubleClick, " 53% das visitas a sites móveis interrompidos são iniciadas pelo usuário se a página de download demorar mais de 3 segundos ". A empresa Walmart descobriu que, a cada 100 milissegundos para otimizar a velocidade de carregamento da página, cai para 1% da receita adicional .

No final, o alto software a velocidade de interação com o site significa muito.Infelizmente, a duração média de carregamento das páginas de sites móveis ao conectar via 3G é de 19 segundos.Mais uma vez, esse aplicativo da Web progressivo ajuda a lidar com esse problema.

Usando trabalhadores de serviço, os PWAs oferecem interações incrivelmente rápidas. Usando trabalhadores do serviço, o desenvolvedor pode indicar explicitamente quais arquivos o navegador deve armazenar no cache local e sob quais circunstâncias deve procurar atualizações para arquivos em cache. Os arquivos armazenados no cache local podem ser acessados muito mais rapidamente do que os arquivos recuperados da rede.

Ao solicitar uma nova página em um aplicativo Web progressivo, o usuário já possui no cache local do dispositivo a maioria dos arquivos necessários para exibir esta página. Assim, a página pode carregar quase instantaneamente, pois o navegador precisa apenas baixar informações adicionais nesta página.

Em muitos aspectos, são esses fatores que fornecem alta velocidade de trabalho com aplicativos nativos. Ao instalar o aplicativo nativo, o usuário faz o download prévio dos arquivos necessários para executar o aplicativo. Depois disso, o aplicativo nativo precisa recuperar apenas novos dados da rede. Os funcionários do serviço podem fazer algo semelhante ao interagir com a web.

Aplicativos da web progressivos podem ter um efeito dramático no desempenho. Por exemplo, o Tinder conseguiu reduzir o tempo de carregamento da página de 11,91 segundos para 4,69 segundos , desenvolvendo um aplicativo Web progressivo, além disso, é 90% menor que o aplicativo Android nativo. A cadeia de hotéis Treebo lançou seu próprio aplicativo da web progressivo e recebeu um aumento de quatro vezes na conversão ao longo do ano; as taxas de conversão para usuários recorrentes triplicaram e o tempo médio de interação do usuário com um site para celular caiu para 1,5 segundos.

Garanta a confiabilidade da rede

As redes móveis não estão funcionando perfeitamente. Você tinha uma conexão LTE de alta velocidade e agora já está rastreando em um ritmo 2G ou geralmente está offline. Todos nós nos encontramos nessas situações. Mas a maioria dos sites ainda está sendo feita com a expectativa de que o trabalho com eles ocorra em uma rede confiável.

A abordagem do PWA permite criar um aplicativo com o qual você pode continuar trabalhando offline. De fato, para garantir o trabalho offline com os aplicativos e acelerar a interação com as páginas da web, a mesma tecnologia foi usada: trabalhadores de serviço.
Como você já sabe, os profissionais de serviço permitem que você informe explicitamente ao navegador quais dados armazenar em cache localmente. Essa categoria de arquivos pode ser expandida: não apenas os recursos necessários para o download do aplicativo, mas também o conteúdo das páginas da Web, para que os usuários não possam interromper a visualização, mesmo quando estão offline.

Figura : A barra de título no aplicativo progressivo Housing.com muda a cor de roxo (esquerda) para cinza (direita) quando está offline. O conteúdo que o usuário visualizou anteriormente ou adicionou aos favoritos está disponível offline (à direita), e isso é razoável, pois o aplicativo Housing.com é voltado para o mercado indiano e, na Índia, a conexão de rede pode ser lenta e não confiável.

Usando um trabalhador de serviço, você pode pré-armazenar em cache o shell do aplicativo fazendo isso “nos bastidores”. Assim, quando um visitante chega a um aplicativo da web progressivo, ele pode fazer o download do aplicativo inteiro, salvá-lo no cache - e é tudo, você pode trabalhar com ele offline, sem nenhuma ação adicional por parte do usuário.

Não deixe de ir aos usuários

Talvez as notificações por push sejam a melhor maneira de envolver os usuários no trabalho com o aplicativo. As notificações por push seduzem uma pessoa, incentivando-a a retornar ao aplicativo para obter informações saborosas - de notícias urgentes a mensagens de bate-papo.

Por que, então, implementar notificações push apenas para aqueles que instalaram o aplicativo nativo? Por exemplo, se você tem um aplicativo de mensagens instantâneas ou foi projetado para funcionar com redes sociais, seria muito útil notificar os usuários sobre novas mensagens.

Figura : Um aplicativo progressivo do Twitter chamado Twitter Lite envia as mesmas notificações do aplicativo nativo (à esquerda). Quando você seleciona uma notificação, você vai imediatamente ao Twitter Lite, para o tweet ao qual ela se refere (à direita).

Os aplicativos da Web progressivos e, em particular, os profissionais de serviço que amamos, permitem usar notificações push em qualquer site. As notificações não são um recurso obrigatório em um aplicativo Web progressivo, mas geralmente são eficazes para melhorar o reengajamento do usuário e o crescimento da receita.

Independentemente de você ter um aplicativo nativo, um aplicativo da web progressivo não o incomoda. Cada passo no desenvolvimento de um aplicativo é um passo no sentido de melhorar o site. Os sites devem estar seguros. Deve ser rápido. Seria bom se eles estivessem disponíveis offline e, se necessário, pudessem enviar notificações aos usuários.
Os usuários que não possuem seu aplicativo nativo (ou não o usam) apreciarão o fato de que trabalhar com seu site se tornou muito mais conveniente. Uma grande vantagem para todo o seu negócio. Tão simples.