This lesson's interactive features are locked, please to keep using them
Cache Busting
Click to play video
Browsers cache stuff for good reason: it makes the user experience snappier and, if the user is paying for data, cheaper.
That said, sometimes (like in the last lesson) we don't want the browser to cache a file - we want to be sure we have the latest version. One trick to ensure that we get the latest is by "busting the cache". A simple tactic is to change the URL of the file a bit. Say we have this image URL:
http://localhost:8080/image.jpg
To cache bust, we want to alter the URL so that:
- The browser thinks it's a different file
- The server thinks it's the same file
Servers typically ignore query strings for file-like assets, so one of the most common ways to cache bust from the client side is to just add one. For example, a version parameter like this:
http://localhost:8080/image.jpg?version=1
If we want to bust it again, we just increment the version:
http://localhost:8080/image.jpg?version=2
Our use of the version key and the 1 and 2 values are arbitrary. The important thing is that the URL is different.
Assignment
We won't do much with the front-end of Tubely in this course, but this one lesson is an exception.
thumbnailImg.src = video.thumbnail_url;
This is where we tell the browser which URL to load the thumbnail image from. Because the URL doesn't change when we upload a new thumbnail, let's add client-side cache busting.
ORIGINAL_URL?v=TIME
Where ORIGINAL_URL is the original URL and TIME is the current time in milliseconds. You can get the current time in milliseconds with Date.now(). You can also use string interpolation in JS like this:
message = `She is ${age} years old`;
Run and submit the CLI tests from the root of the repo.
You may have to hard refresh and clear your browser's cache to see the changes in app.js
The tests for this step are a bit odd, they're checking your app.js to just make sure that you're not doing the old thing. Don't cheat please and thanks.