The Role of Caching

Caching is a strategy employed to store and reuse commonly accessed resources, such as images, stylesheets, and scripts, in the user’s browser.

Consider this scenario: a user accesses an Angular-based website that loads around 200 resources (approximately 10 MB total) from the server. If they navigate again, the same resources will consume another 10 MB. For users with slower internet connections, this can result in a frustrating experience. Additionally, the server may face high memory or CPU load, causing performance issues.

Browser caching can significantly improve load times and reduce bandwidth usage, contributing to a smoother and more efficient browsing experience. However, it can present challenges when updates are deployed, particularly for the main HTML file, Index.html.

The Issue: Outdated Index.html in Cache

In Angular applications, the Index.html file acts as the entry point. When updates (e.g., transitioning from version 1.0 to 1.1) occur, changes may not be immediately visible to users due to caching. They might continue viewing an older version until they clear their browser cache manually or perform a hard reload.

To tackle this issue, we can implement a solution that programmatically clears the cache for the Index.html file during application initialization. This approach guarantees that users always access the most recent version without needing to manually clear their cache.

The Solution: Programmatic Cache Clearing

To clear the cache via code, we will use the Cache API offered by modern browsers and create an Angular service called CacheService to manage the cache removal process. Let’s get started!

Step 1: Create a Cache Service

First, we will set up a service to handle cache clearing. Here’s how to create CacheService:

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root',

})

export class CacheService {

async clearCacheForFile(filename: string): Promise<void> {

// Use a unique name for your cache.

const cache = await caches.open('cache-buster');

try {

const keys = await cache.keys();

for (const key of keys) {

if (key.url.includes(filename)) {

await cache.delete(key);

}

}

} catch (error) {

console.error('Error clearing cache:', error);

}

}

}

The CacheService includes a method, clearCacheForFile, that takes a filename as a parameter. This method opens the cache by the specified name and removes any cached resources that match the filename.

Step 2: Integrate the Service in App Initialization

Next, we will incorporate the CacheService into our Angular app during initialization. This ensures that when users load the application, the cache for the Index.html file is cleared:

import { NgModule, APP_INITIALIZER } from '@angular/core';

import { CacheService } from './cache.service';

export function clearIndexHtmlCache(cacheService: CacheService) {

return () => cacheService.clearCacheForFile('index.html');

}

@NgModule({

declarations: [

// ...

],

imports: [

// ...

],

providers: [

CacheService,

{

provide: APP_INITIALIZER,

useFactory: clearIndexHtmlCache,

deps: [CacheService],

multi: true,

},

],

bootstrap: [AppComponent],

})

export class AppModule {}

In this code snippet, we define clearIndexHtmlCache as an app initializer. This function is dependent on the CacheService, ensuring that it executes during app initialization, thereby clearing the cache for Index.html if it exists.

Step 3: Customize Your Cache Name

Remember to replace 'cache-buster' with a unique identifier for your cache. This is crucial to ensure that you only clear the cache of your specific application's resources without affecting others.

Bonus Tip: You can view your cache storage by accessing the developer console in Chrome. Navigate to Application, then find "Cache Storage" in the left menu.

In this example, we've assigned 'cache-buster' as the Cache storage name, containing the Index.html file at the root of its deployment, effectively preventing caching for Index.html indefinitely.

Exploring Cache Storage Manually — Image by Author