{"id":763,"date":"2010-08-28T13:42:52","date_gmt":"2010-08-28T16:42:52","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=763"},"modified":"2010-08-28T13:42:52","modified_gmt":"2010-08-28T16:42:52","slug":"grails-lutando-contra-o-cache-do-navegador-css-e-ajax","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=763","title":{"rendered":"Grails: lutando contra o cache do navegador (CSS e Ajax)"},"content":{"rendered":"

\"\"<\/a>Um problema no desenvolvimento de aplica\u00e7\u00f5es web \u00e9 o cache do navegador. \u00c9 muito comum situa\u00e7\u00f5es nas quais alteramos arquivos CSS em nosso projeto, enviamos a aplica\u00e7\u00e3o para o ambiente de produ\u00e7\u00e3o e mesmo assim nossos clientes continuam vendo o layout da vers\u00e3o anterior. Isto ocorre porqu\u00ea o browser cacheia os arquivos baixados da Internet para melhorar a performance de navega\u00e7\u00e3o.<\/p>\n

H\u00e1 duas solu\u00e7\u00f5es para este problema: uma porca e outra elegante. A porca \u00e9 pedir a seus clientes que esvaziem o cache do navegador, expondo assim a sua incompet\u00eancia e queimando seu filme. A elegante \u00e9 tirar proveito do n\u00famero de vers\u00e3o do seu projeto.<\/p>\n

CSS – evitando o cache<\/h2>\n

A t\u00e9cnica \u00e9 bastante simples: o navegador identifica os recursos cacheados pela URL que usou para acess\u00e1-los. A solu\u00e7\u00e3o para quem programa em Grails \u00e9 composta de apenas dois passos.<\/p>\n

1. Altere a vers\u00e3o da sua aplica\u00e7\u00e3o<\/h3>\n

Na raiz do seu projeto Grails h\u00e1 um arquivo chamado application.properties. \u00c9 nele que ficam armazenadas meta-informa\u00e7\u00f5es sobre sua aplica\u00e7\u00e3o, como por exemplo a vers\u00e3o do Grails e do seu projeto. A chave app.version cont\u00e9m este valor. Novamente, h\u00e1 tr\u00eas modos de alterar esta configura\u00e7\u00e3o. Uma \u00e9 horr\u00edvel, a feia e a terceira, a pr\u00e1tica.<\/p>\n

Op\u00e7\u00e3o horr\u00edvel:<\/strong> altere o arquivo manualmente. Busque a chave application.properties e a altere de acordo com sua vontade.<\/p>\n

Op\u00e7\u00e3o feia:<\/strong> use o comando grails set-version. \u00c9 um script do Grails feito especificamente para esta tarefa.<\/p>\n

O problema com as duas op\u00e7\u00f5es acima \u00e9 que exigem que voc\u00ea, desenvolvedor, se lembre de executar estes passos. Por esta raz\u00e3o, recomendo a op\u00e7\u00e3o pr\u00e1tica: interceptar o evento de compila\u00e7\u00e3o do seu projeto.<\/p>\n

Op\u00e7\u00e3o pr\u00e1tica<\/strong><\/p>\n

Voc\u00ea dever\u00e1 incluir um evento no script de compila\u00e7\u00e3o do seu projeto. Isto \u00e9 feito criando-se o arquivo _Events.groovy dentro do diret\u00f3rio scripts<\/em> da sua aplica\u00e7\u00e3o. Toda vez que o seu c\u00f3digo for compilado pelo Grails, ele buscar\u00e1 este arquivo que pode conter uma s\u00e9rie de eventos a serem disparados pelo mecanismo de build do Framework (neste link<\/a> h\u00e1 mais detalhes sobre este poderoso recurso).<\/p>\n

Sem mais esperas, segue o evento que escrevi que dever\u00e1 ser executado antes da compila\u00e7\u00e3o do projeto:<\/p>\n

\r\n\r\neventCompileStart = { kind ->\r\n println "Incrementando o n\u00famero da vers\u00e3o"\r\n def versao = metadata.'app.version'\r\n\r\n if (!versao)\r\n versao = 0\r\n else\r\n versao = Double.valueOf(versao) + 0.01\r\n\r\n metadata.'app.version' = versao.toString()\r\n\r\n try {\r\n metadata.persist()\r\n println "Vers\u00e3o alterada para ${versao}"\r\n } catch (Exception ex) {\r\n ex.printStackTrace()\r\n }\r\n\r\n println "Nova vers\u00e3o: ${versao}"\r\n}\r\n\r\n<\/pre>\n
(nota: o n\u00famero de vers\u00e3o neste exemplo ser\u00e1 algo horr\u00edvel como 0.01000000003. A id\u00e9ia do post \u00e9 s\u00f3 passar a id\u00e9ia b\u00e1sica ok? Sendo assim, lembre-se de “embelezar” seu n\u00famero de vers\u00e3o)<\/p>\n
2. Modificando a URL dos seus arquivos CSS<\/h3>\n
Esta \u00e9 a parte f\u00e1cil, e pode ser aplicada a qualquer recurso que sofra altera\u00e7\u00f5es entre uma vers\u00e3o e outra do seu projeto. Basta incluir o n\u00famero da vers\u00e3o ap\u00f3s o caractere ?<\/strong> na URL que identifica o seu arquivo CSS, tal como no exemplo abaixo.<\/p>\n
\r\n\r\n<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}?${grailsApplication.metadata['app.version']}" \/>\r\n\r\n<\/pre>\n
O caractere “?” \u00e9 usado para separar o nome do recurso dos par\u00e2metros a serem passados ao servidor. Como se trata de um arquivo est\u00e1tico, o servidor ir\u00e1 ignorar os par\u00e2metros passados e simplesmente retornar o arquivo. O navegador, por sua vez, ir\u00e1 cachear o arquivo CSS com um nome que varia de acordo com a vers\u00e3o do seu projeto, evitando assim o problema de cache que mencionei acima.<\/p>\n
Ajax – como evitar problemas com o maldito cache<\/h2>\n
Em aplica\u00e7\u00f5es que acessem dados alterados com frequ\u00eancia, \u00e9 muito comum o navegador (especialmente o Internet Explorer, cuja principal fun\u00e7\u00e3o \u00e9 tornar sua vida um inferno) retornar dados cacheados ao navegador, ao inv\u00e9s das informa\u00e7\u00f5es mais atualizadas. Neste caso, a solu\u00e7\u00e3o \u00e9 basicamente a mesma que apresentei para os arquivos CSS. Basta incluir um par\u00e2metro a mais na sua requisi\u00e7\u00e3o ass\u00edncrona que seja rand\u00f4mico.<\/p>\n
Assim o navegador sempre acreditar\u00e1 estar buscando um novo recurso, mesmo que o resultado seja o mesmo. Abaixo segue um exemplo usando jQuery.<\/p>\n
\r\n\r\n$("#elemento").load("\/aplicacao\/controlador\/action",\r\n {produto:idProduto, colaborador: idColaborador, noCache:new Date()},\r\n function() {\r\n onChangePreAtividade()\r\n })\r\n\r\n<\/pre>\n
Repare que passo um atributo chamado noCache. Meu controlador simplesmente ir\u00e1 ignor\u00e1-lo. No caso, eu passei apenas uma nova inst\u00e2ncia da hora da requisi\u00e7\u00e3o, representada pelo objeto Date. Mas poderia tamb\u00e9m usar Math.random() para obter o mesmo resultado.<\/p>\n
Concluindo<\/h2>\n
\u00c9 isto. Agora voc\u00ea pode respirar tranquilo tendo a certeza de que seus usu\u00e1rios sempre ter\u00e3o uma resposta Ajax atualizada e o CSS mais atual carregado em seu navegador. At\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"
Um problema no desenvolvimento de aplica\u00e7\u00f5es web \u00e9 o cache do navegador. \u00c9 muito comum situa\u00e7\u00f5es nas quais alteramos arquivos CSS em nosso projeto, enviamos a aplica\u00e7\u00e3o para o ambiente de produ\u00e7\u00e3o e mesmo assim nossos clientes continuam vendo o layout da vers\u00e3o anterior. Isto ocorre porqu\u00ea o browser cacheia os arquivos baixados da Internet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-763","post","type-post","status-publish","format-standard","hentry","category-grails"],"yoast_head":"\nGrails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkico.itexto.com.br\/?p=763\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Um problema no desenvolvimento de aplica\u00e7\u00f5es web \u00e9 o cache do navegador. \u00c9 muito comum situa\u00e7\u00f5es nas quais alteramos arquivos CSS em nosso projeto, enviamos a aplica\u00e7\u00e3o para o ambiente de produ\u00e7\u00e3o e mesmo assim nossos clientes continuam vendo o layout da vers\u00e3o anterior. Isto ocorre porqu\u00ea o browser cacheia os arquivos baixados da Internet […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=763\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2010-08-28T16:42:52+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/02\/grails_logo.png\" \/>\n<meta name=\"author\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loboweissmann\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=763\",\"name\":\"Grails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png\",\"datePublished\":\"2010-08-28T16:42:52+00:00\",\"dateModified\":\"2010-08-28T16:42:52+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=763\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png\",\"width\":\"163\",\"height\":\"43\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=763#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grails: lutando contra o cache do navegador (CSS e Ajax)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\",\"url\":\"https:\/\/devkico.itexto.com.br\/\",\"name\":\"\/dev\/Kico\",\"description\":\"Desenvolvendo software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkico.itexto.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\",\"name\":\"Kico (Henrique Lobo Weissmann)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"caption\":\"Kico (Henrique Lobo Weissmann)\"},\"sameAs\":[\"https:\/\/x.com\/loboweissmann\"],\"url\":\"https:\/\/devkico.itexto.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devkico.itexto.com.br\/?p=763","og_locale":"pt_BR","og_type":"article","og_title":"Grails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico","og_description":"Um problema no desenvolvimento de aplica\u00e7\u00f5es web \u00e9 o cache do navegador. \u00c9 muito comum situa\u00e7\u00f5es nas quais alteramos arquivos CSS em nosso projeto, enviamos a aplica\u00e7\u00e3o para o ambiente de produ\u00e7\u00e3o e mesmo assim nossos clientes continuam vendo o layout da vers\u00e3o anterior. Isto ocorre porqu\u00ea o browser cacheia os arquivos baixados da Internet […]","og_url":"https:\/\/devkico.itexto.com.br\/?p=763","og_site_name":"\/dev\/Kico","article_published_time":"2010-08-28T16:42:52+00:00","og_image":[{"url":"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/02\/grails_logo.png"}],"author":"Kico (Henrique Lobo Weissmann)","twitter_card":"summary_large_image","twitter_creator":"@loboweissmann","twitter_misc":{"Escrito por":"Kico (Henrique Lobo Weissmann)","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=763","url":"https:\/\/devkico.itexto.com.br\/?p=763","name":"Grails: lutando contra o cache do navegador (CSS e Ajax) - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png","datePublished":"2010-08-28T16:42:52+00:00","dateModified":"2010-08-28T16:42:52+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=763#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=763"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=763#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/02\/grails_logo.png","width":"163","height":"43"},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=763#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Grails: lutando contra o cache do navegador (CSS e Ajax)"}]},{"@type":"WebSite","@id":"https:\/\/devkico.itexto.com.br\/#website","url":"https:\/\/devkico.itexto.com.br\/","name":"\/dev\/Kico","description":"Desenvolvendo software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkico.itexto.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7","name":"Kico (Henrique Lobo Weissmann)","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","caption":"Kico (Henrique Lobo Weissmann)"},"sameAs":["https:\/\/x.com\/loboweissmann"],"url":"https:\/\/devkico.itexto.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/763"}],"collection":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=763"}],"version-history":[{"count":2,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/763\/revisions\/765"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}