O que s\u00e3o PWAs?<\/h2>\n
Os Aplicativos Web Progressivos s\u00e3o um tipo de tecnologia que combina os recursos de um site tradicional e responsivo com os de um aplicativo m\u00f3vel rico em recursos.<\/p>\n
De acordo com a Mozilla<\/a>, os PWAs usam recursos web modernos para fornecer uma interface web semelhante a um aplicativo que pode ser acessada com um navegador web.<\/p>\n Os tr\u00eas componentes-chave tecnol\u00f3gicos por tr\u00e1s dos PWAs incluem:<\/p>\n A combina\u00e7\u00e3o de todas as tr\u00eas tecnologias proporciona uma experi\u00eancia r\u00e1pida e sem instala\u00e7\u00e3o, com o PWA totalmente integrado \u00e0 p\u00e1gina inicial.<\/p>\n Voc\u00ea pode ver todas essas partes se unirem maravilhosamente com o site e o aplicativo do Cafe Javas<\/a>.<\/p>\n Desenvolvido pela TechAhead<\/a>, esse PWA oferece uma experi\u00eancia perfeita entre as vers\u00f5es do site e do aplicativo m\u00f3vel. Isso facilita para os clientes fazerem pedidos em seus navegadores web sem a experi\u00eancia de usu\u00e1rio frustrante de um site tradicional.<\/p>\n Transformar seu site WordPress em um Aplicativo Web Progressivo pode melhorar significativamente sua presen\u00e7a digital e a experi\u00eancia do usu\u00e1rio. Veja por que fazer a mudan\u00e7a \u00e9 uma jogada brilhante:<\/p>\n Uma das in\u00fameras vantagens dos PWAs \u00e9 a capacidade de enviar notifica\u00e7\u00f5es push. Isso permite que voc\u00ea informe o p\u00fablico sobre suas \u00faltimas not\u00edcias e an\u00fancios e simplesmente garanta que os visitantes do site n\u00e3o se esque\u00e7am de voc\u00ea. Essa caracter\u00edstica incentiva visitas regulares e um n\u00famero maior de intera\u00e7\u00f5es.<\/p>\n Os PWAs tamb\u00e9m s\u00e3o extremamente r\u00e1pidos. A maioria dos ativos \u00e9 armazenada em cache, e os service workers ajudam a carreg\u00e1-los rapidamente. Mesmo que os visitantes do seu site n\u00e3o tenham o provedor de rede mais r\u00e1pido e confi\u00e1vel, o PWA alimentado por WordPress ser\u00e1 carregado instantaneamente. Esse acr\u00e9scimo de velocidade n\u00e3o apenas melhora a experi\u00eancia do usu\u00e1rio, mas tamb\u00e9m contribui positivamente para a classifica\u00e7\u00e3o nos mecanismos de pesquisa, pois a velocidade do site \u00e9 um fator de classifica\u00e7\u00e3o para o Google.<\/p>\n Talvez uma das vantagens mais interessantes dos PWAs seja sua capacidade de funcionar off-line ou em redes de baixa qualidade. Isso \u00e9 obtido por meio de service workers que armazenam em cache os principais recursos, permitindo que os usu\u00e1rios acessem p\u00e1ginas visitadas anteriormente mesmo sem conex\u00e3o com a internet.<\/p>\n Tanto os sites tradicionais quanto os aplicativos para dispositivos m\u00f3veis t\u00eam suas limita\u00e7\u00f5es. Os sites, por exemplo, dependem muito da qualidade da rede e n\u00e3o oferecem funcionalidades de aplicativos nativos, como notifica\u00e7\u00f5es push ou acesso off-line. Os aplicativos para dispositivos m\u00f3veis, por outro lado, exigem que os usu\u00e1rios baixem e instalem atualiza\u00e7\u00f5es regularmente.<\/p>\n Os PWAs n\u00e3o t\u00eam essas desvantagens.<\/p>\n Converter seu site WordPress em um PWA n\u00e3o significa apenas melhorar seu site, mas mudar a maneira como o seu p\u00fablico interage com ele, por meio de uma plataforma mais r\u00e1pida e envolvente que funciona bem e tem boa apar\u00eancia em qualquer dispositivo e qualquer rede.<\/p>\n Qualquer pessoa que queira criar um PWA para WordPress precisar\u00e1 saber o seguinte:<\/p>\n Se voc\u00ea fizer uma pesquisa r\u00e1pida sobre os melhores plugins de PWA para WordPress, descobrir\u00e1 rapidamente uma s\u00e9rie de ferramentas que podem aprimorar seu site com funcionalidades semelhantes \u00e0s de um aplicativo, tempos de carregamento mais r\u00e1pidos e outros recursos impressionantes.<\/p>\n Para aqueles que procuram criar um PWA rapidamente, aqui est\u00e3o v\u00e1rios dos principais plugins de PWA dispon\u00edveis atualmente para WordPress que podem acelerar seu fluxo de trabalho.<\/p>\n Desenvolvido pela SuperPWA, o plugin Super Progressive Web Apps<\/a> oferece aos usu\u00e1rios do WordPress uma maneira simples de transformar seus sites em Aplicativos Web Progressivos (PWAs). Essa fus\u00e3o dos melhores aspectos das tecnologias de aplicativos para dispositivos m\u00f3veis e da web permite uso off-line, tempos de carregamento quase instant\u00e2neos e acesso por atalho na tela inicial.<\/p>\n O SuperPWA \u00e9 executado em um modelo freemium, o que significa que um conjunto b\u00e1sico de recursos est\u00e1 dispon\u00edvel gratuitamente, com extras acess\u00edveis por meio de upgrades. O primeiro conjunto de atualiza\u00e7\u00f5es do SuperPWA custa a partir de US$ 99.<\/p>\n O plugin PWA for WP & AMP<\/a> enriquece a experi\u00eancia do usu\u00e1rio com uma interface semelhante \u00e0 de um aplicativo, compatibilidade total com AMP PWA, suporte a multisite, rastreamento UTM e a possibilidade de trabalhar off-line. Tamb\u00e9m oferece suporte para o desenvolvimento de service workers, banners de aplicativos, um manifesto do aplicativo web e uma tela de abertura personalizada.<\/p>\n O plugin PWA<\/a> se concentra nos elementos essenciais do PWA, como service workers, manifesto do aplicativo web e suporte a HTTPS. O PWA \u00e9 voltado para tempos de carregamento mais r\u00e1pidos e para proporcionar uma experi\u00eancia semelhante \u00e0 de aplicativo em dispositivos m\u00f3veis.<\/p>\n O Instantify<\/a> se diferencia ao combinar tr\u00eas recursos-chave em uma \u00fanica plataforma: Aplicativos Web Progressivos (PWA), Accelerated Mobile Pages (AMP) do Google e Facebook Instant Articles (FBIA). Com essa combina\u00e7\u00e3o, a ferramenta transforma seu site para dar a ele uma sensa\u00e7\u00e3o de aplicativo, acelera o tempo de carregamento na web m\u00f3vel e disponibiliza o conte\u00fado do site em plataformas sociais.<\/p>\n O Instantify custa 29 d\u00f3lares, uma taxa \u00fanica para uma licen\u00e7a vital\u00edcia. Isso inclui seis meses de suporte, que podem ser estendidos por um adicional de 21 d\u00f3lares. O produto n\u00e3o possui avalia\u00e7\u00e3o gratuita nem garantia de devolu\u00e7\u00e3o do dinheiro, portanto, talvez seja melhor considerar suas necessidades atuais e requisitos de compatibilidade com muito cuidado antes de comprar.<\/p>\n Criar um PWA com o WordPress \u00e9 uma maneira empolgante de aprimorar a experi\u00eancia m\u00f3vel do seu site, tornando-o mais r\u00e1pido, confi\u00e1vel e envolvente. Como j\u00e1 discutimos, os PWAs usam recursos web modernos para oferecer experi\u00eancias semelhantes \u00e0s de aplicativos aos usu\u00e1rios diretamente de seus navegadores.<\/p>\n Aqui est\u00e1 um miniguia passo a passo sobre como transformar seu site WordPress em um PWA usando um dos plugins que discutimos.<\/p>\n Antes de se aprofundar nos aspectos t\u00e9cnicos, voc\u00ea deve planejar os recursos e as metas do seu PWA. Considere quais partes do seu site poderiam se beneficiar do acesso off-line, quais a\u00e7\u00f5es os usu\u00e1rios devem poder executar sem uma conex\u00e3o de rede e que apar\u00eancia voc\u00ea deseja para o seu PWA na tela inicial. O planejamento ajuda a garantir que seu PWA aprimore a experi\u00eancia do usu\u00e1rio de maneira significativa.<\/p>\n Conforme discutimos, h\u00e1 v\u00e1rios plugins dispon\u00edveis para transformar seu site WordPress em um PWA.\u00a0Avalie cada um com base em suas necessidades espec\u00edficas. Se estiver procurando uma solu\u00e7\u00e3o simples e direta, o Super Progressive Web Apps oferece uma configura\u00e7\u00e3o f\u00e1cil. Se voc\u00ea precisa de integra\u00e7\u00e3o com v\u00e1rias ferramentas, o Instantify pode ser uma op\u00e7\u00e3o melhor.<\/p>\n Hoje, em nosso exemplo, usaremos o Super Progressive Web Apps.<\/p>\n Depois que voc\u00ea escolher um plugin, instale-o em seu site WordPress. Voc\u00ea pode fazer isso acessando o painel do WordPress, navegando at\u00e9 Plugins > Add New<\/strong>, procurando o plugin pelo nome e clicando em Install Now<\/strong>. Ap\u00f3s a instala\u00e7\u00e3o, clique em Activate<\/strong>.<\/p>\n Ap\u00f3s a ativa\u00e7\u00e3o, voc\u00ea encontrar\u00e1 as configura\u00e7\u00f5es do plugin no menu Settings <\/strong>do painel do WordPress.<\/p>\n Aqui, voc\u00ea pode definir v\u00e1rios aspectos do seu PWA, como:<\/p>\n Quando terminar de fazer as altera\u00e7\u00f5es, clique em Save Settings<\/strong>.<\/p>\n Depois que voc\u00ea tiver definido as configura\u00e7\u00f5es, \u00e9 fundamental testar o PWA em diferentes dispositivos. Use o Chrome DevTools ou ferramentas semelhantes para simular v\u00e1rios dispositivos, ou teste diretamente no seu dispositivo m\u00f3vel adicionando seu site \u00e0 tela inicial.<\/p>\n Por exemplo, se voc\u00ea estiver usando um dispositivo iOS, precisar\u00e1 limpar o cache do navegador m\u00f3vel antes de visitar o site.<\/p>\n Clique no bot\u00e3o Share<\/strong>, da\u00ed em Options<\/strong>. Clique em Add to Homescreen<\/strong>. Feche o navegador e clique no \u00edcone do aplicativo que acabou de ser adicionado \u00e0 sua tela inicial. Navegue por algumas p\u00e1ginas do site, desconecte-se da internet e tente acessar essas mesmas p\u00e1ginas novamente. Se carregarem, seu PWA est\u00e1 funcionando!<\/p>\n Para aqueles que buscam mais controle e personaliza\u00e7\u00e3o, a convers\u00e3o manual do seu site WordPress em um PWA pode ser o caminho preferido.<\/p>\n Esse m\u00e9todo \u00e9 mais t\u00e9cnico e requer um bom entendimento dos princ\u00edpios de desenvolvimento web, portanto, certifique-se de revisar os pr\u00e9-requisitos definidos anteriormente para confirmar que voc\u00ea possui as habilidades para conclu\u00ed-lo.<\/p>\n Proteger seu site com HTTPS n\u00e3o \u00e9 negoci\u00e1vel para PWAs. O HTTPS criptografa os dados entre o seu site e os visitantes, protegendo contra vazamentos de dados e similares.<\/p>\n Voc\u00ea pode obter um certificado SSL gratuito da Let’s Encrypt<\/a> se um desses n\u00e3o foi fornecido com seu pacote de hospedagem.<\/p>\n O processo de instala\u00e7\u00e3o varia conforme o seu provedor de hospedagem. Muitos oferecem op\u00e7\u00f5es f\u00e1ceis de instala\u00e7\u00e3o de SSL com um clique. Verifique a documenta\u00e7\u00e3o de suporte do seu provedor de hospedagem para obter instru\u00e7\u00f5es espec\u00edficas.<\/p>\n Ap\u00f3s instalar o certificado SSL, certifique-se de que todo o tr\u00e1fego do site use HTTPS, redirecionando-o de HTTP para HTTPS. Isso pode ser feito com um plugin do WordPress como o Really Simple SSL<\/a> ou modificando o arquivo .htaccess do seu site<\/a>, se voc\u00ea se sentir confort\u00e1vel com edi\u00e7\u00f5es manuais.<\/p>\n O manifesto do aplicativo web \u00e9 um arquivo JSON que controla como o seu PWA aparece para os usu\u00e1rios e como ele \u00e9 iniciado. Inclui o nome do aplicativo, os \u00edcones e a URL de in\u00edcio, entre outras configura\u00e7\u00f5es.<\/p>\n Para come\u00e7ar, crie um arquivo JSON chamado manifest.json<\/strong>. Esse arquivo deve incluir informa\u00e7\u00f5es importantes sobre seu aplicativo, como nome ( Aqui est\u00e1 o c\u00f3digo aproximado, de acordo com o MDN Web Docs<\/a>.<\/p>\n Adicione um link para o arquivo manifest.json<\/strong> na se\u00e7\u00e3o Em seguida, use ferramentas como o Lighthouse do Google<\/a> para testar e validar a implementa\u00e7\u00e3o do manifesto do aplicativo web.<\/p>\n Os service workers<\/a> funcionam como um proxy entre o seu aplicativo web e o mundo externo. Eles s\u00e3o essenciais para a funcionalidade off-line, notifica\u00e7\u00f5es push e cache de recursos.<\/p>\n Para criar um, voc\u00ea precisar\u00e1 criar um novo arquivo JavaScript. Chame-o de service-worker.js<\/strong> e coloque-o no diret\u00f3rio raiz do seu tema do WordPress. Esse arquivo conter\u00e1 a l\u00f3gica para armazenar recursos em cache, interceptar solicita\u00e7\u00f5es de rede e gerenciar recursos off-line.<\/p>\n Voc\u00ea precisa registrar o service worker no JavaScript do seu aplicativo web. Normalmente, isso \u00e9 feito em um arquivo JavaScript principal executado na sua p\u00e1gina web.<\/p>\n Aqui est\u00e1 um exemplo de como registrar um service worker da Borstch<\/a>:<\/p>\n No arquivo service-worker.js<\/strong>, implemente a l\u00f3gica para armazenar ativos est\u00e1ticos em cache, interceptar solicita\u00e7\u00f5es de busca e servir o conte\u00fado do cache quando estiver off-line.<\/p>\n Aqui est\u00e1 um exemplo b\u00e1sico para armazenar em cache alguns ativos:<\/p>\n Voc\u00ea precisa fazer testes para garantir que o service worker se comporte conforme o esperado. Use o painel Application<\/strong> no Chrome DevTools para inspecionar os service workers registrados, os ativos armazenados em cache e muito mais.<\/p>\n Otimizar seu PWA do WordPress \u00e9 a \u00faltima coisa que voc\u00ea precisa fazer para garantir velocidade, confiabilidade e funcionalidade. Vamos nos aprofundar em algumas t\u00e9cnicas avan\u00e7adas de otimiza\u00e7\u00e3o, com foco em estrat\u00e9gias de cache, prioriza\u00e7\u00e3o de recursos e carregamento adapt\u00e1vel para diferentes velocidades de conex\u00e3o.<\/p>\n O armazenamento em cache \u00e9 um elemento-chave da otimiza\u00e7\u00e3o do PWA, de acordo com a Smashing Magazine<\/a>. Ele permite que seu aplicativo carregue mais rapidamente armazenando c\u00f3pias de recursos. A implementa\u00e7\u00e3o de uma estrat\u00e9gia de cache primeiro garante que seu aplicativo busque recursos no cache antes de tentar a rede. Essa abordagem \u00e9 particularmente eficaz para ativos est\u00e1ticos que n\u00e3o mudam com frequ\u00eancia.<\/p>\n Use service workers para armazenar em cache ativos importantes durante a fase de instala\u00e7\u00e3o. Isso inclui o shell do seu aplicativo (HTML<\/a>, CSS<\/a>, JavaScript<\/a>) e todos os recursos est\u00e1ticos.<\/p>\n Para conte\u00fado din\u00e2mico, considere estrat\u00e9gias como stale-while-revalidate<\/a>, que serve conte\u00fado em cache primeiro e, em seguida, atualiza o cache com conte\u00fado novo do servidor.<\/p>\n Nem todos os recursos s\u00e3o iguais. Alguns s\u00e3o essenciais para a renderiza\u00e7\u00e3o inicial, enquanto outros podem ser renderizados por meio de carregamento pregui\u00e7oso (lazy loading)<\/a>. Analise o desempenho de carregamento do seu aplicativo para identificar quais recursos s\u00e3o essenciais e devem ser carregados primeiro. Voc\u00ea pode usar as diretivas de preload e prefetch para informar o navegador sobre essas prioridades:<\/p>\n O carregamento\u00a0adaptativo <\/span>personaliza <\/span>o conte\u00fado e os recursos do seu aplicativo com base nos recursos do dispositivo do usu\u00e1rio e as condi\u00e7\u00f5es da rede. Essa t\u00e9cnica garante que seu PWA ofere\u00e7a uma boa experi\u00eancia mesmo em redes lentas ou inst\u00e1veis.<\/span><\/p>\n Implemente a detec\u00e7\u00e3o de recursos para fornecer diferentes ativos com base no dispositivo do usu\u00e1rio. Por exemplo, voc\u00ea pode fornecer imagens de alta resolu\u00e7\u00e3o para usu\u00e1rios em uma conex\u00e3o r\u00e1pida e imagens menores e compactadas para aqueles em uma conex\u00e3o mais lenta.<\/p>\n\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/cafe-javas.png\")
Por que transformar um site WordPress em um PWA \u00e9 uma boa ideia<\/h2>\n
1. Maior engajamento do usu\u00e1rio<\/h3>\n
2. Mais velocidade do site<\/h3>\n
3. Recursos off-line<\/h3>\n
4. Limita\u00e7\u00f5es tradicionais n\u00e3o se aplicam<\/h3>\n
Pr\u00e9-requisitos para o desenvolvimento de PWA em WordPress<\/h2>\n
\n
Os melhores plugins de PWA para WordPress<\/h2>\n
1. Super Progressive Web Apps<\/h3>\n
![\"super](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/super-pwa.png\")
Pr\u00f3s<\/h4>\n
\n
Contras<\/h4>\n
\n
Pre\u00e7o<\/h4>\n
2. PWA for WP & AMP<\/h3>\n
![\"pwa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/pwa-for-wp-and-amp.png\")
Pr\u00f3s<\/h4>\n
\n
Contras<\/h4>\n
\n
3. PWA<\/h3>\n
![\"pwa\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/pwa.png\")
Pr\u00f3s<\/h4>\n
\n
Contras<\/h4>\n
\n
4. Instantify<\/h3>\n
![\"instantify\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/instantify.png\")
Pr\u00f3s<\/h4>\n
\n
Contras<\/h4>\n
\n
Pre\u00e7o<\/h4>\n
Como criar um PWA com um plugin do WordPress: passo a passo<\/h2>\n
Passo 1: Planejando o seu PWA<\/h3>\n
Passo 2: Escolhendo o plugin certo<\/h3>\n
Passo 3: Instalando o plugin que voc\u00ea escolheu<\/h3>\n
![\"install](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/install-super-pwa.png\")
Passo 4: Ajustando as configura\u00e7\u00f5es<\/h3>\n
![\"super](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/super-pwa-settings.png\")
\n
\n
Passo 5: Testando seu novo PWA<\/h3>\n
Como criar um PWA com o WordPress do zero<\/h2>\n
Etapa 1: Garantindo o HTTPS<\/h3>\n
Etapa 2: Criando um manifesto do aplicativo web<\/h3>\n
name<\/code>), nome curto (short_name<\/code>), URL inicial (start_url<\/code>), tipo de exibi\u00e7\u00e3o (display<\/code>), cor do background (background_color<\/code>), cor do tema (theme_color<\/code>) e \u00edcones (icons<\/code>).<\/p>\n{\n\n\"name\": \"Your App Name\",\n\n\"short_name\": \"AppShortName\",\n\n\"start_url\": \"\/\",\n\n\"display\": \"standalone\",\n\n\"background_color\": \"#FFFFFF\",\n\n\"theme_color\": \"#000000\",\n\n\"icons\": [\n\n{\n\n\"src\": \"path\/to\/icon.png\",\n\n\"sizes\": \"192x192\",\n\n\"type\": \"image\/png\"\n\n}\n\n]\n\n}<\/code><\/pre>\nhead<\/code> do template do seu site WordPress.<\/p>\nPasso 3: Implementando um service worker<\/h3>\n
if ('serviceWorker' in navigator) {\n\nwindow.addEventListener('load', function() {\n\nnavigator.serviceWorker.register('\/service-worker.js').then(function(registration) {\n\n\/\/ Registration was successful\n\nconsole.log('ServiceWorker registration successful with scope: ', registration.scope);\n\n}, function(err) {\n\n\/\/ registration failed :(\n\nconsole.log('ServiceWorker registration failed: ', err);\n\n});\n\n});\n\n}<\/code><\/pre>\nconst CACHE_NAME = 'your-app-cache';\n\nconst urlsToCache = [\n\n'\/',\n\n'\/styles\/main.css',\n\n'\/script\/main.js'\n\n];\n\nself.addEventListener('install', event => {\n\nevent.waitUntil(\n\ncaches.open(CACHE_NAME)\n\n.then(cache => {\n\nreturn cache.addAll(urlsToCache);\n\n})\n\n);\n\n});<\/code><\/pre>\nOtimiza\u00e7\u00e3o de um PWA do WordPress<\/h2>\n
Estrat\u00e9gias de armazenamento em cache<\/h3>\n
Prioriza\u00e7\u00e3o de recursos<\/h3>\n
\n
Carregamento adaptativo<\/h3>\n