Como criar uma Aplicação Web Progressiva (PWA) em menos de 5 minutos

De certo que (quando navega no telemóvel) já reparou em alguns sites a possibilidade de instalar uma Web App Progressiva. Uma das mais avançadas tecnologias para melhorar o comportamento dos sites em telemóvel. Rapidamente se tornou uma métrica importante de análise quanto ao comportamento do site, à semelhança do que já acontece com o Lighthouse (um sistema de código aberto que analisa automaticamente as métricas mais importantes de performance em websites).

O que é afinal uma Web App Progressiva?

Progressive Web Apps (PWA) é uma nova tecnologia que combina o melhor da Web para dispositivos móveis e o melhor dos aplicativos móveis para criar uma experiência da Web móvel superior. Eles são instalados no telefone como um aplicativo normal (aplicativo da web) e podem ser acedidos através dp ecrã inicial.

Os utilizadores podem voltar ao seu site iniciando o aplicativo no ecrã inicial e interagindo com o site por meio de uma interface semelhante a um aplicativo. Os visitantes que retornem irão experimentar tempos de carregamento quase instantâneos e aproveitarão os excelentes benefícios de desempenho da sua PWA!

Super Progressive Web Apps facilita a conversão instantânea do seu site WordPress!

Quando o SuperPWA for instalado, os utilizadores que navegarem no seu website a partir por um dispositivo móvel compatível verão um aviso “Adicionar à tela inicial” (na parte inferior da tela) e poderão “instalar o seu website” no ecrã inicial do dispositivo. Todas as páginas visitadas são armazenadas localmente no dispositivo e estarão disponíveis para leitura mesmo quando estiverem off-line.

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 cria. Na verdade, nenhuma das configurações padrão é salva na base de dados até que salve manualmente pela primeira vez.

Recursos atuais do Super Progressive Web Apps:

• Gere um manifesto para o seu site e adicione-o à cabeça do seu site.
• Defina o ícone do aplicativo para seu aplicativo da Web progressivo.
• Defina a cor de fundo para a tela inicial do seu Progressive Web App.
• Seu site mostrará o aviso “Adicionar à tela inicial” quando acessado em um navegador compatível.
• Cache agressivo de páginas usando a API CacheStorage.
• As páginas armazenadas em cache são exibidas mesmo que o usuário esteja off-line.
• Definir página off-line personalizada: selecione a página que você deseja que o usuário veja quando uma página que não está no
• cache for acessada e o usuário estiver off-line.
• Novo na versão 1.2: Suporte para a propriedade meta da cor do tema. Altere a cor da barra de endereços do navegador Chrome,
• Firefox OS e Opera para corresponder às cores do seu site.
• Novo na versão 1.2: Agora você pode editar o nome do aplicativo e o nome abreviado do aplicativo.
• Novo na versão 1.2: defina a página inicial do seu PWA.
• Novo na versão 1.2: defina a versão das páginas móveis aceleradas (AMP) da página inicial. Plugins suportados: AMP para
• WordPress, AMP para WP, Melhor AMP, AMP Supremacy, WP AMP.
• Novo na versão 1.3: Adicionado suporte para tela inicial de alta qualidade. Agora você pode definir o ícone 512 × 512 para a tela inicial do seu Progressive Web App.
• Novo na versão 1.3: Super Progressive Web Apps agora é responsável por atualizações de conteúdo e atualizará o cache conforme
• você atualiza o site.
• Novo na versão 1.3: Manipulação aprimorada de atualização do trabalhador de serviço no navegador.
• Novo na versão 1.4: Agora você pode definir a orientação padrão do seu PWA. Escolha entre “qualquer” (siga a orientação do
• dispositivo), “retrato” e “paisagem”.
• Novo na versão 1.4: agora você pode definir a propriedade theme_color no manifesto.
• Novo na versão 1.5: Integração OneSignal para notificações push.
• Novo na versão 1.6: Compatibilidade de rede WordPress Multisite.
• Novo na versão 1.7: Add-Ons para SuperPWA está aqui! Acompanha o complemento Rastreamento UTM para rastrear visitas provenientes do seu PWA.
• Novo na versão 1.8: Problemas de compatibilidade com o OneSignal estão agora resolvidos!
• Novo na versão 1.8: Novo Add-On: Apple Touch Icons que define seus ícones de aplicativos como Apple Touch Icons.
• Novo na versão 2.0: o SuperPWA agora é compatível com o WordPress instalado em uma subpasta.
• Novo na versão 2.0: agora pode definir a propriedade de exibição das configurações do SuperPWA.

Próximos recursos:

Aviso do indicador offline.

PROGRESSIVE WEB APP REQUISITOS MÍNIMOS

Os Progressive Web Apps exigem que o seu site WordPress seja veiculado de uma origem segura, ou seja, seu site deve ser HTTPS e não HTTP. Se o seu site não for HTTPS, entre em contato com seu host sobre isso.

APOIO DO DISPOSITIVO E DO NAVEGADOR PARA O PWA

Os aplicativos da Web progressivos precisam de navegadores que suportem manifestos e trabalhadores de serviços. Atualmente, o Google Chrome (versão 57+), o Chrome para Android (62), o Mozilla Firefox (57), o Firefox para Android (58) são os principais navegadores que suportam o PWA.

A lista está a crescer rapidamente e é provável que seja suportada na maioria dos principais navegadores até o final deste ano.

COMO CONVERTER SEU SITE WORDPRESS NUM APLICATIVO WEB PROGRESSIVO

1. Visite o WordPress Admin> Plugins> Adicionar Novo
2. Pesquise por “Super Progressive Web Apps”
3. Clique em “Instalar agora” e depois em “Ativar” Super PWA

PERSONALIZE A SUA APLICAÇÃO PWA

A sua Progressive Web App deve estar pronta para testar as configurações padrão na ativação. Pode personalizá-lo ainda mais e torná-lo verdadeiramente seu.

Vá para o WordPress Admin> SuperPWA
Defina uma cor de plano de fundo para a tela inicial a ser exibida quando o seu PWA for aberto em um dispositivo móvel.
Definir o ícone do aplicativo. Este será o ícone do seu PWA quando for adicionado à tela inicial em um dispositivo móvel. O ícone deve ser uma imagem PNG e ter exatamente 192 x 192 pixels de tamanho.
Definir a página offline. Esta página será exibida se o usuário estiver offline e a página solicitada não estiver armazenada em cache. Idealmente, você deve criar uma página dedicada ao WordPress e defini-la aqui. Na página criada, você pode adicionar uma observação que diz: “Parece que você está off-line e a página solicitada não está disponível no momento. Por favor, verifique novamente quando estiver online. ”
Clique em “Salvar configurações”.

TESTAR A APLICAÇÃO

1. Abra um navegador compatível num dispositivo compatível (por exemplo: Chrome para Android (62 ou superior) em um telefone Android)
2. Entre no seu site e espere até que ele seja totalmente carregado
3. Deve ver um pop-up que tem o ícone do aplicativo e um botão que diz “ADICIONAR À TELA INICIAL”.
4. Clique nele e seu PWA será adicionado à sua tela inicial. Aguarde a conclusão da instalação.
5. Vá para a tela inicial e abra o seu PWA. Navegue em algumas páginas, se quiser. Feche o aplicativo.
6. Desconecte-se da Internet e abra seu PWA novamente. Deve conseguir ver todas as páginas onde navegou anteriormente.
7. Tente visitar uma página que você não visitou antes. Deve ver a página que definiu como sua “Página Offline” nas configurações do SuperPWA

E é isto, acabou de criar a sua primeira aplicação web progressiva 🙂 Pode agora começar a verificar o aumento das conversões em telemóvel.

Votos de sucesso do seu amigo,

Frederico Lopes