如何防止瀏覽器快取（Cache）？

前言 - Prologue

隨著網頁內容的日益豐富和動態化，防止瀏覽器快取成為了開發者不可忽視的一環。

瀏覽器快取的工作原理是將網頁的資源存儲在本地，這在某些情況下可能導致用戶看到過時的內容與樣式。

因此，我們需要一些方法來控制瀏覽器的快取行為，確保用戶總是獲取到最新的內容。

本文將探討瀏覽器快取的工作原理、對網站和應用程式的影響，以及一些可行的解決方案。

正文 - Main text

如前言所述，瀏覽器快取的工作原理是將網頁的資源存儲在本地，它會儲存一些較小的資源，例如圖片、腳本和樣式表，這樣在下次請求同一個資源時，就可以直接從快取中獲取，而不需要重新下載。這有助於提升網站的載入速度和性能，以提升用戶體驗，但也可能導致用戶看到過時的內容。

Web 端並不像 App 端一樣可以達到清除快取的功能，而雖然我們無法完整的清除瀏覽器的快取，但如果希望在網頁中進行更新並確保用戶看到最新的內容，除非更改 HTML 編碼、操作瀏覽器自身後台的清除快取，或是使用無痕模式，否則沒有直接的方法可以永久清除快取。

快取對網站和應用程式的影響

對於那些需要頻繁更新內容的網站和應用程式來說，瀏覽器快取可能是一個問題。用戶可能會看到舊版本的內容，而不是最新的內容。這可能對用戶體驗和功能的正確性產生負面影響。

防止瀏覽器快取的方法

以下是一些常見的方法和技巧，可以幫助我們防止瀏覽器快取：

1.禁用快取： 將下列程式碼插入在網頁的 <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">

這些指示告訴瀏覽器不要快取頁面的內容，並在每次請求時重新驗證頁面。

2.隨機化URL： 在每個網頁的URL參數中添加隨機值、版本號或時間戳，確保每次請求都是唯一的，從而避免使用快取。

# 隨機值
<img src="image.jpg?version=12345">

# 版本號
<link rel="stylesheet" href="styles.css?v=1.1">
<script src="script.js?v=1.2"></script>

# 時間戳
var url = "example.com/data?timestamp=" + new Date().getTime();

每次版本號更改時，瀏覽器將重新下載圖像。

在 AJAX 請求中禁用快取時，也可以添加一個隨機參數或者一個時間戳到 URL 中，確保每次請求都是唯一的。像是上方時間戳範例可導致每次請求都有一個新的時間戳，從而避免瀏覽器快取。

3.使用伺服器端快取控制： 在伺服器端設定中，可以使用特定的標頭來控制瀏覽器快取行為。

例如，在 Apache 伺服器上，可在 .htaccess 檔案中加入以下指令：

<FilesMatch "\.(html|js|css)$">
    FileETag None
    <IfModule mod_headers.c>
        Header unset ETag
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
    </IfModule>
</FilesMatch>

防呆筆記：

<FilesMatch "\.(html|js|css)$">：這是一個檔案匹配規則，它指定了要應用以下標頭設定的檔案類型，即以 .html、.js 或 .css 為副檔名的檔案。

FileETag None：此指令用於關閉檔案的 ETag（實體標籤），這是一種用於快取驗證的機制。

<IfModule mod_headers.c>：此指令用於確保 mod_headers 模組已經載入。

Header unset ETag：此指令將移除 ETag 標頭，以確保瀏覽器不使用 ETag 進行快取驗證。

Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"：此指令設定了 Cache-Control 標頭，其中包含了幾個指示，包括不要快取（no-cache）、不要儲存（no-store）以及必須重新驗證（must-revalidate）。

Header set Pragma "no-cache"：此指令設定了 Pragma 標頭，指示瀏覽器不要快取該資源。

Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"：此指令設定了 Expires 標頭，將過期時間設定為過去的一個日期，從而確保瀏覽器認為該資源已過期，需要重新載入。

在PHP中，可使用以下程式碼：

header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");

這些指令會告訴瀏覽器不要快取符合檔案類型的頁面，可以有效地控制特定檔案類型的快取行為，確保每次請求都從伺服器獲取最新的資源。

4.使用 JavaScript 控制： 使用 JavaScript 在頁面載入時清除瀏覽器快取，強制瀏覽器重新載入頁面。

window.onload = function() {
  location.reload(true);
};

這將強制瀏覽器重新載入頁面並忽略快取。

5.使用 POST 方法： 在發送 AJAX 請求時，將 HTTP 方法設定為 POST 而不是 GET。由於 POST 請求通常不會被瀏覽器快取，因此可以確保每次請求都能從伺服器獲取最新的內容。

var xhr = new XMLHttpRequest();
xhr.open("POST", "example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();