Clear your dev cache using JavaScript — no server-side language needed. Fix refresh issues and boost productivity with this JS snippet.
When we use a server side language to get our changes this is what happens:
1- the
Request is made by the browser to the server
2- the Response is sent from the server to
the browser
In this case, if any changes are made within the files, the server will
serve the browser with those changes.
But, what if you're not using a server side
language for your local development?!
If you're locally developing a website on the Classic Road (HTML + CSS + JS) without a
plugin in your IDE to synchronize your changes,
and have some generated cache, you'll have to refresh your page twice
and sometimes more to see the changes you've just made even if you're using a local
server as Laragon, WAMP, MAMP, XAMPP...
Did you ever asked yourself how much time
you're spending on refreshing twice?!
This is a time killer, it's very
annoying, and you're productivity will be affected!
The solution would be to clear the cache when we refresh the page, you would say "use Ctrl + F5!" and I would respond "go try it with your generated cache!".
To clear the cache when we hit the refresh button:
1- we'll have to access the
loading state of the document without waiting for stylesheets,
images...
2- we'll have to open the cache and access the particular
cache causing headaches
3- we'll have to delete this particular cache!
if (document.readyState === "loading") {
// Loading hasn't finished yet
document.addEventListener("DOMContentLoaded", function () {
console.log("loading...")
caches.open("cacheNameCausingHeadaches").then(function (cache) {
cache.delete(document.URL).then(function () {
console.log("deleted")
})
})
})
}
Paste this code at the end of your scripts before the closing body tag and refresh your page twice for the last time!
To get the cacheNameCausingHeadeaches:
caches.keys().then(function (keyList) {
console.log("keyList")
})
I'm here to share and learn 😊 so if you have a better way without an IDE plugin for a static site with some cache please let me know because I like to refresh and see the difference 😉
Hope this will be useful.
