{"id":16623,"date":"2018-09-06T08:00:59","date_gmt":"2018-09-06T11:00:59","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=16623"},"modified":"2019-03-16T02:56:39","modified_gmt":"2019-03-16T05:56:39","slug":"progressive-web-apps-pwa","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/progressive-web-apps-pwa\/","title":{"rendered":"Progressive Web Apps (PWA)"},"content":{"rendered":"<p>Ol\u00e1, hoje vou compartilhar com voc\u00eas um pouco sobre um assunto que est\u00e1 sendo bem falado pelos \u201cfrontenders\u201d, o <strong>Progressive Web App (PWA)<\/strong>.<\/p>\n<p><strong>PWA \u00e9 um termo usado para denotar uma nova metodologia de desenvolvimento de software<\/strong>. Ao contr\u00e1rio dos tradicionais aplicativos, um <strong>Progressive Web App<\/strong> pode ser visto como uma evolu\u00e7\u00e3o h\u00edbrida entre as p\u00e1ginas da web regulares (ou sites) e um aplicativo m\u00f3vel.<\/p>\n<p>De acordo com o Google Developers,\u00a0um Progressive Web App \u00e9:<\/p>\n<ul>\n<li><strong>Progressivo\u00a0<\/strong>&#8211; Funciona para qualquer usu\u00e1rio, independentemente do navegador escolhido, pois \u00e9 criado com aprimoramento progressivo como princ\u00edpio fundamental.<\/li>\n<li><strong>Responsivo\u00a0<\/strong>&#8211; Se adequa a qualquer formato de tela: desktop, celular, tablet ou o que for inventado a seguir.<\/li>\n<li><strong>Independente de conectividade\u00a0<\/strong>&#8211; Aprimorado com service workers para trabalhar off-line ou em redes de baixa qualidade.<\/li>\n<li><strong>Semelhante a aplicativos\u00a0<\/strong>&#8211; Parece com aplicativos para os usu\u00e1rios, com intera\u00e7\u00f5es e navega\u00e7\u00e3o de estilo de aplicativos, pois \u00e9 compilado no modelo de shell de aplicativo.<\/li>\n<li><strong>Atual\u00a0<\/strong>&#8211; Sempre atualizado gra\u00e7as ao processo de atualiza\u00e7\u00e3o do service worker.<\/li>\n<li><strong>Seguro\u00a0<\/strong>&#8211; Fornecido via HTTPS para evitar invas\u00f5es e garantir que o conte\u00fado n\u00e3o seja adulterado.<\/li>\n<li><strong>Descobr\u00edvel\u00a0<\/strong>&#8211; Pode ser identificado como &#8220;aplicativo&#8221; gra\u00e7as aos manifestos W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.<\/li>\n<li><strong>Reenvolvente\u00a0<\/strong>&#8211; Facilita o re-engajamento com recursos como notifica\u00e7\u00f5es push.<\/li>\n<li><strong>Instal\u00e1vel\u00a0<\/strong>&#8211; Permite que os usu\u00e1rios &#8220;guardem&#8221; os aplicativos mais \u00fateis em suas telas iniciais sem precisar acessar uma loja de aplicativos.<\/li>\n<li><strong>Link\u00e1vel\u00a0<\/strong>&#8211; Compartilha facilmente por URL, n\u00e3o requer instala\u00e7\u00e3o complexa.<\/li>\n<\/ul>\n<h2>E qual a grande vantagem da PWA frente a um aplicativo?<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-16682\" title=\"Progressive Web Apps (PWA)\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA.png\" alt=\"Progressive Web Apps (PWA)\" width=\"620\" height=\"416\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA.png 1400w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA-600x403.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA-768x516.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA-740x497.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA-620x416.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/PWA-24x16.png 24w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<ul>\n<li>A maior \u00e9 voc\u00ea resolver o problema do seu cliente no momento que ele te encontra, ou seja, a pessoa usou o Google, chegou no seu site mobile e eu n\u00e3o tenho que convencer o cliente a baixar um app, eu j\u00e1 forne\u00e7o al\u00ed mesmo o servi\u00e7o necess\u00e1rio. Aumento da convers\u00e3o!<\/li>\n<li>Engajar o cliente em uma jornada. No primeiro acesso voc\u00ea resolve o problema dele e ponto. Os pr\u00f3ximos acessos voc\u00ea monta uma jornada: pedindo as permiss\u00f5es de funcionalidades avan\u00e7adas para o seu cliente, primeiro o push para ele receber not\u00edcias e afins, depois criar um \u00edcone na home do smartphone, etc. Neste modelo o cliente n\u00e3o precisa ter a decis\u00e3o de instalar ou remover o app. A medida que ele vai usando sua PWA ela vai se tornando cada vez mais parecida com um app.<\/li>\n<li>N\u00e3o correr o risco de ser desinstalado<\/li>\n<\/ul>\n<h2>E quais as desvantagens da PWA frente a um aplicativo?<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-16683\" title=\"Progressive Web Apps (PWA)\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA.png\" alt=\"Progressive Web Apps (PWA)\" width=\"620\" height=\"349\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA.png 1850w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-600x338.png 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-768x433.png 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-1500x845.png 1500w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-740x417.png 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-620x349.png 620w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/Progressive-Web-Apps-PWA-24x14.png 24w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<ul>\n<li>Todas as funcionalidades listadas para uma PWA ainda n\u00e3o s\u00e3o suportadas pelo Safari mobile, portanto n\u00e3o \u00e9 poss\u00edvel ter 100% das funcionalidades no iOS.\n<ul>\n<li>A funcionalidade de adicionar o \u00edcone \u00e0 Home n\u00e3o pode ser solicitada ao usu\u00e1rio de forma guiada como no Android, apenas via prompt padr\u00e3o do Safari, mas funciona<\/li>\n<li>N\u00e3o suporta abrir o App de forma 100% offline<\/li>\n<\/ul>\n<\/li>\n<li>A interface com o usu\u00e1rio n\u00e3o fica t\u00e3o fluida como um app nativo pois \u00e9 um app web. Mas isso n\u00e3o significa que n\u00e3o \u00e9 poss\u00edvel ter uma interface bonita e com efeitos, isso significa que se usarmos todos os recursos de UI existentes em um app nativo e em uma PWA, o app nativo ser\u00e1 mais fluido. \u00c9 poss\u00edvel ter uma PWA com a interface t\u00e3o fluida quanto a grande maioria dos apps nativos que voc\u00ea usa hoje (no geral poucos apps usam todos os recursos).<\/li>\n<\/ul>\n<h2>Google e Microsoft\u200a &#8211; Maiores apoiadores do\u00a0PWA<\/h2>\n<p>A Microsoft apoia cada vez mais a tecnologia PWA. Hoje j\u00e1 \u00e9 poss\u00edvel instalar PWAs em vers\u00f5es mais recentes do Windows. O pr\u00f3prio buscador da Microsoft, Bing, j\u00e1 reconhece um PWA e adiciona a sua app store, para que o usu\u00e1rio encontre a loja facilmente.<\/p>\n<p>O Google tamb\u00e9m \u00e9 um dos maiores apoiadores da nova tecnologia PWA com o sistema operacional Android e possui um site exclusivo com os maiores\u00a0<a href=\"https:\/\/developers.google.com\/web\/showcase\/\" target=\"_blank\" rel=\"noopener\">cases<\/a>\u00a0sobre essa tecnologia.<\/p>\n<h2>Um pouco de\u00a0n\u00fameros\u2026<\/h2>\n<p>O n\u00famero mais expressivo sem d\u00favida \u00e9 do\u00a0<a href=\"http:\/\/flipkart.com\/\" target=\"_blank\" rel=\"noopener\">Flipkart<\/a>. Eles triplicaram o\u00a0<em>time-on-site\u00a0<\/em>dos clientes do seu e-commerce com o lan\u00e7amento do seu\u00a0<em>PWA<\/em>. E decidiram combinar a experi\u00eancia do seu aplicativo nativo com a sua presen\u00e7a web e com isso, obtiveram um resultado de 70% no aumento de convers\u00f5es.<\/p>\n<p>Ou seja, \u00e9 uma grande alternativa para prospectar clientes e dissipar o seu neg\u00f3cio!<\/p>\n<h2>Conclus\u00e3o<\/h2>\n<p>Bom para finalizar como tudo na vida as PWA\u2019s n\u00e3o s\u00e3o uma receita m\u00e1gica que resolve todos os problemas e podem ser aplicadas em todas as situa\u00e7\u00f5es, mas com certeza elas s\u00e3o um ingrediente muito rico para fazer a experi\u00eancia do seu cliente muito mais eficaz e aumentar os seus resultados.<\/p>\n<p>Obrigado e at\u00e9 a pr\u00f3xima!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1, hoje vou compartilhar com voc\u00eas um pouco sobre um assunto que est\u00e1 sendo bem falado pelos \u201cfrontenders\u201d, o Progressive Web App (PWA). PWA \u00e9 um termo usado para denotar uma nova metodologia de desenvolvimento de software. Ao contr\u00e1rio dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolu\u00e7\u00e3o h\u00edbrida entre as [&hellip;]<\/p>\n","protected":false},"author":152,"featured_media":16681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-16623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/152"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=16623"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/16681"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=16623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=16623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=16623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}