Você, sem dúvida, já ouviu falar da próxima onda da web móvel. A coisa mais comum que você provavelmente já ouviu é que o acesso à web móvel está aumentando rapidamente, e cerca de metade de todo o tráfego da web agora é feito por telefone ou tablet. UMA Relatório 2018 de fevereiro do Pew Research Center observe que o 95% de todos os americanos possui um telefone celular, enquanto a parcela de americanos com smartphones é 77%.
Você não precisa ir muito longe para ver o impacto do celular. Observe seu próprio comportamento e o de sua família. Em dezembro de 2016, comScore relatou que o americano médio com mais de 17 anos passa duas horas e 51 minutos por dia em seus telefones (Englais).
Statcounter.com observa que o tráfego global da Web vem principalmente de dispositivos móveis por pelo menos um ano (51,95% em fevereiro 2018).
Embora você possa pensar que não pode desenvolver um aplicativo nativo para seus usuários móveis armazenarem em seus telefones, há uma excelente alternativa disponível para todas as empresas: Aplicativos da Web progressivos. Talvez você já tenha ouvido falar de Progressive Web Applications (PWAs) e como as pessoas os usam para expandir seus negócios. Neste artigo, você aprenderá um pouco mais sobre os PWAs e por que deveria pensar mais sobre seu uso em 2018.
Algumas definições
Os Progressive Web Applications (PWAs) são uma coleção de padrões da web originalmente desenvolvidos pelo Google para melhorar o desempenho do site em dispositivos móveis. Portanto, os sites funcionam mais como aplicativos móveis dedicados que você pode encontrar na App Store da Apple ou no Google Play.
outro definição desenvolvedores da cadeia de hotéis indiana Treebo: “PWAs são aplicativos de página única aprimorados de forma incremental com recursos que fornecem uma experiência nativa mais imersiva. »
Reduzindo isso um pouco, os PWAs em dispositivos móveis permitem que seus leitores e clientes carreguem rapidamente a página inicial do seu site e usem muitos dos mesmos recursos no dispositivo móvel que um aplicativo nativo usaria. Seu site pode existir fora do navegador, mesmo quando o dispositivo não está conectado à Internet.
Outras definições
Algumas das principais partes técnicas de um PWA incluem:
Trabalhadores de Serviços são as principais tecnologias associadas aos PWAs. Isso permite que os PWAs operem fora da rede.
Arquivos de manifesto contêm o ícone e o nome que vincula o aplicativo no dispositivo ao site da Web. O desenvolvedor também pode adicionar elementos de design aqui para aprimorar a experiência do cliente.
Push Notifications comunicar com seus usuários (com a permissão deles), para que eles voltem.
Algumas razões
Então, por que seu site deveria incluir um PWA? É muito simples.
Melhor desempenho - mesmo no desktop!
Você sabe que tem um tempo limitado para ganhar um visitante pela primeira vez – seis segundos de carregamento antes que um cliente em potencial saia e visite o próximo site nos resultados da pesquisa. Os usuários móveis são ainda mais impacientes – metade dos seus usuários em potencial sairá se um site demorar mais de 3 segundos para carregar!
Boas notícias: as alterações feitas para criar um aplicativo da web progressivo acelerarão o seu site!
Exemplo: a empresa hoteleira indiana Treebo reduziu o tempo de carregamento do celular de seis segundos para 1,5 segundos ao criar seu PWA. O site agora carrega na área de trabalho em um segundo! Sua equipe de tecnologia relatou que as classificações de pesquisa do site melhoraram e a taxa de conversão mensal mais que dobrou!
Capacidade offline
O PWA não precisa estar na Internet para fazer isso. Seus usuários podem acessar todo o conteúdo do aplicativo em seus dispositivos ou desktops.
Na verdade, uma das melhores coisas sobre um PWA é que seu cliente pode salvar o site na página inicial do dispositivo e usá-lo posteriormente para comprar seu produto ou obter mais informações. .
Por exemplo, CNET Tech hoje oferece um resumo diário das notícias relacionadas à tecnologia que são o pão de cada dia do site. Se você abrir o site com o Google Chrome em um dispositivo Android e rolar até a parte inferior da tela, verá o seguinte:
Imprensa Adicionar à tela inicial para baixar o aplicativo da web progressivo Tech Today para o seu dispositivo. Toque no ícone para carregar as 10 principais histórias atuais. Deslize para a esquerda para ler cada história. Toque no logotipo da CNET para abrir a página inicial da CNET em seu navegador.
Observação : No Firefox, sites com PWA têm um ícone “Adicionar à página inicial” (um sinal de mais em uma pequena caixa) diretamente na barra de endereço. Se o PWA já estiver instalado, o logotipo do Android na barra de endereço o levará para o PWA.
Uma coisa que seu site não precisa: widgets "Baixe nosso aplicativo" ocupam espaço em sua página (geralmente com os logotipos do iTunes e Android distraindo os usuários). Se o Chrome perceber que um usuário abriu seu site PWA várias vezes por semana, ele solicitará que você adicione seu PWA. As atualizações também são automáticas.
Não há necessidade de linguagens de programação complexas
Você pode ter pensado em criar um aplicativo móvel nativo para sua empresa, mas descobriu que criar um aplicativo móvel é um animal diferente do que criar um site da Web. Se você estiver trabalhando com uma agência de web design/desenvolvimento para manter seu site, eles não terão necessariamente as habilidades necessárias para criar um aplicativo para os principais fornecedores de dispositivos móveis.
Para que o seu software apareça na Apple App Store, seus desenvolvedores devem se registrar na Apple Developer Network, usar a Apple Developer Tool (que funciona apenas no Mac) e conhecer um idioma de Programação aprovada pela Apple: Swift ou Objective C.
Programar para Android é um pouco mais fácil (não é necessária a aprovação do desenvolvedor), mas a grande maioria dos aplicativos Android são escritos em Java, o que pode ser uma linguagem difícil de aprender.
Para que o aplicativo apareça nas lojas online da Apple ou Android, o aplicativo concluído deve obter a aprovação dos custodiantes da respectiva loja.
Em contraste, os aplicativos da web progressivos são desenvolvidos com linguagens populares da web: HTML, CSS (Cascading Style Sheets) e JavaScript. Resumindo, mesmo os desenvolvedores web novatos podem construir PWAs de alta qualidade.
Especificamente, você não precisa de muito treinamento em informática para fazer um PWA para seu site WordPress. Se você já alterou a formatação do seu site usando um tema filho, também pode criar um arquivo PWA. Abordaremos questões de codificação em outro artigo.
Aumentar o suporte de gigantes da tecnologia
Os padrões demoram muito para se tornarem padrões. O Google promoveu os PWAs pela primeira vez em 2015.
Por muito tempo, o Chrome foi o único navegador a oferecer suporte a PWAs, mas isso está prestes a mudar. Nos últimos meses:
- Mozilla adicionou suporte ao PWA no Firefox 58
- A Apple anunciou recentemente o suporte para aplicativos da Web no iOS
- A Microsoft oferecerá suporte ao PWA na próxima versão do Windows 10, que estará disponível ainda este ano (2018).
Indo além de outros fornecedores de sistema operacional, a Microsoft disse que os PWAs de “alta qualidade” em breve serão integrados à loja de aplicativos do Windows 10 em celulares e desktops.
WordPress e PWAs
O WordPress ainda não oferece suporte total à construção de aplicativos da web progressivos no aplicativo base. A equipe do Jetpack está empenhada em adicionar a funcionalidade PWA no próximo ano. Isso é ajudado pela ificação Javascript do WordPress.
Jetpack "Introduz gradualmente os recursos do PWA assim que estão prontos", afirma o desenvolvedor Dan Walmsley em um artigo no blog VIP do WordPress . Os desenvolvedores podem adicionar arquivos de manifesto usando o módulo de manifesto do Jetpack desde a versão 5.6.0, e eles introduziram o carregamento de imagem progressivo, que torna o carregamento do site mais rápido mesmo quando há muitas imagens nele. a página. Mais recursos virão este ano.
Alguns plug-ins buscam adicionar funcionalidade PWA, mas não foram adotados intensamente.
- A ferramenta de otimização do WordPress fornece uma ferramenta de trabalho e manifesto.
- O Super Progressive Web Apps gera um manifesto e um botão Adicionar na tela inicial, entre outros recursos.
- O WordPress Mobile Pack também adiciona recursos do PWA
Como você vai usar o PWA?
Neste tutorial você aprendeu um pouco sobre Progressive Web Apps e por que você deveria adicionar um no site da Web da sua empresa:
- A crescente onda de tráfego de dispositivos móveis
- Melhor desempenho para o seu site - celular e desktop
- Disponibilidade mesmo quando o dispositivo está offline
- Usa recursos padrão da web: HTML, CSS e Javascript. Mais barato de construir
- Maior suporte para navegadores e sistemas operacionais
Talvez agora você queira saber como fazer um PWA no WordPress? Ou mostrar aos seus desenvolvedores como fazer isso? Este será o assunto de outro tutorial.
