Update changed script andcss files in memory without refreshing page

1. Cache Busting

Ensure that your browser gets the latest version of your files by appending a version number or a unique hash to the file URLs. This forces the browser to fetch the new files instead of using the cached versions.

For CSS and JavaScript Files

In your HTML or layout file, you can add a query string with a version number or a hash:

2. Using Service Workers

Service workers can intercept network requests and dynamically control the caching behavior. You can programmatically cache specific files and update them when changes are detected.

Example Service Worker

Create a service-worker.js file:

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
    '/css/styles.css',
    '/js/scripts.js',
    // Add other files you want to cache
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                // Cache hit - return response
                if (response) {
                    return response;
                }

                // Clone the request for fetch and cache
                const fetchRequest = event.request.clone();

                return fetch(fetchRequest).then(
                    response => {
                        // Check if we received a valid response
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        // Clone the response for cache
                        const responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                            .then(cache => {
                                cache.put(event.request, responseToCache);
                            });

                        return response;
                    }
                );
            })
    );
});

Try with these 2 approaches maybe u'lll be able to avoid this situation. Thanks!!