Skip to end of metadata
Go to start of metadata

Índice

 

Objetivo

O objetivo desse guia é apresentar a utilização da técnica de Cache busting em scripts (arquivos JavaScript) e folhas de estilo (arquivos CSS) da plataforma fluig.

 

Cache busting

Ao acessar uma página do fluig, o navegador armazenará em cache a maioria dos recursos da página, incluindo folhas de estilo (CSS) e scripts (JavaScript). O armazenamento em cache local é realizado pelo navegador a fim de reduzir a necessidade de download do recurso do servidor a cada novo acesso à página, reduzindo a utilização de banda e diminuindo o tempo de acesso à página. Porém, quando o fluig (ou um componente específico) é atualizado, podem ser apresentadas inconsistências em execução de scripts ou problemas de estilo para os usuários, devido ao navegador estar utilizando versões antigas, que estão armazenadas em seu cache local, destes recursos.

A fim de garantir que o navegador do usuário utilize a última versão de um determinado recurso da página, deve-se utilizar a técnica de Cache busting, que consiste em adicionar um parâmetro de consulta (query param) na URL do recurso. Esta técnica previne que o navegador carregue do cache local uma versão antiga do recurso, forçando o navegador a realizar o download do servidor da última versão deste recurso, quando o valor do parâmetro de consulta informado na URL do recurso for modificado.

Adicionando a versão do fluig como um parâmetro de consulta na URL do recurso

Para os recursos JavaScripts e/ou CSSs declarados no Arquivo application.info, será adicionado automaticamente pelo renderizador do fluig o parâmetro de consulta v=${fluigVersion} na URL de cada recurso declarado. Já para recursos que são carregados através de tags HTML (script e link por exemplo) presentes nos templates do FreeMarker de componentes do fluig, pode ser adicionado o parâmetro de consulta v=${fluigVersion} na URL do recurso, conforme exemplo abaixo:

<!-- Carregamento de script JavaScript utilizando cache busting -->
<script type="text/javascript" src="/mywidget/resources/js/mywidget.js?v=${fluigVersion}"></script>
<!-- Carregamento de folha de estilo CSS utilizando cache busting -->
<link href="/mywidget/resources/css/mywidget.css?v=${fluigVersion}" type="text/css" rel="stylesheet" />

As tags script link, após o template do FreeMarker ter sido processado, ficarão conforme abaixo:

<!-- Carregamento de script JavaScript utilizando cache busting -->
<script type="text/javascript" src="/mywidget/resources/js/mywidget.js?v=1.5.3"></script>
<!-- Carregamento de folha de estilo CSS utilizando cache busting -->
<link href="/mywidget/resources/css/mywidget.css?v=1.5.3" type="text/css" rel="stylesheet" />

Com isso, a cada nova versão do fluig, o valor da variável fluigVersion será alterado e consequentemente a URL do recurso também será modificada. Sendo assim, o navegador será forçado a realizar o download do servidor da última versão deste recurso e atualizar ele no cache local.

A versão do fluig também está disponível via JavaScript através da propriedade version do objeto WCMAPI, possibilitando a utilização da técnica de Cache busting em carregamentos de recursos realizados dinamicamente, conforme o exemplo abaixo:

/**
 * Carrega um script na página.
 */
function loadScript(url, callback) {
	var scriptNode = document.createElement('script');
	scriptNode.type = 'text/javascript';
	scriptNode.charset = 'utf-8';
	scriptNode.async = true;
	scriptNode.src = url + "?v=" + WCMAPI.version;
	scriptNode.addEventListener('load', callback, false);
	
	document.body.appendChild(scriptNode);
}

Dica

 Consulte a documentação da WCMAPI para conhecer as demais propriedades dessa biblioteca.