For the past couple days, I've been battling with some refresh issues in my browser. In this blog post, I'd like to talk about these issues, and how I resolved them.
The problem
I was making updates to this website. I was trying to apply some of the principles I learned from Heydon Pickering and Andy Bell's book Every Layout and Utopia to my CSS stylesheets. I had to make some updates to my HTML code, so I did that first.
Next, I updated my stylesheets. I refreshed my browser page on my laptop. The changes didn't show immediately, so I did a force-refresh, then I see my stylesheet updates.
I refreshed the page on my phone; no updates.
The culprit
cache (n) - a hidden storage space (for money or provisions or weapons)
The definition of cache, WordNet 3.0 (2006)
Immediately I thought to myself, "This must be a cache issue". A cache, in the "web browser sense", is a temporary store for files that are expected to change infrequently. The web browser uses this to hasten the time it takes for webpages to load by only downloading files when necessary.
This wouldn't be the first time I have battled with the cache. I usually would clear my phone's browser history, but I told myself, no, not today.
No more would I bow to this Pharoah; I had to figure out the proper way to fix it.
Digital dialogue
This is how I remember the events taking place:
I open https://mmhq.me on my phone's web browser.
Browser: Hello Server, can you get me the page called https://mmhq.me?
Server: Sure Browser! Here you go!
Server sends a webpage as a response.
Browser: Thanks! I'll store the stylesheet in my cache so I don't have to ask you again.
Server: I don't know what currency you are using, but sure, if you want to I guess.
Browser: No, it's not money. It's more like a hidden storage space where humans usually keep for money or provisions or deadly weapons, but I choose to use mine to keep the stylesheets and images. That way, I don't have to download them again when I ask you for the same page again.
Server: Okie-dokie, that's fine with me.
I make changes to my website, then refresh the page on my phone's web browser.
Browser: Hey Server. Any updates for me?
Server: Good question. Let me check with Cache Control... Yes, there are updates for you.
Browser: Cache control? I thought you didn't know what a cache was?
Server: I didn't, until Admin informed me about them yesterday. They pretty much give me instructions on how all caching is down around here.
Browser: Oh okay. Could you hit me with the update?
Server: I would, but Cache Control says that what you have is still fresh, so I'm not going to send you anything until they declare it stale.
Browser: Errm, okay. I guess the update is no update.
I learn about Cache Control online, and learn that none has been set for my website, so I must have been using the default. I set my Cache-control to public, no-store and refresh the page on my phone.
Browser: Knock, knock! Guess who?
Server: Browser, you again. What a surprise!
Browser: I know right, it's been a whole 2 minutes and 45 seconds since I heard from you last.
Server: Lucky for you, I do have updates now fresh from Cache Control, but don't store any of it in your cache. Always ask me for the latest and greatest.
Browser: Why not? Are you telling me what to do with my money?
Server: Not at all. These are just orders from Cache Control. I don't make orders, I just enforce them.
After seeing my changes work now, I update Cache-control to public, max-age=806400 and refresh the page.
Browser: Guess who's back, back again...
Server: Browser, wasn't expecting you. I have updates for you, and these updates are going to last at least 86400 seconds.
Browser: 86400 seconds? How many decades is that?
Server: A day. I'll have updates by then.
Browser: Oh! Alright, bet.
I refresh the page.
Browser: Hi!
Server: Browser, to what do I owe the pleasure?
Browser: Just need another update.
Server: Sure, I would love to give it to you.
Browser: Great, hand it over.
Server: You didn't let me finish. I would love to give it to you, but Cache Control says no.
Browser: What? Why?
Server: Because they said to come back after a day has fully elapsed.
Browser: But I need updates now.
Server: Those are my orders. They also said that if you don't want to adhere, you could "Cache them outside".
Browser: Look, there is no need for all that. I don't want any problems.
Server: Cool, return in a day. Enjoy your stale content while you can.
Browser: Fine, I'm gone.
I update my server to support cache-busting through a Flask plugin and refresh the page a couple times.
Browser: Hello, server! I know I've pinged you a billion times, but I need the new updates. The user won't stop refreshing the page.
Server: Just in time, Browser! The web admin just implemented cache-busting!
Browser: Cache-busting? Are you accusing me? Sounds like you got the wrong cache. My cache is not involved in any criminal acts, we don't do money laundering.
Server: No accusation here. It just means that from this request and beyond, you would be able to eat your cake and have it too.
Browser: I can? How sway?
Server: Because I can just send you an updated version of the file, with a different name. In other words, you could "cache me if you can"; that means you could cache the file, if it is presented to you as a new URL.
Browser: So you are saying that you can send the same file https://mmhq.me/static/css/style.css as https://mmhq.me/static/css/style.css?v=1, that way I could store both of them? That's genius!
Server: I know, Cache Control came up with the whole idea.
Browser: Hmmm, I guess they're not so bad after all.
I update my server to remove cache-busting through a Flask plugin and create my own solution; I refresh the page.
Browser: Hello, server! You've sent me blank images for the past 20 refreshes now. Why aren't you sending your images anymore?
Server: Not sure....wait, this just in. Cache Control says the Flask cache-buster plugin was a bust. The web admin decided to uninstall it and create his own solution. Everything is up and running now.
Browser: I knew cache-busting sounded sketchy. I guess it doesn't hurt to drink from your own cistern or to draw water from your own well, but what do I know? I'm just a browser!
Browser and Server got a beer together after. The end.
The bottom line
Cash rules everything around me C.R.E.A.M., get the money Dollar dollar bill, y'allMethod Man, on the song C.R.E.A.M.
The cache is an indispensable tool hidden in every browser. Are you making the most of it, or making it do the most?
Further reading
- Best Practices for Cache Control
- Cache Control on MDN
- Cache-busting
- Cache-busting with query strings
- web.dev, where I learn about the web