如何刷新浏览器的应用缓存？

刷新浏览器应用缓存的方法有很多，取决于你想达到的效果以及你所针对的浏览器。以下是一些常用的方法：

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 代码 ...