HTML के साथ ब्राउज़र कैश को प्रोग्रामेटिक रूप से कैसे खाली करें?

ब्राउज़र कैश नियंत्रण

HTML/मेटा टैग्स के माध्यम से ब्राउज़र कैश को "खाली" नहीं किया जा सकता, लेकिन आप कैशिंग व्यवहार को नियंत्रित कर सकते हैं ताकि ब्राउज़र कैश्ड संस्करण का उपयोग न करे।

मेटा टैग्स (सीमित प्रभावशीलता)

<head>
    <!-- कैश नियंत्रण -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache"> <!-- HTTP/1.0 -->
    <meta http-equiv="Expires" content="0">
</head>

कैश बस्टिंग: क्वेरी स्ट्रिंग संस्करण (अनुशंसित)

संसाधन URL में संस्करण/हैश जोड़ें ताकि फ़ाइल बदलने पर ब्राउज़र इसे नई फ़ाइल समझे:

<!-- HTML में -->
<script src="app.js?v=1.0.0"></script>
<link rel="stylesheet" href="styles.css?v=1.0.0">

<!-- फ़ाइल अपडेट होने पर संस्करण बदलें -->
<script src="app.js?v=1.0.1"></script>
<link rel="stylesheet" href="styles.css?v=1.0.1">

बिल्ड टूल्स के साथ स्वचालित कैश बस्टिंग

सर्वर-साइड कैश हेडर्स (सबसे प्रभावी)

# Apache (.htaccess)
# HTML/पेज के लिए - कैश न करें
<FilesMatch "\.(html|htm)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</FilesMatch>

# स्टैटिक एसेट्स के लिए - लंबी कैशिंग + कैश बस्टिंग
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# Nginx
location ~* \.(html|htm)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

Service Worker के साथ कैश नियंत्रण (उन्नत)

// sw.js - सर्विस वर्कर
self.addEventListener('fetch', (event) => {
    // HTML पेज के लिए: नेटवर्क पहले, फिर कैश
    if (event.request.headers.get('accept').includes('text/html')) {
        event.respondWith(
            fetch(event.request)
                .then(response => {
                    // कैश अपडेट करें
                    const clone = response.clone();
                    caches.open('pages').then(cache => cache.put(event.request, clone));
                    return response;
                })
                .catch(() => caches.match(event.request))
        );
        return;
    }
    
    // स्टैटिक एसेट्स के लिए: कैश पहले
    event.respondWith(
        caches.match(event.request).then(cached => {
            return cached || fetch(event.request).then(response => {
                return caches.open('assets').then(cache => {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

// कैश साफ़ करने के लिए
self.addEventListener('message', (event) => {
    if (event.data === 'CLEAR_CACHE') {
        caches.keys().then(keys => {
            keys.forEach(key => caches.delete(key));
        });
    }
});

// मुख्य थ्रेड से कैश साफ़ करें
// navigator.serviceWorker.controller.postMessage('CLEAR_CACHE');

उपयोगकर्ता के लिए कैश साफ़ करना

उपयोगकर्ता मैन्युअली कैश साफ़ कर सकते हैं:

• Chrome/Edge: Ctrl+Shift+Delete → "कैश्ड छवियाँ और फ़ाइलें"
• Firefox: Ctrl+Shift+Delete → "कैश"
• हार्ड रीलोड: Ctrl+Shift+R (कैश बायपास)
• डेवलपर टूल्स: F12 → Network → "Disable cache" चेक करें