Cách xóa cache trình duyệt theo chương trình trong HTML

Bạn không thể xóa cache trình duyệt của người dùng bằng JavaScript/HTML vì lý do bảo mật. Tuy nhiên, bạn có thể ngăn chặn caching hoặc buộc tải lại tài nguyên mới bằng các kỹ thuật sau:

1. Meta tags chống cache (đặt trong <head>)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Lưu ý: Meta tags không luôn được tuân thủ bởi proxy/CDN. Header HTTP từ server hiệu quả hơn.

2. Cache Busting - Thêm tham số version vào URL tài nguyên

Khi cập nhật file JS/CSS, thay đổi query string để trình duyệt coi là file mới:

<script src="app.js?v=1.0.0"></script>
<link rel="stylesheet" href="style.css?v=1.0.0">

Lần cập nhật sau:

<script src="app.js?v=1.0.1"></script>

Kỹ thuật này gọi là cache busting hoặc versioning. Tự động hóa bằng build tools (Webpack, Vite, Gulp) để hash nội dung file: app.a1b2c3.js.

3. Header HTTP từ Server (Khuyên dùng)

Cấu hình server gửi header cho tài nguyên tĩnh:

# Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML trang chính - không cache
location = /index.html {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
}

4. Service Worker (PWA) - Kiểm soát cache hoàn toàn

Với Service Worker, bạn có thể lập trình xóa cache cụ thể:

caches.keys().then(names => {
  names.forEach(name => caches.delete(name));
});

Đây là cách duy nhất "xóa cache theo chương trình" thực sự, nhưng yêu cầu người dùng đã cài Service Worker (truy cập trang ít nhất 1 lần).