如何重新整理瀏覽器的應用快取？

王铁柱6發表於2024-11-26
瀏覽器快取

重新整理瀏覽器應用快取的方法有很多，取決於你想達到的效果以及你所針對的瀏覽器。以下是一些常用的方法：

1. 強制重新整理/硬重新整理:

這是最簡單直接的方法，可以強制瀏覽器重新下載所有資源，包括HTML、CSS、JavaScript和圖片等。

  • Windows/Linux: Ctrl + Shift + R 或 Ctrl + F5
  • macOS: Cmd + Shift + R

2. 清除瀏覽器快取:

這會清除瀏覽器儲存的所有快取檔案，包括應用快取。具體操作步驟因瀏覽器而異，但通常可以在瀏覽器設定的“隱私和安全”或類似的選項中找到。

3. 使用查詢引數:

這是前端開發中最常用的方法之一，尤其是在開發過程中。透過在資源連結後面新增一個不斷變化的引數，例如版本號、時間戳或隨機數，可以欺騙瀏覽器認為這是一個新的資源，從而強制重新下載。

<script src="script.js?v=1.2.3"></script>
<link rel="stylesheet" href="styles.css?v=20241121">

每次更新資源後，只需更改版本號或時間戳即可。

4. 使用 Cache-Control 和 Expires 頭:

這是更高階的方法，透過設定 HTTP 頭來控制瀏覽器快取行為。Cache-Control 頭提供了更精細的控制，例如 no-cache、max-age 等。Expires 頭指定資源的過期時間。

5. Service Worker (PWA):

如果你的應用是 PWA (Progressive Web App)，你可以透過更新 Service Worker 來重新整理應用快取。Service Worker 可以攔截網路請求，並決定是從快取中獲取資源還是從網路重新下載。

6. Manifest 檔案版本控制 (PWA):

對於 PWA，manifest 檔案的版本號也會影響快取。更新 manifest 檔案的版本號會強制瀏覽器更新應用。

7. 程式化清除快取 (Service Worker):

在 Service Worker 中，你可以使用 caches.delete() 方法清除指定的快取。

示例 (結合版本號和程式化清除快取):

// 在你的 service worker 檔案中
const CACHE_NAME = 'my-site-cache-v1';

self.addEventListener('install', (event) => {
  // 安裝新的快取
});

self.addEventListener('activate', (event) => {
  // 清除舊的快取
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== CACHE_NAME) {
            console.log('Service Worker: Clearing old cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// ... 其他 service worker 程式碼 ...

選擇哪種方法取決於你的具體需求。對於開發過程，強制重新整理和查詢引數通常足夠了。對於生產環境，建議使用 Cache-Control、Expires 頭和 Service Worker 來更精細地控制快取行為。

希望這些資訊能幫助你!

相關文章