{"id":53164,"date":"2025-05-05T11:00:17","date_gmt":"2025-05-05T14:00:17","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=53164"},"modified":"2025-05-06T08:55:29","modified_gmt":"2025-05-06T11:55:29","slug":"como-desenvolver-aplicativos-web-progressivos-pwa","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-desenvolver-aplicativos-web-progressivos-pwa\/","title":{"rendered":"Quer um site mais r\u00e1pido e que funcione offline? Conhe\u00e7a os PWAs"},"content":{"rendered":"\n<p class=\"has-text-align-center wp-block-paragraph\"><em>Aprenda a desenvolver PWAs e melhore a experi\u00eancia das pessoas usu\u00e1rias com apps r\u00e1pidos, offline e responsivos.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>conceito de Aplicativos Web Progressivos (PWA)<\/strong> vem ganhando cada vez mais destaque no mundo do desenvolvimento web. PWAs combinam recursos avan\u00e7ados dos navegadores modernos com a praticidade das p\u00e1ginas tradicionais, criando uma experi\u00eancia de uso muito semelhante \u00e0 de aplicativos nativos.\u00a0\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De fato, para muitos neg\u00f3cios, essa tecnologia se tornou uma solu\u00e7\u00e3o intermedi\u00e1ria perfeita entre sites responsivos e apps convencionais, potencializando o engajamento dos clientes sem exigir instala\u00e7\u00f5es complexas.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, vamos abordar como desenvolver PWAs, os benef\u00edcios que trazem para as empresas e as principais tecnologias necess\u00e1rias para criar solu\u00e7\u00f5es robustas e escal\u00e1veis.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>experi\u00eancia do usu\u00e1rio (UX)<\/strong> est\u00e1 no centro dos PWAs, pois eles s\u00e3o projetados para serem r\u00e1pidos, confi\u00e1veis e altamente interativos, mesmo em redes inst\u00e1veis. Se voc\u00ea quer aprimorar a navegabilidade e a satisfa\u00e7\u00e3o do p\u00fablico, consulte algumas reflex\u00f5es sobre <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/os-elementos-da-experiencia-do-usuario\/\" target=\"_blank\" rel=\"noreferrer noopener\">os elementos da experi\u00eancia do usu\u00e1rio<\/a> e como a <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-a-velocidade-do-site-influencia-na-experiencia-do-usuario\/\" target=\"_blank\" rel=\"noreferrer noopener\">velocidade do site influencia na experi\u00eancia do usu\u00e1rio<\/a>. Elas ajudar\u00e3o a entender por que PWAs podem fazer diferen\u00e7a no engajamento. &nbsp;<br><br>A seguir, mostraremos aspectos t\u00e9cnicos, como configurar <strong>Service Workers<\/strong>, criar o <strong>Manifest JSON<\/strong> e adotar <strong>HTTPS<\/strong> para seguran\u00e7a. Tamb\u00e9m abordaremos um passo a passo pr\u00e1tico, incluindo dicas de hospedagem para que voc\u00ea possa dar vida ao seu PWA de forma eficaz.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao final desta leitura, voc\u00ea ter\u00e1 uma vis\u00e3o objetiva de como projetar e implementar PWAs, aproveitando recursos como acesso offline, notifica\u00e7\u00f5es push e caching inteligente. Al\u00e9m disso, entender\u00e1 por que o <strong>servidor web ou hospedagem<\/strong> escolhida tem um papel importante para assegurar desempenho e disponibilidade da sua aplica\u00e7\u00e3o, permitindo que sua experi\u00eancia se aproxime a de um aplicativo nativo.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se ficar em d\u00favida sobre infraestrutura, confira como escolher o <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-escolher-o-melhor-servidor-de-aplicacao\/\" target=\"_blank\" rel=\"noreferrer noopener\">melhor servidor de aplica\u00e7\u00e3o<\/a> ou <a href=\"https:\/\/www.locaweb.com.br\/blog\/produtos\/hospedagem-de-sites\/como-descobrir-a-hospedagem-de-um-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">descobrir a hospedagem de um site<\/a> existente. Vamos come\u00e7ar!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 um PWA e como ele funciona<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um <strong>PWA (Progressive Web App)<\/strong> \u00e9 um site (ou aplica\u00e7\u00e3o web) que incorpora caracter\u00edsticas de aplicativos tradicionais, como a possibilidade de instala\u00e7\u00e3o na tela inicial do dispositivo, execu\u00e7\u00e3o offline e notifica\u00e7\u00f5es push. Isso \u00e9 poss\u00edvel gra\u00e7as \u00e0s tecnologias do navegador, em especial os Service Workers, que intermediam as requisi\u00e7\u00f5es da rede e podem armazenar arquivos no cache local.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na ess\u00eancia, um PWA roda no <em>browser<\/em>, mas se comporta como um app. A pessoa usu\u00e1ria pode \u201cinstal\u00e1-lo\u201d clicando em \u201cAdicionar \u00e0 tela inicial\u201d (em navegadores compat\u00edveis), e a aplica\u00e7\u00e3o passa a ter <strong>\u00edcone pr\u00f3prio<\/strong>, carregamento otimizado e experi\u00eancia full screen. Al\u00e9m disso, PWAs t\u00eam suporte a recursos como <em>push notifications<\/em> e acesso offline \u2014 mesmo que a rede esteja lenta ou indispon\u00edvel, quem usa ainda pode navegar em partes do aplicativo previamente armazenadas no cache.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O termo \u201cprogressivo\u201d reflete a ideia de que essas funcionalidades evoluem de forma gradual conforme o navegador permite: se estiver em um dispositivo moderno, com todas as APIs presentes, a experi\u00eancia ser\u00e1 praticamente de um app nativo. Em dispositivos ou navegadores mais antigos, o site ainda funciona, por\u00e9m, sem algumas das funcionalidades avan\u00e7adas, garantindo <strong>graceful degradation<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Leia mais:&nbsp;<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/como-criar-um-aplicativo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como criar um aplicativo do zero: passo a passo<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/desenvolvimento-hibrido\/\" target=\"_blank\" rel=\"noreferrer noopener\">Desenvolvimento h\u00edbrido de aplicativos: frameworks e bibliotecas<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/linguagens-de-programacao-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Linguagens de programa\u00e7\u00e3o web que voc\u00ea deve ficar de olho<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Benef\u00edcios dos PWAs para empresas<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A ado\u00e7\u00e3o de PWAs n\u00e3o se restringe a modismos: h\u00e1 ganhos reais para o neg\u00f3cio e para a experi\u00eancia de clientes. Listamos, a seguir, alguns dos benef\u00edcios mais marcantes, que justificam o investimento e a ado\u00e7\u00e3o em seus projetos de desenvolvimento.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Melhor desempenho<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PWAs aproveitam o <strong>cache local<\/strong> para armazenar partes relevantes do aplicativo, como scripts, folhas de estilo e dados est\u00e1ticos. Assim, o carregamento subsequente das p\u00e1ginas tende a ser muito mais r\u00e1pido do que em sites convencionais. Como resultado, <strong>o tempo de resposta diminui e o usu\u00e1rio fica menos propenso a abandonar a navega\u00e7\u00e3o<\/strong>.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A agilidade afeta diretamente o SEO e a satisfa\u00e7\u00e3o do consumidor<\/strong>, j\u00e1 que a velocidade \u00e9 fator determinante para o engajamento.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Acesso offline<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para muitas aplica\u00e7\u00f5es, n\u00e3o \u00e9 mais aceit\u00e1vel ficar ref\u00e9m da conex\u00e3o. Com <strong>PWAs<\/strong>, algumas rotas ou conte\u00fados podem ser disponibilizados mesmo quando o usu\u00e1rio est\u00e1 sem rede, gra\u00e7as ao cache administrado pelos Service Workers.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A medida significa, na pr\u00e1tica, que funcionalidades importantes, como visualiza\u00e7\u00e3o de cat\u00e1logo ou consultas pr\u00e9-carregadas, continuam operando. <strong>Quando a rede retorna, as atualiza\u00e7\u00f5es s\u00e3o sincronizadas de forma transparente<\/strong>. Esse recurso \u00e9 especialmente valioso para quem est\u00e1 em regi\u00f5es com instabilidade de internet.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Notifica\u00e7\u00f5es push<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Outra vantagem de um PWA \u00e9 o suporte a <strong>notifica\u00e7\u00f5es push<\/strong>, permitindo que a empresa se comunique diretamente com clientes, enviando avisos de promo\u00e7\u00f5es, lembretes ou atualiza\u00e7\u00f5es relevantes, mesmo que o navegador n\u00e3o esteja aberto no momento.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tal abordagem \u00e9 semelhante ao que se consegue em aplicativos nativos, mas sem exigir que a pessoa usu\u00e1ria baixe algo a mais da loja de apps. A reten\u00e7\u00e3o e o engajamento aumentam, j\u00e1 que a marca pode reengajar o p\u00fablico em momentos estrat\u00e9gicos.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tecnologias necess\u00e1rias para criar um PWA<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para desenvolver um <strong>Aplicativo Web Progressivo<\/strong>, \u00e9 fundamental conhecer e dominar tr\u00eas elementos principais: Service Workers, Manifest JSON e HTTPS. Cada um deles cumpre um papel distinto, mas fundamental para a arquitetura de um PWA. Confira, na sequ\u00eancia.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Service Workers<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Service Worker<\/strong> \u00e9 um script que roda em segundo plano, interceptando e gerenciando requisi\u00e7\u00f5es de rede, bem como manipulando o cache localmente. Ele \u00e9 quem possibilita as <strong>funcionalidades offline<\/strong> e as notifica\u00e7\u00f5es push, al\u00e9m de otimizar a performance ao servir recursos diretamente do cache quando oportuno. Vale notar que, por seguran\u00e7a, o Service Worker s\u00f3 funciona via HTTPS ou em <em>localhost<\/em>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse script atua como um \u201cproxy\u201d entre o <em>browser<\/em> e o servidor, podendo armazenar no cache desde <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/html-guia-completo-sobre-a-principal-linguagem-da-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> e <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/css\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> at\u00e9 imagens e JSON de dados, conforme estrat\u00e9gias definidas pela pessoa desenvolvedora. Isso significa que voc\u00ea tem controle fino sobre quando buscar recursos da rede ou servir do cache.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Manifest JSON<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>Web App Manifest<\/strong> \u00e9 um arquivo JSON que descreve informa\u00e7\u00f5es sobre a aplica\u00e7\u00e3o, como nome, \u00edcone, cor de fundo e URL inicial. Ele \u00e9 o respons\u00e1vel por permitir a \u201cinstala\u00e7\u00e3o\u201d do PWA no dispositivo, mostrando o \u00edcone na tela inicial do smartphone ou no launcher. Assim, o site se \u201cdisfar\u00e7a\u201d de app nativo, oferecendo uma experi\u00eancia quase id\u00eantica para quem o utilizar.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 nesse arquivo que voc\u00ea define <strong>short_name<\/strong>, <strong>start_url<\/strong>, <strong>background_color<\/strong> e outras propriedades de branding. Em conjunto com o Service Worker, o Manifest JSON ajuda a <strong>melhorar a imers\u00e3o<\/strong> de quem usa o app, removendo a barra de endere\u00e7os do navegador e exibindo a aplica\u00e7\u00e3o em tela cheia.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTTPS e seguran\u00e7a<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Por fim, todo PWA deve estar <strong>hospedado em HTTPS<\/strong>. Isso \u00e9 um requisito de seguran\u00e7a para habilitar Service Workers e push notifications. A raz\u00e3o \u00e9 simples: esses recursos lidam com o cache e a intercepta\u00e7\u00e3o de requisi\u00e7\u00f5es, o que poderia ser explorado por agentes maliciosos se a conex\u00e3o n\u00e3o fosse criptografada.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para entender como esse protocolo refor\u00e7a a prote\u00e7\u00e3o dos dados, confira mais informa\u00e7\u00f5es sobre <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/https\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTTPS e seguran\u00e7a<\/a>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"812\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/05\/pwa-1.jpg\" alt=\"Uma mulher jovem est\u00e1 na rua usando seu smartphone enquanto veste camisa jeans, blusa marrom e fones de ouvido. \" class=\"wp-image-53166\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/05\/pwa-1.jpg 812w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/05\/pwa-1-500x308.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/05\/pwa-1-768x473.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/05\/pwa-1-150x92.jpg 150w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><figcaption class=\"wp-element-caption\">Atualmente, qualquer pessoa utiliza uma s\u00e9rie de aplica\u00e7\u00f5es na palma da m\u00e3o. Por esse motivo, as empresas podem encontrar no PWA uma forma de facilitar a intera\u00e7\u00e3o entre marca e clientes.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Passo a passo para desenvolver um PWA com hospedagem<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que j\u00e1 entendemos os pilares de um <strong>PWA<\/strong>, vamos ao guia pr\u00e1tico para voc\u00ea dar vida ao seu aplicativo web progressivo. De modo geral, o fluxo envolve configurar o ambiente, criar o manifest, implementar caching e notifica\u00e7\u00f5es e, finalmente, hospedar a aplica\u00e7\u00e3o em um servidor confi\u00e1vel para garantir desempenho e estabilidade.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Configurando o ambiente<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O primeiro passo \u00e9 <strong>preparar o ambiente de desenvolvimento<\/strong>. As boas pr\u00e1ticas incluem ter um servidor local rodando via HTTPS, ainda que seja um certificado autoassinado, para testar o Service Worker corretamente. Ferramentas como o <em>lite-server<\/em> (JavaScript) ou cont\u00eaineres Docker podem ajudar nessa tarefa.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea planeja subir o PWA para um servidor remoto, verifique se a hospedagem oferece um processo simples de instala\u00e7\u00e3o de SSL. \u00c9 vital para que o <strong>Service Worker<\/strong> seja aceito pelo navegador. Avalie, por exemplo, se a hospedagem permite <a href=\"https:\/\/letsencrypt.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Let\u2019s Encrypt<\/a> ou outra autoridade certificadora. Em casos de aplica\u00e7\u00f5es complexas, pode ser interessante migrar para um plano de hospedagem robusto que suporte alto volume de acessos.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Criando o manifest<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Com o ambiente pronto, o pr\u00f3ximo passo \u00e9 elaborar o <strong>Web App Manifest<\/strong>, tipicamente um arquivo chamado <em>manifest.json<\/em>. Eis um exemplo m\u00ednimo:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{&nbsp;<br>&nbsp; &#8220;short_name&#8221;: &#8220;MeuPWA&#8221;,&nbsp;<br>&nbsp; &#8220;name&#8221;: &#8220;Meu PWA Exemplo&#8221;,&nbsp;<br>&nbsp; &#8220;start_url&#8221;: &#8220;\/index.html&#8221;,&nbsp;<br>&nbsp; &#8220;display&#8221;: &#8220;standalone&#8221;,&nbsp;<br>&nbsp; &#8220;background_color&#8221;: &#8220;#ffffff&#8221;,&nbsp;<br>&nbsp; &#8220;theme_color&#8221;: &#8220;#ffffff&#8221;,&nbsp;<br>&nbsp; &#8220;icons&#8221;: [&nbsp;<br>&nbsp;&nbsp;&nbsp; {&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;src&#8221;: &#8220;\/icons\/icon-192.png&#8221;,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;sizes&#8221;: &#8220;192&#215;192&#8221;,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;type&#8221;: &#8220;image\/png&#8221;&nbsp;<br>&nbsp;&nbsp;&nbsp; },&nbsp;<br>&nbsp;&nbsp;&nbsp; {&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;src&#8221;: &#8220;\/icons\/icon-512.png&#8221;,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;sizes&#8221;: &#8220;512&#215;512&#8221;,&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8220;type&#8221;: &#8220;image\/png&#8221;&nbsp;<br>&nbsp;&nbsp;&nbsp; }&nbsp;<br>&nbsp; ]&nbsp;<br>}&nbsp;<br>Depois, inclua no <strong>&lt;head&gt;<\/strong> do HTML algo como:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;link rel=&#8221;manifest&#8221; href=&#8221;\/manifest.json&#8221;&gt;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso garante que o navegador reconhe\u00e7a o manifesto e, em navegadores compat\u00edveis, ofere\u00e7a a op\u00e7\u00e3o de adicionar o app \u00e0 tela inicial do usu\u00e1rio. Em seguida, ajuste as cores, nomes e \u00edcones conforme a <strong>identidade visual<\/strong> do seu projeto.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Implementando cache e notifica\u00e7\u00f5es<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Chegou a hora de criar o <strong>Service Worker<\/strong> para gerenciar o cache. Normalmente, voc\u00ea gera um arquivo <em>service-worker.js<\/em> e registra-o em seu c\u00f3digo principal, por exemplo:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">if (&#8216;serviceWorker&#8217; in navigator) {&nbsp;<br>&nbsp; navigator.serviceWorker.register(&#8216;\/service-worker.js&#8217;)&nbsp;<br>&nbsp;&nbsp;&nbsp; .then(() =&gt; console.log(&#8216;SW registrado!&#8217;))&nbsp;<br>&nbsp;&nbsp;&nbsp; .catch(err =&gt; console.error(&#8216;Erro ao registrar SW&#8217;, err));&nbsp;<br>}&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No <em>service-worker.js<\/em>, defina eventos como <em>install<\/em> e <em>fetch<\/em> para controlar o que ser\u00e1 cacheado e como as requisi\u00e7\u00f5es ser\u00e3o servidas. Por exemplo:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">const CACHE_NAME = &#8216;versao-1&#8217;;&nbsp;<br>const urlsToCache = [&nbsp;<br>&nbsp; &#8216;\/index.html&#8217;,&nbsp;<br>&nbsp; &#8216;\/css\/style.css&#8217;,&nbsp;<br>&nbsp; &#8216;\/js\/app.js&#8217;&nbsp;<br>];&nbsp;<br>self.addEventListener(&#8216;install&#8217;, event =&gt; {&nbsp;<br>&nbsp; event.waitUntil(&nbsp;<br>&nbsp;&nbsp;&nbsp; caches.open(CACHE_NAME)&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .then(cache =&gt; cache.addAll(urlsToCache))&nbsp;<br>&nbsp; );&nbsp;<br>});&nbsp;<br>self.addEventListener(&#8216;fetch&#8217;, event =&gt; {&nbsp;<br>&nbsp; event.respondWith(&nbsp;<br>&nbsp;&nbsp;&nbsp; caches.match(event.request).then(response =&gt; {&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return response || fetch(event.request);&nbsp;<br>&nbsp;&nbsp;&nbsp; })&nbsp;<br>&nbsp; );&nbsp;<br>});&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso configura um caching b\u00e1sico para <strong>\/index.html<\/strong>, <strong>\/css\/style.css<\/strong> e <strong>\/js\/app.js<\/strong>. Assim, se a pessoa usu\u00e1ria ficar offline ou se o servidor demorar a responder, o PWA usa o que est\u00e1 no cache. Para <strong>notifica\u00e7\u00f5es push<\/strong>, ser\u00e1 preciso integrar APIs de push e gerenciar permiss\u00f5es. O fluxo envolve um <em>push subscription<\/em>, em que o server envia mensagens que o Service Worker exibe, mesmo quando a aba n\u00e3o est\u00e1 ativa.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Como funcionam os PWAs? | Locaweb\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/OS6Po_mK2Q8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclus\u00e3o<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Desenvolver <strong>Aplicativos Web Progressivos<\/strong> (PWAs) \u00e9 uma forma de evoluir a experi\u00eancia da pessoa usu\u00e1ria para um patamar pr\u00f3ximo ao de aplicativos nativos, sem a complexidade de distribuir builds em lojas como a Play Store ou a App Store.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As vantagens v\u00e3o desde melhor desempenho, acesso offline e notifica\u00e7\u00f5es push at\u00e9 a facilidade de instala\u00e7\u00e3o sem fric\u00e7\u00f5es. Com a ado\u00e7\u00e3o de <strong>Service Workers<\/strong>, <strong>Manifest JSON<\/strong> e <strong>HTTPS<\/strong>, \u00e9 poss\u00edvel construir aplica\u00e7\u00f5es web altamente responsivas e capazes de rodar mesmo em condi\u00e7\u00f5es de rede adversas.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na hora de disponibilizar o seu PWA ao p\u00fablico, a escolha de <strong>hospedagem ou servidor<\/strong> tamb\u00e9m faz diferen\u00e7a, pois a performance do <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/full-stack-front-end-e-back-end-quais-sao-as-diferencas\/\" target=\"_blank\" rel=\"noreferrer noopener\">back-end<\/a> influencia a velocidade com que o front-end carrega e sincroniza dados. Para garantir um ambiente adequado, verifique como se faz para descobrir a hospedagem de um site ou avalie planos de hospedagem que suportem SSL e ofere\u00e7am rotinas de backup e seguran\u00e7a.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A popularidade dos <strong>PWAs<\/strong> cresce justamente porque aliam o melhor dos dois mundos: a ubiquidade dos sites e a experi\u00eancia envolvente dos apps. Com o tempo, mais browsers e dispositivos devem ampliar o suporte a essas features, tornando ainda mais interessante investir em solu\u00e7\u00f5es progressivas.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se ainda n\u00e3o come\u00e7ou, vale a pena dar o primeiro passo seguindo o passo a passo descrito aqui: configurar Service Workers, criar o manifest e trabalhar o cache de modo inteligente. E se busca aprofundar o entendimento, h\u00e1 refer\u00eancias, como o&nbsp; <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>developer.mozilla.org<\/em><\/a>, que re\u00fanem boas pr\u00e1ticas e exemplos de PWAs no mundo real.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em resumo: se voc\u00ea deseja melhorar a experi\u00eancia do usu\u00e1rio e continuar competitivo no desenvolvimento web, <strong>PWAs<\/strong> s\u00e3o um caminho s\u00f3lido. Seu neg\u00f3cio pode se beneficiar de mais engajamento, menos abandono e a possibilidade de operar at\u00e9 mesmo offline. Integre esses conceitos ao seu fluxo de trabalho, experimente as abordagens de caching e push notifications e ofere\u00e7a ao seu p\u00fablico uma aplica\u00e7\u00e3o web que se destaque frente aos concorrentes.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por fim, \u00e9 fundamental escolher uma Hospedagem de Sites que suporte certificados SSL para tornar o PWA ainda mais seguro. Se ainda n\u00e3o tiver um plano, pode avaliar as op\u00e7\u00f5es da Locaweb. <a href=\"https:\/\/www.locaweb.com.br\/hospedagem-de-sites-com-dominio-gratis\/?utm_source=blog+post&amp;utm_medium=own&amp;utm_campaign=blog-post-pwa-hospedagem-de-sites&amp;utm_id=blog+post\" target=\"_blank\" rel=\"noreferrer noopener\">Saiba mais no site<\/a>!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a desenvolver PWAs e melhore a experi\u00eancia das pessoas usu\u00e1rias com apps r\u00e1pidos, offline e responsivos. O conceito de Aplicativos Web Progressivos (PWA) vem ganhando cada vez mais destaque no mundo do desenvolvimento web. PWAs combinam recursos avan\u00e7ados dos navegadores modernos com a praticidade das p\u00e1ginas tradicionais, criando uma experi\u00eancia de uso muito semelhante [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":53165,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-53164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/53164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=53164"}],"version-history":[{"count":4,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/53164\/revisions"}],"predecessor-version":[{"id":53172,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/53164\/revisions\/53172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/53165"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=53164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=53164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=53164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}