Created
May 4, 2023 14:35
-
-
Save MoisesTedeschi/db863ec5f17db5641ae773064ceec109 to your computer and use it in GitHub Desktop.
Cache Busting - Hash de CSS e JS (MOA)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="pt-BR"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Cache Busting - Hash de CSS e JS (MOA)</title> | |
<!--Exemplo para ajudar o River 04/05/2023--> | |
<!--Ponto de Melhoria: Daria para usar o "setTimeout" para controlar o tempo de execução da função de hash--> | |
<!--Daria para pegar pelo ID do Script e trocar o link da versão.--> | |
<script type="text/javascript" id="hash" href="./script-id.js"></script> | |
<!-- Cache Busting - Hash de CSS e JS --> | |
<script> | |
// Gerador de Hash com números aleatórios + Data (Só para garantir que não vai se repetir). | |
let hashGlobal = Math.floor(Math.random() * new Date().getTime()); | |
// Pega o ID do elemento e atribui um novo valor ao href do mesmo. | |
let hashID = document.getElementById("hash"); | |
hashID.attributes.href.nodeValue = `./script-id.js?v=${hashGlobal}`; | |
// Função para criação do CSS e JS de forma dinâmica e tbm trocar a versão sempre que a tela for atualizada. | |
function createFileElement(type, href) { | |
const fileNode = document.createElement(type); | |
fileNode.type = type === "link" ? "text/css" : "text/javascript"; | |
fileNode.rel = type === "link" ? "stylesheet" : ""; | |
fileNode.href = href; | |
fileNode.src = href; | |
return fileNode; | |
} | |
// Criação do CSS e do JS. | |
const cssNode = createFileElement("link", `./style.css?v=${hashGlobal}`); | |
const jsNode = createFileElement("script", `./script.js?v=${hashGlobal}`); | |
// Adição do CSS e do JS no head da página. | |
document.getElementsByTagName("head")[0].appendChild(cssNode); | |
document.getElementsByTagName("head")[0].appendChild(jsNode); | |
</script> | |
<!-- Cache Busting - Hash de CSS e JS --> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>Batata Frita</h1> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment