Aumente o tráfego qualificado no seu site.
Email info@fredericolopes.com Ligue Agora! +351-937-712-822

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

Home > Blog > Performance > 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).

Como criar uma aplicação web progressiva (PWA)

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

Sobre o autor

Frederico Lopes é um Profissional Certificado pela Google na Criação de Sites, Especialista SEO e Formador de E-Commerce na FLAG. Foi eleito recentemente, pelo JORNAL PÚBLICO como uma das pessoas mais relevantes em 2019, na área da Formação de Marketing Digital em Portugal.

Deixe o seu Comentário

Frederico Lopes

Frederico Lopes é um Profissional Certificado pela Google, Especialista SEO e Formador de E-Commerce na FLAG. Eleito recentemente, pelo JORNAL PÚBLICO como uma das pessoas mais relevantes, na área da Formação de Marketing Digital em Portugal.

Mais vendas no seu negócio?

Pare de deixar passar oportunidades de obter mais clientes e vendas. Peça agora a sua proposta!

    Eu concordo com o armazenamento dos meus dados de acordo com as Políticas de Privacidade

    Certificado Google
    fechar

    Copie e cole este código para exibir a imagem no seu site