{"id":6487,"date":"2022-09-26T10:00:00","date_gmt":"2022-09-26T13:00:00","guid":{"rendered":"https:\/\/uds.com.br\/blog\/?p=6487"},"modified":"2024-04-30T10:21:47","modified_gmt":"2024-04-30T13:21:47","slug":"pwa-tudo-o-que-voce-precisa-saber","status":"publish","type":"post","link":"https:\/\/uds.com.br\/blog\/pwa-tudo-o-que-voce-precisa-saber\/","title":{"rendered":"PWA: tudo o que voc\u00ea precisa saber"},"content":{"rendered":"\n<p>Os Progressive Web Apps (PWAs) est\u00e3o cada vez mais populares \u00e0 medida que as empresas e desenvolvedores buscam aumentar o alcance de seus aplicativos e melhorar a experi\u00eancia do usu\u00e1rio de forma consistente. Neste artigo<strong> <mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">\u201cPWA: tudo o que voc\u00ea precisa saber\u201d<\/mark><\/strong>, voc\u00ea vai entender o que s\u00e3o, como funcionam, quais os seus pr\u00f3s e contras e muito mais.<\/p>\n\n\n\n<ul><li>O tempo m\u00e9dio de carregamento para PWAs \u00e9 de 2,75 segundos,<strong> <mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">8x mais r\u00e1pido<\/mark><\/strong> do que um site mobile.<\/li><li>A taxa m\u00e9dia de rejei\u00e7\u00e3o de um PWA \u00e9 de 42,86%, menor do que a de um site para dispositivos m\u00f3veis.<\/li><li>Marcas que usam PWAs admitem que suas visualiza\u00e7\u00f5es de p\u00e1gina foram impulsionadas em quase<strong> <\/strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\"><strong>+134%<\/strong>.<\/mark><\/li><li>Para algumas marcas, o engajamento geral aumentou em <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">400%<\/mark><\/strong>.<\/li><li>Um site custa, em m\u00e9dia, entre R$ 16.000 e R$ 60.000, enquanto um aplicativo nativo custa entre R$ 25.000 e R$ 500.000. <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">Um PWA custa entre R$ 30.000 e R$ 100.000<\/mark><\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que s\u00e3o Progressive Web Apps &#8211; PWAs?<\/strong><\/h2>\n\n\n\n<p>Essencialmente, s\u00e3o como um site: basta acessar sua URL para come\u00e7ar a utiliz\u00e1-lo.&nbsp;<\/p>\n\n\n\n<p>Mas por tr\u00e1s desta simples apar\u00eancia existem diversas tecnologias, o que torna o PWA uma abordagem, mais do que um tipo diferente de aplica\u00e7\u00e3o. Ou seja, para ser um PWA, h\u00e1 alguns princ\u00edpios que a aplica\u00e7\u00e3o da Web deve seguir.<\/p>\n\n\n\n<p>Pense no PWA como um bombom Ferrero Rocher: a avel\u00e3 \u00e9 o conte\u00fado que voc\u00ea deseja usar; o chocolate ao redor do n\u00facleo \u00e9 o aspecto visual do site e, finalmente, a camada externa de wafer e chocolate \u00e9 o JavaScript. A camada externa pode variar em termos de superf\u00edcie ou at\u00e9 mesmo de cor, dependendo da forma como o navegador a utiliza.<\/p>\n\n\n\n<p>Assim, os PWAs s\u00e3o <a href=\"https:\/\/uds.com.br\/blog\/desenvolvimento-de-aplicacoes-web\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>aplicativos da Web<\/strong><\/a> desenvolvidos usando v\u00e1rias tecnologias espec\u00edficas para permitir que eles aproveitem os recursos de aplicativos nativos e com as facilidades de um site.<\/p>\n\n\n\n<p>Isso quer dizer que, com um PWA, \u00e9 poss\u00edvel interagir com um aplicativo da Web como se fosse um aplicativo nativo atrav\u00e9s de uma interface com a cara de um site.&nbsp;<\/p>\n\n\n\n<p>Isto \u00e9, s\u00e3o mobile web pages criadas para se comportarem e transmitirem a mesma sensa\u00e7\u00e3o que aplicativos nativos. A pr\u00f3pria Google descreve os PWAs como \u201cconfi\u00e1veis, r\u00e1pidos e atraentes experi\u00eancias para usu\u00e1rios mobile com o mesmo alcance da Web\u201d.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium\"><img decoding=\"async\" width=\"419\" height=\"280\" src=\"\/\/i1.wp.com\/uds.com.br\/blog\/wp-content\/uploads\/2022\/09\/PWA-tudo-o-que-voce-precisa-saber-fig1-419x280.jpg\" alt=\"\" class=\"wp-image-6493\" srcset=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/09\/PWA-tudo-o-que-voce-precisa-saber-fig1-419x280.jpg 419w, https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/09\/PWA-tudo-o-que-voce-precisa-saber-fig1.jpg 740w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><br><em>Tinder em PWA: O tempo de download diminuiu de 11,91 para 4,69 segundos e \u00e9 90% menor que o aplicativo Android nativo. Fonte: BSScommerce<\/em><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA tudo o que voc\u00ea precisa saber sobre APIs<\/h3>\n\n\n\n<p>A base do PWA depende muito de APIs atualizadas para oferecer instalabilidade, recursos e confiabilidade. Sua constru\u00e7\u00e3o envolve tecnologias da Web, incluindo HTML, CSS, JavaScript e WebAssembly.<\/p>\n\n\n\n<p>Mas com uma \u00fanica base de c\u00f3digo ele pode chegar a qualquer lugar, qualquer pessoa e em qualquer dispositivo, trazendo ao usu\u00e1rio uma experi\u00eancia fluida \u2013 ou, como definiu Alex Ruxwell, o especialista que batizou o termo: \u201cPWAs s\u00e3o apenas sites que tomaram as vitaminas certas\u201d.<\/p>\n\n\n\n<p>Al\u00e9m disso, o seu desenvolvimento \u00e9 simples e f\u00e1cil: como o PWA \u00e9 constru\u00eddo usando JavaScript, n\u00e3o h\u00e1 necessidade de alterar a estrutura ou trazer novas tecnologias.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\" style=\"font-size:14px;font-style:normal;font-weight:300\"><blockquote><p>PWAs s\u00e3o aplica\u00e7\u00f5es web que foram projetadas para serem capazes, confi\u00e1veis e instal\u00e1veis. Esses tr\u00eas pilares as transformam em uma experi\u00eancia que parece uma aplica\u00e7\u00e3o nativa.<\/p><cite>Mozilla.org<\/cite><\/blockquote><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PWA: tudo o que voc\u00ea precisa saber &#8211; como funcionam?<\/strong><\/h2>\n\n\n\n<p>PWA: tudo o que voc\u00ea precisa saber \u00e9 que, todo o cr\u00e9dito por essa experi\u00eancia perfeita deve ser dado ao Service Worker (uma API que armazena em cache ativos e arquivos importantes para oferecer suporte a experi\u00eancias offline), que \u00e9 a espinha dorsal de cada PWA.&nbsp;<\/p>\n\n\n\n<p>Ou seja, a partir do armazenamento em cache, o Service Worker faz a atualiza\u00e7\u00e3o de conte\u00fado em segundo plano, al\u00e9m de suportar notifica\u00e7\u00f5es push e permitir o funcionamento offline desde a primeira visita, mesmo em redes inst\u00e1veis. Tudo isso faz com que o carregamento seja r\u00e1pido, independentemente da velocidade da rede.<\/p>\n\n\n\n<p>Somado a isso, as Accelerated Mobile Pages (AMP) trabalham junto com o Service Worker, fornecendo componentes da Web <a href=\"https:\/\/uds.com.br\/blog\/compliance-pci-dss-desenvolvimento-seguro-software\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>confi\u00e1veis<\/strong><\/a> e r\u00e1pidos para o primeiro carregamento. Al\u00e9m da velocidade, esses componentes consomem menos dados.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Depois que a p\u00e1gina \u00e9 carregada, as configura\u00e7\u00f5es do site, o Service Worker e os ativos armazenados em cache de forma inteligente mant\u00eam o PWA atualizado, liberando os usu\u00e1rios das atualiza\u00e7\u00f5es frequentes exigidas pelos aplicativos nativos.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" width=\"602\" height=\"309\" src=\"https:\/\/lh6.googleusercontent.com\/MYFerEQZWzy1Y_mS4Z9eSjYBsuZ7Z5k3RH_f-H9dgbw2SKdsCD34o-Dm8DlBRwCuHs3NPNLVWZvhT2HWhHjZ9WPeFDL0NwAPomGkoAKGHGtr6QmM7Mkc6ISmJnjgUfVqzeYBfNidONhpwur2FbxjAWfO0Su4ihbOe9b-oz1a65XWKaB0fiCrbkZ1\"><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PWA: tudo o que voc\u00ea precisa saber &#8211; principais caracter\u00edsticas<\/strong><\/h2>\n\n\n\n<p>PWA: tudo o que voc\u00ea precisa saber \u00e9 que algumas das principais caracter\u00edsticas s\u00e3o a excelente performance e a capacidade de funcionamento offline. Eles tamb\u00e9m podem ser salvos na tela inicial do dispositivo e acessados com apenas um toque no \u00edcone, tal como se faz com um aplicativo nativo.<\/p>\n\n\n\n<p>Os seguintes recursos dos PWAs tamb\u00e9m merecem destaque:<\/p>\n\n\n\n<p><strong>Progressividade:<\/strong> \u00c9 uma ferramenta poderosa que funciona bem independentemente da escolha do navegador. Ele se \u201caprimora\u201d ap\u00f3s cada vez que \u00e9 utilizado pelo usu\u00e1rio.<\/p>\n\n\n\n<p><strong>Responsividade:<\/strong> Atende \u00e0 necessidade de qualquer gadget\/hardware, desktop, notebook, smartphone ou tablet.<\/p>\n\n\n\n<p><strong>Conectividade independente:<\/strong> como vimos, o PWA \u00e9 projetado de tal forma que possa operar offline ou em redes de baixa velocidade. Portanto, n\u00e3o depende da natureza ou velocidade da conectividade do usu\u00e1rio \u00e0 Internet, armazenando dados em cache para fins de conte\u00fado visual.<\/p>\n\n\n\n<p><strong>Seguran\u00e7a:<\/strong> Todo PWA fornece um servidor seguro, o sinal verde que os usu\u00e1rios podem ver na parte superior do navegador na forma de um cadeado verde, ou seja, o PWA deve operar via HTTPS.<\/p>\n\n\n\n<p><strong>Atualizado:<\/strong> Devido \u00e0 capacidade de armazenamento em cache, os PWAs s\u00e3o sempre atualizados em tempo h\u00e1bil.<\/p>\n\n\n\n<p><strong>Engaj\u00e1vel:<\/strong> Com op\u00e7\u00f5es para habilitar notifica\u00e7\u00f5es de push, os PWAs podem ajudar os usu\u00e1rios a se envolverem e serem notificados de forma personalizada.<\/p>\n\n\n\n<p><strong>Conveniente: <\/strong>Os usu\u00e1rios podem manter seu PWA preferido na tela inicial sem acessar nenhum tipo de loja de aplicativos.<\/p>\n\n\n\n<p><strong>Compartilh\u00e1vel:<\/strong> Basta enviar um link para compartilhar as caracter\u00edsticas gerais; tamb\u00e9m h\u00e1 a possibilidade de linkar uma se\u00e7\u00e3o espec\u00edfica do PWA.<\/p>\n\n\n\t\t<div data-elementor-type=\"page\" data-elementor-id=\"6483\" class=\"elementor elementor-6483\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b7ebe1d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b7ebe1d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-85a94e9\" data-id=\"85a94e9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a164bb2 elementor-widget elementor-widget-heading\" data-id=\"a164bb2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Principais diferen\u00e7as entre apps nativos e PWAs<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-2ee27c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2ee27c1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ff70a55\" data-id=\"ff70a55\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b1875a6 elementor-widget elementor-widget-heading\" data-id=\"b1875a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Aplicativos nativos<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-107bfcb\" data-id=\"107bfcb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6413f18 elementor-widget elementor-widget-heading\" data-id=\"6413f18\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">PWAs<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-20e82ca elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"20e82ca\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fe8caa7\" data-id=\"fe8caa7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a34168a elementor-widget elementor-widget-text-editor\" data-id=\"a34168a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>O aplicativo nativo \u00e9 desenvolvido especialmente para uma plataforma.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ab2c07e\" data-id=\"ab2c07e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-520caab elementor-widget elementor-widget-text-editor\" data-id=\"520caab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Roda em um navegador e se comporta praticamente como um aplicativo nativo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-0ced59e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0ced59e\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-61b6147\" data-id=\"61b6147\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a77e206 elementor-widget elementor-widget-text-editor\" data-id=\"a77e206\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>A base de c\u00f3digo \u00e9 separada (Android\/iOS).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b158f6e\" data-id=\"b158f6e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f0a431c elementor-widget elementor-widget-text-editor\" data-id=\"f0a431c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>N\u00e3o precisa de base de c\u00f3digo separada, n\u00e3o precisa instalar do Google Play ou App Store.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-416fd40 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"416fd40\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-c78d799\" data-id=\"c78d799\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8d3b47a elementor-widget elementor-widget-text-editor\" data-id=\"8d3b47a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Experi\u00eancia de usu\u00e1rio imbat\u00edvel devido ao acesso ao hardware nativo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a21a717\" data-id=\"a21a717\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-238e90f elementor-widget elementor-widget-text-editor\" data-id=\"238e90f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Experi\u00eancia de usu\u00e1rio excelente.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-8b75e41 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b75e41\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-a8095ce\" data-id=\"a8095ce\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d08b693 elementor-widget elementor-widget-text-editor\" data-id=\"d08b693\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Requer um or\u00e7amento maior para escrever o c\u00f3digo espec\u00edfico para cada plataforma.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b913d78\" data-id=\"b913d78\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-852773d elementor-widget elementor-widget-text-editor\" data-id=\"852773d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Relativamente mais barato que os aplicativos nativos, pois \u00e9 executado em v\u00e1rias plataformas com um \u00fanico c\u00f3digo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-cde52be elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cde52be\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e824e25\" data-id=\"e824e25\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fe30200 elementor-widget elementor-widget-text-editor\" data-id=\"fe30200\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Precisa ser baixado na loja de aplicativos.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1eba401\" data-id=\"1eba401\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be048eb elementor-widget elementor-widget-text-editor\" data-id=\"be048eb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>O comando \u201cAdicionar \u00e0 tela inicial\u201d \u00e9 executado diretamente no navegador.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7d006fb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d006fb\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ce133d8\" data-id=\"ce133d8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc5c814 elementor-widget elementor-widget-text-editor\" data-id=\"bc5c814\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Requer mais espa\u00e7o nos dispositivos.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b6166b8\" data-id=\"b6166b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-659a76d elementor-widget elementor-widget-text-editor\" data-id=\"659a76d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Utiliza pouqu\u00edssimo espa\u00e7o nos dispositivos.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-5f6e2f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5f6e2f1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e27cb07\" data-id=\"e27cb07\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e539d0e elementor-widget elementor-widget-text-editor\" data-id=\"e539d0e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Consome mais dados e rede.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d6e9c5a\" data-id=\"d6e9c5a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37d5ec0 elementor-widget elementor-widget-text-editor\" data-id=\"37d5ec0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Funciona bem em redes mais lentas e tamb\u00e9m offline.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Principais benef\u00edcios dos PWAs<\/strong><\/h3>\n\n\n\n<ul><li>O principal benef\u00edcio do PWA \u00e9 que ele \u00e9 independente de plataforma. Isso significa que um aplicativo pode ser desenvolvido usando uma \u00fanica base de c\u00f3digo e implantado em diversas plataformas.<\/li><li>Por conta da simplicidade do seu desenvolvimento, os PWAs economizam tempo e recursos para colocar um aplicativo no mercado.<\/li><li>As bases de c\u00f3digo desses aplicativos s\u00e3o menores e sua capacidade de execu\u00e7\u00e3o em um navegador (em vez de um aplicativo nativo) os torna leves.&nbsp;<\/li><li>Outro benef\u00edcio adicional dos PWAs \u00e9 ser \u201cSEO Friendly\u201d: eles podem ser descobertos pela indexa\u00e7\u00e3o dos mecanismos de pesquisa, sobretudo o Google.<\/li><li>O usu\u00e1rio n\u00e3o precisa passar pela dor de instalar o PWA. Ao rolar pelo navegador da web, basta permitir a op\u00e7\u00e3o de \u201cAdicionar \u00e0 tela inicial\u201d e o aplicativo ser\u00e1 fixado na \u00e1rea principal do dispositivo.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Por exemplo, para baixar um app, primeiro voc\u00ea precisa abrir uma loja de aplicativos, encontr\u00e1-lo, instal\u00e1-lo, aceitar as permiss\u00f5es em seu dispositivo m\u00f3vel e aguardar o download antes de poder us\u00e1-lo. \u00c9 um processo demorado e, por isso, 20% dos usu\u00e1rios se perdem a cada etapa. Com os PWAs, os usu\u00e1rios t\u00eam os mesmos recursos de um app, mas todas as etapas que acompanham o download de aplicativos s\u00e3o removidas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Principais desvantagens dos PWAs<\/strong><\/h3>\n\n\n\n<ul><li>Suporte limitado no iOS, que obviamente compreende uma parcela significativa da participa\u00e7\u00e3o no mercado de aplicativos m\u00f3veis. J\u00e1 h\u00e1 algum suporte, e a mudan\u00e7a de postura da Apple sobre isso mostra que h\u00e1 disposi\u00e7\u00e3o em evoluir com esse tipo de solu\u00e7\u00e3o.<\/li><li>Seu aplicativo n\u00e3o pode ser publicado na AppStore, por\u00e9m \u00e9 f\u00e1cil list\u00e1-lo no Google Play e j\u00e1 \u00e9 poss\u00edvel disponibiliz\u00e1-lo na Microsoft Store.<\/li><li>PWAs s\u00e3o conhecidos por consumir mais bateria do que os aplicativos nativos.<\/li><li>Recursos limitados de acesso nos dispositivos m\u00f3veis, como NFC, Bluetooth e controles avan\u00e7ados de c\u00e2mera.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como saber se voc\u00ea deve optar pelo PWA?<\/strong><\/h2>\n\n\n\n<p>O PWA \u00e9 ideal para quem deseja lan\u00e7ar rapidamente um aplicativo no mercado, mas tem recursos financeiros limitados. \u00c9 tamb\u00e9m uma excelente op\u00e7\u00e3o para o desenvolvimento de software corporativo vinculado a v\u00e1rias plataformas com uma \u00fanica base de c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Existem pelo menos 3 raz\u00f5es pelas quais voc\u00ea absolutamente precisa de PWAs:<\/strong><\/h3>\n\n\n\n<p><strong>Alcance de audi\u00eancia:<\/strong> O PWA permite que os sites tenham mais audi\u00eancia na Web mobile, pois combina os melhores recursos da Web e dos aplicativos.<\/p>\n\n\n\n<p><strong>Aquisi\u00e7\u00e3o de usu\u00e1rios:<\/strong> Ao optar por desenvolver um PWA para sua empresa, o custo de aquisi\u00e7\u00e3o de usu\u00e1rio se torna v\u00e1rias vezes mais barato em compara\u00e7\u00e3o com os aplicativos nativos. Isso significa simplesmente mais usu\u00e1rios por menos custos.<\/p>\n\n\n\n<p><strong>Convers\u00e3o<\/strong>: O PWA \u00e9 poderoso quando se trata de aumentar a taxa de convers\u00e3o por dispositivos m\u00f3veis.<\/p>\n\n\n\n<p>Al\u00e9m disso, o PWA \u00e9 uma \u00f3tima op\u00e7\u00e3o para empresas que ainda n\u00e3o t\u00eam total certeza sobre se devem investir dinheiro em aplicativos nativos ou para aquelas que querem incrementar a experi\u00eancia mobile de seus clientes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quem usa os Progressive Web Apps?<\/strong><\/h2>\n\n\n\n<p>A lista de marcas que entraram no barco dos Progressive Web Apps inclui nomes de proje\u00e7\u00e3o internacional:<\/p>\n\n\n\n<ul><li><strong>Twitter: <\/strong>O PWA Twitter tem mais de 1 milh\u00e3o de visitas di\u00e1rias.<\/li><li><strong>Forbes:<\/strong> O recurso de m\u00eddia Forbes recebeu mais de 12% de novos leitores.<\/li><li><strong>The Washington Post:<\/strong> Em compara\u00e7\u00e3o com o site mobile, o PWA apresenta resultados 88% melhores.<\/li><li><strong>Alibaba.com<\/strong>: A maior plataforma B2B do mundo, aumentou as convers\u00f5es na web m\u00f3vel em 76% com o PWA.<\/li><li><strong>BMW<\/strong>: Superou todas as expectativas do usu\u00e1rio quando decidiu transformar o site m\u00f3vel em PWA. <\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Resultados:<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u2714<\/mark> Crescimento de 50% em usu\u00e1rios m\u00f3veis.<\/p>\n\n\n\n<p>\u2714\u2714 Aumento de quase 4x no n\u00famero de pessoas que clicam do BMW.com para o site de vendas da BMW.<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u2714 <\/mark>O tempo de carregamento foi 4x mais r\u00e1pido.<\/p>\n\n\n\n<p>\u2714\u2714 Quase 50% mais visitas no site pela otimiza\u00e7\u00e3o de mecanismos de pesquisa do que o site antigo.<\/p>\n\n\n\n<p>H\u00e1 tamb\u00e9m diversos aplicativos famosos que criaram vers\u00f5es para PWA, como por exemplo: <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">WhatsApp<\/mark><\/strong> (WhatsApp Web), <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">Pinterest, Uber<\/mark> <\/strong>(cuja vers\u00e3o PWA funciona inclusive em celulares 2G) e o <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">Tinder<\/mark><\/strong>, como j\u00e1 vimos aqui.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2022\/07\/traco-ok.png\" alt=\"O atributo alt desta imagem est\u00e1 vazio. O nome do arquivo \u00e9 traco-ok.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como PWAs podem impulsionar os seus neg\u00f3cios?<\/strong><\/h2>\n\n\n\n<p>Cada vez mais, as empresas s\u00e3o pressionadas a se adaptar ao ambiente altamente competitivo e \u00e0s expectativas crescentes de usu\u00e1rios exigentes.&nbsp;<\/p>\n\n\n\n<p>H\u00e1 empresas que gastam fortunas para melhorar a experi\u00eancia de seus consumidores e manter aplicativos em diferentes plataformas, muitas vezes enfrentando fortes <strong><a href=\"https:\/\/uds.com.br\/blog\/comprar-um-software-sob-demanda-comum-orcamento-limitado\/\" target=\"_blank\" rel=\"noreferrer noopener\">limita\u00e7\u00f5es de or\u00e7amento<\/a> <\/strong>e tempo.<\/p>\n\n\n\n<p>\u00c9 a\u00ed que entram os PWAs, uma tecnologia nova e incrivelmente promissora que surgiu para mudar a maneira como as pessoas interagem com os sites.<\/p>\n\n\n\n<p>Os PWAs combinam o melhor de um site com o melhor que os aplicativos nativos t\u00eam a oferecer, criando uma experi\u00eancia fenomenal.<\/p>\n\n\n\n<p>Para as empresas, \u00e9 a chance de conquistar os usu\u00e1rios m\u00f3veis e se diferenciar da concorr\u00eancia, ao oferecer uma jornada digital superior que se traduz em maior engajamento, satisfa\u00e7\u00e3o do cliente e taxas de convers\u00e3o.<\/p>\n\n\n\n<p>N\u00e3o \u00e9 \u00e0 toa que muitas empresas de com\u00e9rcio eletr\u00f4nico aderiram a esta tecnologia: <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">um front-end de PWA exige menos custos de produ\u00e7\u00e3o<\/mark> <\/strong>e oferece aos clientes uma experi\u00eancia responsiva, r\u00e1pida e semelhante a um aplicativo em todos os pontos de contato.<\/p>\n\n\n\n<p>Quem n\u00e3o gostaria de aumentar sua margem de lucro e melhorar a experi\u00eancia do cliente? Obtenha todas as vantagens do PWA com a <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#464646\" class=\"has-inline-color\">UDS<\/mark><\/strong>.<\/p>\n\n\n\n<p>Gostou do artigo \u201cPWA: tudo o que voc\u00ea precisa saber\u201d? Ent\u00e3o assine nossa <a rel=\"noreferrer noopener\" href=\"https:\/\/uds.com.br\/blog\/#news\" target=\"_blank\"><strong>newsletter<\/strong><\/a> e receba mais conte\u00fados de tecnologia como esse.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os Progressive Web Apps (PWAs) est\u00e3o cada vez mais populares \u00e0 medida que as empresas e desenvolvedores buscam aumentar o alcance de seus aplicativos e melhorar a experi\u00eancia do usu\u00e1rio de forma consistente. Neste artigo \u201cPWA: tudo o que voc\u00ea precisa saber\u201d, voc\u00ea vai entender o que s\u00e3o, como funcionam, quais os seus pr\u00f3s e [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":6492,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[384,864],"tags":[],"yst_prominent_words":[],"_links":{"self":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts\/6487"}],"collection":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/comments?post=6487"}],"version-history":[{"count":0,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts\/6487\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media\/6492"}],"wp:attachment":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media?parent=6487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/categories?post=6487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/tags?post=6487"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=6487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}