Ensuring Users See the Latest Version of Your UI Application

When deploying a new version of a User Interface (UI) application, it’s crucial to ensure that your users access the updated content without the hassles of manually clearing their browser cache. This becomes even more significant in the context of single-page applications (SPAs), where a large part of the application logic is loaded just once and executed on the client-side. This blog post will dive into several strategies that can be employed to keep your application fresh for users.

Versioned Filenames

What Are They? By appending a hash or version number to the filenames of assets such as CSS and JS files, you ensure that browsers download the new files whenever there’s a new build because the filenames will have changed.

How to Implement? Modern build tools like Webpack, Angular CLI, and Create React App offer options to automate the appending of hashes or version numbers to filenames.

Cache-Control Headers

Why Use Cache-Control Headers? Configuring Cache-Control headers via Nginx allows you to dictate how browsers cache the various assets of your application.

Nginx Configuration Example

location ~* \.(js|css)$ {
    expires 365d;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

location = /index.html {
    add_header Cache-Control "no-cache";
    expires 0;
}

This configuration sets long max-age values for static assets and short or no-cache for HTML files and versioned filenames, ensuring that the browser revalidates files with the server.

Using ETags

What are ETags? ETags can be configured through Nginx and help browsers validate whether the cached content has changed since it was last fetched.

Nginx Configuration Example

etag on;

If the content hasn’t changed, a 304 Not Modified response is returned, and the browser uses the cached version. Otherwise, the new content is fetched.

Leveraging HTML5 Service Workers

Power of Service Workers in PWAs In Progressive Web Apps (PWAs), service workers give you control over how to cache and respond to resource requests. You can write logic in your service worker to manage your application’s cache effectively.

The Clear-Site-Data Header

One-time Cache Clearance Temporarily returning the Clear-Site-Data header from your server forces a one-time clearance of all cached data for your site.

Nginx Configuration Example

add_header Clear-Site-Data "\"cache\", \"cookies\", \"storage\"";

Exercise caution with this approach as it is heavy-handed and may have unintended consequences.