In one of my customer's application, we are storing static content (such as icons, and logos) in an Azure Storage Account blob container.
We've also configured the Cache-Control property of the blob items when served up to reduce bandwidth consumption.
Today, I wanted to show you how we did that.

the sample application

The sample application is very simple: it consists of an Azure App Service hosting a static HTML page that displays an image that is stored in an Azure Storage blob.

This looks like this:

Setting the cache-control manually

In order to set the cache-control for the blob item manually through, you'll need to use Azure Storage Explorer (either from the standalone tool or from the Azure Portal):

Then set the value of the "CacheControl" property:

Automating the thing (with PowerShell)

If we have multiple items in our blob container, setting properties manually is probably not the best idea.

Luckily, we can automate this thing!

In this example, I show you how to do it in PowerShell but you can do it with whatever Azure SDK you prefer: Azure CLI, .NET, Python and so on. It's your call!

How to make sure that the Cache-control property is used?

The first time we access the HTML page, we see that the image has been downloaded:

However, when we do a refresh, we see that the image has been served from the memory cache:

Now, if the cache expires on the client-side (in our case, after 2 minutes), we'll see that the image will again be served from the server (i.e. downloaded again):

Without setting the "CacheControl" property, we would notice that, on every page refresh, the image is being downloaded again.

As a conclusion...

Today, we've seen how we can set up cache-control on blob storage items, both manually and automatically using PowerShell.
This will help lower your application's latency as well as your Azure Bandwith costs.

I hope that you found it valuable.

Keep the discussion

You can reach me on Twitter or LinkedIn.

See you soon!