Hướng dẫn xóa cache trình duyệt của người dùng bằng .htaccess hoặc đổi đường dẫn

Khi trang web bạn đang chỉnh sửa các file css và javascript, trình duyệt mặc định sẽ lưu lại các file này trên máy người dùng để tăng tốc độ hiển thị.
Điều này có thể khiến người dùng xem không đúng nội dung bạn đã sửa. Mẹo dưới đây giúp clear cache trình duyệt người dùng.

1. Sử dụng .htaccess

Đoạn .htaccess nhanh để vô hiệu hóa bộ nhớ đệm của trình duyệt bằng cách thêm các thẻ Cache-Control, Pragma, và Expires. Chỉ cần thêm các hướng dẫn sau vào tệp .htaccess gốc trang web của bạn:
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Ngôi Sao Số đã test thử trên các trình duyệt phổ biến là Chrome, Firefox và Cốc Cốc hoạt động tốt. Tuy nhiên trong tương lai có thể các trình duyệt này sẽ cập nhật thường xuyên, Clearcache trình duyệt người dùng có thể liên quan tới bảo mật. Bạn nên kiểm tra kỹ điều này khi thực hiện.

Cập nhật 11/04/2020

Cập nhật 1: Dưới đây là một số mã khác mà bạn có thể khai thác thêm:
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Cập nhật 2: Còn đây là một cách khác tránh trình duyệt lưu trữ các file media của bạn.
<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|png|pdf|swf|txt)$">
	<IfModule mod_expires.c>
		ExpiresActive Off
	</IfModule>
	<IfModule mod_headers.c>
		FileETag None
		Header unset ETag
		Header unset Pragma
		Header unset Cache-Control
		Header unset Last-Modified
		Header set Pragma "no-cache"
		Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
		Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
	</IfModule>
</FilesMatch>
Bạn có thể tùy chỉnh danh sách các loại tệp cho phù hợp với nhu cầu cụ thể của bạn.

2. Dùng thẻ meta

Cách này dùng thẻ meta chèn vào head của trình duyệt, mình đã thử. Cách này thực chất là dùng mẹo hết hạn nội dung để vô hiệu hóa cache của trình duyệt. Một số trình duyệt không tự clear cache nên trong trường hợp bất khả kháng nên sử dụng cách này cho nội dung trang web thay vì CSS và HTML
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

3. Mẹo xóa cache người dùng bằng cách thay đổi đường dẫn file

Bạn không thể xóa bộ nhớ cache bằng javascript. Một cách phổ biến là sửa đổi đường dẫn file bằng cách nối thêm thời gian được cập nhật lần cuối vào cuối tệp, kiểu như sau:
Tương tự cho file CSS nhé
<script language="JavaScript" src="js/myscript.js"></script>
Đổi sang
<script language="JavaScript" src="js/myscript.js?update=14012020"></script>
Hoặc
<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>
hoặc
<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>
hoặc với php
<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>