Convertendo seu site WordPress em um PWA: com a tendência

O movimento PWA é um movimento tão transformador e monumental que se tornou como uma onda gigante, varrendo o mundo da tecnologia, mudando tudo em seu caminho para melhor.

Algumas das marcas mais influentes do mundo, como o Twitter com seu famoso Twitter Lite , agora tornaram oficialmente o PWA a base para seus desenvolvimentos futuros.

 Leitura recomendada: 12 exemplos de aplicativos da Web progressivos para sua inspiração

WordPress, ou para ser mais específico, Automattic – as pessoas por trás do WordPress, também iniciou o movimento WordPress PWA no Chrome Dev Summit 2017, anunciando seu trabalho em andamento de integração de tecnologias progressivas no fluxo de trabalho de plataformas como o WordPress.

Desde então, o cenário do WordPress mudou tanto que não converter seu WordPress em um PWA é quase uma perda garantida na satisfação do espectador.

Entendendo o PWA

Como o Google colocou, os Progressive Web Apps são

• Confiável – Carregue instantaneamente e nunca mostre o downasaur, mesmo em condições de rede incertas.
• Rápido – Responda rapidamente às interações do usuário com animações suaves e sem rolagem irregular.
• Envolvente – Sinta-se como um aplicativo natural no dispositivo, com uma experiência de usuário imersiva.

Simplificando, os PWAs são o futuro da experiência de navegação na web. Para obter mais informações sobre PWAs, confira nosso artigo: O que é um PWA?.

Por que PWA para WordPress?

A menos que você queira que seus espectadores fiquem entediados esperando o carregamento de sua página da Web, a solução com maior desempenho do site, funcionalidade e UX é sempre a melhor escolha.

Tomemos, por exemplo, o famoso Twitter Lite. Um estudo de caso mostrou que o Twitter experimentou uma tremenda mudança no comportamento do usuário com o lançamento do Twitter Lite.

Nicolas Gallagher, líder de engenharia do Twitter Lite, observa:

O Twitter Lite agora é a maneira mais rápida, barata e confiável de usar o Twitter. O aplicativo da web rivaliza com o desempenho de nossos aplicativos nativos, mas requer menos de 3% do espaço de armazenamento do dispositivo em comparação com o Twitter para Android.

E não é apenas o Twitter que está se juntando ao movimento, grandes marcas como o Spotify também o fizeram com o recente desenvolvimento do Spotify PWA. Estatísticas e notícias sobre as mudanças que os PWAs trazem estão por toda parte e são quase grandes demais para serem ignoradas, fazendo com que a afirmação de um futuro da Web com PWA pareça ainda mais realista do que nunca.

Pré-requisitos para configurar um PWA no WordPress

• Progressive Web Apps requerem que seu site WordPress seja servido de uma origem segura, ou seja, seu site deve ser HTTPS e não HTTP .
• Versão do WordPress: superior a 3.5.0
• Versão do PHP: Superior a 5.3

Como converter seu site WordPress em um PWA

Uma vez que os pré-requisitos mencionados sejam atendidos, os proprietários de sites WordPress podem optar por converter para PWA usando uma das duas maneiras: Manualmente ou Com plugins .

1. Desenvolva manualmente seu PWA

O desenvolvimento de PWA—apesar de ser menos dispendioso do que outros tipos de desenvolvimento—ainda requer uma quantidade substancial de conhecimento de codificação e que seu desenvolvedor conheça os frameworks e bibliotecas Javascript predominantes, principalmente Angular e React. É por isso que muitas vezes é recomendado que proprietários de sites inexperientes experimentem plugins (gratuitos e/ou pagos) ou contratem um desenvolvedor profissional, pois o processo de construção de um PWA não é fácil.

Ao tentar criar um PWA manualmente, lembre-se de seguir a Lista de verificação de aplicativos da Web progressivos do Google e testar sua página da Web com a ferramenta Lighthouse para obter a melhor experiência possível do usuário.

2. Com plug-ins

Não se preocupe, proprietários de sites que não são desenvolvedores! O WordPress oferece uma grande variedade de plugins que fazem a maioria dos trabalhos pesados ​​para seus usuários escolherem. Esses plugins vêm em 2 tipos: Plugins gratuitos e pagos.

Plug-ins gratuitos

1. Super PWA

No topo dos plugins PWA gratuitos para WordPress está o SuperPWA com sua longa tradição de excelente serviço e qualidade.

SuperPWA é fácil de configurar, leva menos de um minuto para configurar seu Progressive Web App. O SuperPWA faz uma desinstalação limpa, removendo todas as entradas e arquivos do banco de dados que ele cria. Na verdade, nenhuma das configurações padrão é salva no banco de dados até que você a salve manualmente pela primeira vez.

Instalações ativas: mais de 30.000
Classificação por estrelas: ★★★★★

2. PWA

O PWA destina-se a fornecer os blocos de construção do PWA e o mecanismo de coordenação para temas e plugins para não reinventar a roda e também para não entrar em conflito entre si.

Se você estiver desenvolvendo um plug-in ou tema que inclui um service worker, considere confiar nesse plug-in do PWA ou, pelo menos, use apenas a implementação integrada como um substituto para quando o plug-in do PWA não estiver disponível.

Última atualização: 5 meses atrás
Instalações ativas: mais de 20.000
Classificação por estrelas: ★★★★

3. PWA para WP e AMP

Para uma oferta gratuita, o PWA para WP e AMP é ótimo no que faz. É bom, fácil de usar e oferece um atendimento excepcional ao cliente; no entanto, sua documentação parece um pouco deficiente, o que pode levar a uma dificuldade em fazer tudo funcionar.
Instalações ativas: mais de 8.000
Classificação por estrelas: ★★★★★

4. WebSuite PWA

WebSuite PWA é um plugin completo para transformar seu site em um PWA com suporte AMP integrado. O plug-in vem com vários temas para dar ao seu PWA uma aparência semelhante a um aplicativo, além de muitos recursos, como Adicionar à tela inicial, notificações por push, CDN, integração de análise etc.

Instalações ativas: 30+

Classificação por estrelas: ★★★★★

5. PWA simples para WordPress por Webkul

Com apenas US $ 49, você pode converter seu site WordPress em um PWA totalmente funcional com todos os seus recursos e vantagens - e isso não é tudo. O plugin é compatível com todos os temas do WordPress, além disso, você pode alterar o tema, o nome do aplicativo e o ícone do aplicativo no back-end do administrador sem muito esforço ou conhecimento técnico necessário.

Instalações ativas: informações indisponíveis

Classificação por estrelas: informações indisponíveis

Como instalar plugins PWA

O processo de instalação para WordPress PWA Plugins é bastante simples e simplificado. Abaixo, usaremos o SuperPWA como exemplo:

Instalação do WordPress :

• Visite WordPress Admin > Plugins > Adicionar Novo
• Procure por ' Super Progressive Web Apps '
• Clique em “ Instalar agora ” e depois em “ Ativar ” Super Progressive Web Apps

Para instalar manualmente:

• Carregue a pasta super-progressive-web-apps para o /wp-content/plugins/ diretório em seu servidor
• Vá para Administrador do WordPress > Plugins
• Ative o plug-in Super Progressive Web Apps na lista.

Conclusão

Esse movimento de PWA não parece estar diminuindo tão cedo e sua melhor aposta é agir agora antes de ficar para trás.

Se você é experiente em tecnologia e deseja mais liberdade para você e para o seu site, o desenvolvimento manual do PWA deve ser a opção preferida para você. No entanto, para proprietários de sites que não são tão experientes e desejam um método mais seguro, testado e comprovado , os plug-ins PWA para WordPress não são uma ideia tão ruim. Os plug-ins podem economizar tempo e dores de cabeça ocasionais ao lidar com o processo de construção de um PWA, permitindo assim uma melhor alocação de recursos.

Leitura adicional:

• Magento PWA Studio: uma comparação detalhada com o Vue Storefront

• Integração com Magento WordPress: um guia passo a passo