Como posso fazer para que o browser CSS e Javascript alterações?
-
08-06-2019 - |
Pergunta
Arquivos CSS e Javascript não mudam muito frequentemente, então eu quero que eles sejam armazenados em cache pelo navegador da web.Mas eu também quero o browser para ver as alterações feitas para esses arquivos sem a necessidade de que o usuário limpe o seu cache do navegador.Também quer uma solução que funciona bem com um sistema de controle de versão como o Subversion.
Algumas soluções de eu ter visto envolver a adição de um número de versão para o final do arquivo na forma de uma seqüência de caracteres de consulta.
Pode usar o número de revisão do SVN para automatizar isso para você: ASP.NET Exibir Número de Revisão do SVN
Você pode especificar como você incluir o Revisão variável de outro arquivo?Que está no arquivo HTML, eu posso incluir o número de Revisão do URL para a CSS ou Javascript.
No Livro do Subversion ele diz sobre a Revisão:"Esta palavra-chave descreve a última revisão, em que este ficheiro alterado no repositório".
O Firefox também permite pressionando CTRL+R para recarregar tudo em uma página específica.
Para esclarecer estou procurando por soluções que não requerem que o usuário faça qualquer coisa da sua parte.
Solução
Descobri que se você acrescentar o carimbo de data / hora da última modificação de um arquivo no final do URL, o navegador irá solicitar os arquivos quando ele é modificado.Por exemplo em PHP:
function urlmtime($url) {
$parsed_url = parse_url($url);
$path = $parsed_url['path'];
if ($path[0] == "/") {
$filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
} else {
$filename = $path;
}
if (!file_exists($filename)) {
// If not a file then use the current time
$lastModified = date('YmdHis');
} else {
$lastModified = date('YmdHis', filemtime($filename));
}
if (strpos($url, '?') === false) {
$url .= '?ts=' . $lastModified;
} else {
$url .= '&ts=' . $lastModified;
}
return $url;
}
function include_css($css_url, $media='all') {
// According to Yahoo, using link allows for progressive
// rendering in IE where as @import url($css_url) does not
echo '<link rel="stylesheet" type="text/css" media="' .
$media . '" href="' . urlmtime($css_url) . '">'."\n";
}
function include_javascript($javascript_url) {
echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
'"></script>'."\n";
}
Outras dicas
Algumas soluções de eu ter visto envolver a adição de um número de versão para o final do arquivo na forma de uma seqüência de caracteres de consulta.
<script type="text/javascript" src="funkycode.js?v1">
Você pode usar o número de revisão do SVN para automatizar esse para você incluindo a palavra LastChangedRevision em seu arquivo html depois de onde v1 aparece acima.Você também deve configurar o seu repositório para fazer isso.
Eu espero que isso esclarece a minha resposta?
O Firefox também permite pressionando CTRL + R para recarregar tudo em uma página específica.
Na minha opinião, é melhor fazer o número de versão de parte do próprio arquivo de exemplo: myscript.1.2.3.js
.Você pode configurar seu servidor de web cache este arquivo para sempre, e apenas adicionar um novo arquivo js quando você tem uma nova versão.
Quando você lançar uma nova versão do seu CSS ou JS bibliotecas, causar o seguinte ocorrer:
- modificar o nome do arquivo para incluir uma versão única cadeia de caracteres
- modificar os arquivos HTML que faz referência à biblioteca para apontar para o ficheiro com a versão
(isso é normalmente muito simples questão para uma versão de script)
Agora você pode definir a Expirar para a CSS/JS anos no futuro.Sempre que você alterar o conteúdo, se a referência de HTML aponta para um novo URI, navegadores não vai mais usar o antigo cópia em cache.
Isso faz com que o comportamento de cache que você deseja, sem exigir nada de usuário.
Eu também queria saber como fazer isso, quando eu encontrei grom resposta.Obrigado por código.
Eu lutei com a compreensão de como o código que era para ser usado.(Eu não uso um sistema de controle de versão.) Em resumo, você incluir o carimbo de data / hora (ts) quando você chamar a folha de estilos.Você não está planejando alterar a folha de estilo muitas vezes:
<?php
include ('grom_file.php');
// timestamp on the filename has to be updated manually
include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>